Archive

Archive for the ‘JQuery’ Category

Single selection Checkboxlist in Asp.net with the help of JQUERY

August 2, 2012 5 comments

INTRODUCTION
As we know CheckBoxList asp.net server control that comes under “System.Web.UI.WebControls” namespace allow multi selection . In this Small post I will show you how to make single selection in CheckBoxList asp.net server control using J Query.

HTML for Control
When Binding dynamically from database

<asp:CheckBoxList ID="chkTest" runat="server"
RepeatDirection="Vertical"
RepeatColumns="1">
</asp:CheckBoxList>

When it is static

<asp:CheckBoxList ID="chkTest" runat="server"
RepeatLayout=Flow  RepeatDirection="Horizontal" Width="99%">
<asp:ListItem Text="Test1" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="Test2" Value="2"></asp:ListItem>
<asp:ListItem Text="Test3" Value="3"></asp:ListItem>
<asp:ListItem Text="Test4" Value="4"></asp:ListItem>
</asp:CheckBoxList>

JQuery for this

<script type="text/javascript">
$(document).ready(function() {
var checkboxes = $('#<%=chkTest.ClientID %>').find('input:checkbox');
checkboxes.click(function() {
var selectedIndex = checkboxes.index($(this));

var items = $('#<% = chkTest.ClientID %> input:checkbox');
for (i = 0; i < items.length; i++) {
if (i == selectedIndex)
items[i].checked = true;
else
items[i].checked = false;
}
});
});
</script>

I hope . you will find it helpfull.

Advertisements
Categories: ASP.NET, JQuery Tags: ,

Rebinding events in jQuery after Ajax update (updatepanel)


Some time we use update panel and $(document).ready(function() {});function of jquery in same page . Then whatever written inside $(document).ready(function() {});not work once we have done or performed partail post back because script inside $(document).ready(function() {}); is not bound with the page .So in this Scenario we have two option for solving the problem for the same.

  1. PageLoad event handler
  2. endRequest event of the PageRequestManager class

let see implementation of both one by one.

Using PageLoad event handler

Since we’re using ASP.NET AJAX,we’ll have access to a pageLoad event handler,that gets called each time the page posts back, be it full or partial from an UpdatePanel.You just need to put this function into your page.


function pageLoad(sender, args)
{
if (args.get_isPartialLoad())
{
//Specific code for partial postbacks can go in here.
}
}

just place your entire  $(document).ready(function() {}); inside pageLoad event handler , now our problem solved.like this.

function pageLoad(sender, args) {
$(document).ready(function() {

$("input[id$=btnMail]").click(function() {
if ($("input[id$=txtMailingList]").val() == '') {
alert('Please enter e-mail Address');
return false;
}
else if ($("input[id$=txtMailingList]").val() != '') {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var eaddress = document.getElementById("<%=txtMailingList.ClientID %>").value;
if (reg.test(eaddress) == false) {
document.getElementById("<%=txtMailingList.ClientID %>").focus();
alert('Please enter valid email address.');
return false;
}
}
});

});
}

using endRequest event of the PageRequestManager class

endRequest event Raised after an asynchronous postback is finished and control has been returned to the browser. way of using :

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler)
Sys.WebForms.PageRequestManager.getInstance().remove_endRequest(endRequestHandler)

Hope this will help you in solving your problem . if it help leave a comment it encourage to write more on issue.

Categories: ASP.NET, JQuery Tags: ,
%d bloggers like this: