Aspdotnet-Sharepoint: JqueryUI

Showing posts with label JqueryUI. Show all posts

Monday, May 13, 2013

jquery redirect to another page in asp.net

Title:How to redirect the from one page to other page in asp.net using Jquery

Description:
Basically the scripting language are used to perform dynamic data processing on client side.It will be improve the performance of application
Example:
In previous examples i have given Validate dropdownlist using Jquery,JqueryUI Autocomplete textbox,Jquery Modal popup for mail in asp.net,Jquery Get next/previous month of year.Here i would like explain how to redirect to other page when click on the button in Asp.net using jquery. We can use location method in two ways as you can see in the script

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnRedirect').click(function () {
window.location.href = 'About.aspx';
// or you can use
// location.href = 'About.aspx';
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="btnRedirect" runat="server" Text="Redirect" />
</form>
</body>
</html>

Tuesday, November 20, 2012

Jquery UI autocomplete text box in Asp.net

In previous articles we have seen how to develop a Ajax autocomplete text box,Validate Asp.net dropdownlist using Jquery,Get dropdownlist selected value in Jquery,Allow only Numbers to textbox.Here i will show how to create a text box with auto complete using JqueryUI.Whenever use the jquery ,we need to add the jquery reference libraries to our application.In below i have been used jquery libraries(JqueryUI)and css to this task. In jquery i just create a array withe elements,then it will be assign to text box using auto complete .

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
var Keyword_Data = ["Share point","Sharepoint2010","Asp.Net","Asp","Csharp","Dotnet","MVC","MVC4","Jquery","Vb",
"Vb.Net","Sql Server","SQLSERVER 2012","Sliver Light"];
$("#<%= autoc1.ClientID %>").autocomplete({
source: Keyword_Data
});
});
</script>

Aspx:

<div>
<form id="UIform2" runat="server">
<asp:label id="tex" runat="server" text="Technology:"></asp:label>
<asp:textbox id="autoc1" runat="server"></asp:textbox>
</form>
</div>

Wednesday, September 5, 2012

Jquery LightBox example Using CSS

Title: JQuery LightBox Example And Plugin

Description:
In this post i will given how to create light box for image,content etc using jquery with CSS. We can also use JQuery light box plugin to do this kind of light box overlay.But here i just use simple jquery functions and some css properties to make light box.In the below example when we click on the image ,it will be display in light box as in below images.In this way we can create jquery lightbox using css and jquery

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a#Main").click(function () {
$("#lbDiv").show();
})
$("a#Sub").click(function () {
$("#lbDiv").hide();
})
})
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<a id="Main" href="#"><img src="Styles/munnar1.jpg" /></a>
<div id="lbDiv">
<h4>Munnar</h4>
<img src="Styles/munnar.png" style="margin-left:45px;" />
<p align="center">
<a id="Sub" href="#"><img src="Styles/images.jpg" /></a>
</p>
</div>
</asp:Content>

CSS for Div:

#lbDiv {
display:none;
position:fixed;
background:#CFFCCC;
padding:10px 15px 10px 15px;
top:150px;
left:50%;
margin-left:-250px;
width:400px;
z-index:999;
}

For Jquery Light Box Library Click on this

Saturday, November 19, 2011

Allow only numeric values from Keyboard using jquery

Title: How to allow only number in asp.net using JQuery

Description:As we know this is the validation kind of functionality of a control in any web application.the below example will describe how to allow only number when you click on the keyboard.So the required field will not the characters from the board

function NumericOnly(e) {
var presskey;
if (navigator.appName.lastIndexOf("Microsoft Internet Explorer") > -1)
presskey= e.keyCode;else
presskey= e.which;if ((presskey== 0 || presskey== 8 || presskey== 9))       
return true;
if ((presskey> 47 && presskey< 58))
return true;
else { e.returnValue = null; return false;
}
}

Aspdotnet-Sharepoint

Top menu