We Keep Coding

checkboxes not styled after ajax call

I have a script file scripts.js with a function that styles all checkboxes in page. This file is referenced in the master page.
There is a user control and a aspx test page for it. On page load, the UC shows a list of checkboxes and the style is applied.
On clicking a button, an ajax call gets a list from database and binds some more checkboxes to the page. But for the new checkboxes, the style is not applied. What could be going wrong.
scripts.js:
function selectcheckBtn() {
alert(1);
if ($("input:checkbox").prev("span").length === 0) {
alert(2);
$("<span class='uncheked'></span>").insertBefore("input:checkbox")
}
$("input:checkbox").click(function () {
check = $(this).is(":checked");
if (check) {
$(this).prev("span").addClass("cheked").removeClass("uncheked")
} else {
$(this).prev("span").addClass("uncheked").removeClass("cheked")
}
});
$("input:checked").prev("span").addClass("cheked").removeClass("uncheked")
}
ctrl.ascx:
<script>
function ShowMore() {
$.ajax({
url: "/_layouts/15/handlers/ShowMore.ashx",
data: {},
success: function (msg) {
//append new chkbox list to existing list. It is hidden at first and later faded in.
$(".divList").append(msg);
selectcheckBtn();
$(".hideDiv").fadeIn(300).removeClass("hideDiv");
},
error: function (msg) {
alert("An error occurred while processing your request");
}
});
}
</script>
Show more
On page load both alerts pop. But on clicking 'Show More', only alert(1) pops.
There are no errors in browser console.
Rendered HTML:
//with style applied to chkboxes on page load
<div><span class="uncheked"></span><input type="checkbox" runat="server" id="406">
<label>Compare</label></div>
//with no style applied to new chkboxes
<div><input type="checkbox" runat="server" id="618"><label>Compare</label></div>

I did not understand why the if condition wasn't true in selectcheckBtn();, for the new chkboxes. So, added a new class for the checkboxes and wrote this workaround.
Now calling this function instead of selectcheckBtn(); in the ajax code, worked.
function StyleCheckBox() {
$(".chkBx").each(function () {
if ($(this).prev("span").length === 0) {
$("<span class='uncheked'></span>").insertBefore($(this));
}
$("input:checkbox").click(function () {
check = $(this).is(":checked");
if (check) {
$(this).prev("span").addClass("cheked").removeClass("uncheked")
} else {
$(this).prev("span").addClass("uncheked").removeClass("cheked")
}
});
$("input:checked").prev("span").addClass("cheked").removeClass("uncheked")
});
}

Access jquery variable from the code behind

This is my html:
<input type="hidden" id="HiddenIndex" name="HiddenIndex" runat="server" />
Some labels and textbox
<asp:Button runat="server" ID="btnGetCoordinates"
Text="Get Coordinates" OnClick="btnGetCoordinates_Click" />
<asp:Label ID="info" runat="server" Text="Waiting...." />
So when the button Get Coordinates is clicked, it will call the Web Services to return some json results from code behind. A Dialog will popup a listbox with these results. It works perfectly until this point. My goal is when a client select an item in the list and click on "Select" button, it will return the selected item's Index, store in a hidden field and manipulate later from the code behind.
This is my jquery function
function ShowPopup()
{
$("#parentForm").fadeTo(500, .2);
$("#C1Dialog1").dialog({
open: function () {
$(".ui-dialog-titlebar-close").hide();
},
buttons: [{
text: "Select",
click: function () {
var value = " ";
storedIndex = " ";
var selected = $("[id*=lstCandidates] option:selected");
selected.each(function () {
value = $(this).val();
storedIndex = $(this).index();
$("#HiddenIndex").val(storedIndex);
});
alert(value + " and index is " + storedIndex); //Show value and index
alert("html hidden value " + $("#HiddenIndex").val()); //show value
$(this).dialog("close");
$("#parentForm").fadeTo(500, 1);
},
style: "margin-right: 40px;"
},
{
text: "Cancel",
click: function () {
$(this).dialog("close");
$("#parentForm").fadeTo(500, 1);
},
style: "margin-left:0px;"
}]
});
}
</script>
As you can see the alert show the value of the hidden field
This is my code behind
protected void btnGetCoordinates_Click(object sender, EventArgs e)
{
//Show the Dialog
if (count > 0)
{
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup();", true);
//never stop here --PROBLEM RIGHT HERE**, there is NO value for Hidden field**
var indexValue = Request.Form["HiddenIndex"];
info.Text = "HiddenIndex is " + indexValue;
}
}
The Info label show nothing when I click on Dialog's select button
Any help would be appreciated , thank you very much.

Probably an issue with the client ID. ASP.NET will not necessarily use the client ID in your markup when emitting the HTML.
There are several ways to fix this, but the easiest is to make the hidden field a plain HTML control. That way ASP.NET won't monkey with it. So change this
<input type="hidden" id="HiddenIndex" name="HiddenIndex" runat="server" />
to this
<input type="hidden" id="HiddenIndex" name="HiddenIndex"/>
Other options:
Set your clientIDmode to static
Modify your jquery selector to use id$='HiddenIndex' so that it ignores any prefix added by ASP.NET.

ASP .NET Cannot get Label text generate by autocomplete in code behind

Like the title, I used jquery autocomplete to set some text to some of my labels. Then, click save, but the event save in code behind only recieve "" from the labels.Text even though they already have text. Here is my code.
<input id="search" type="text" placeholder="search" />
...
<asp:Label ID="LabelNYCNhanVienName" runat="server"></asp:Label>
...
<script type="text/javascript">
$(document).ready(function () {
$("#search").autocomplete({
showHeader: true,
select: function (event, ui) {
this.value = (ui.item ? ui.item.FullName : ' ');
$('#<%= LabelNYCNhanVienName.ClientID %>').text(ui.item ? ui.item.bab: ' ');
return false;
},
minLength: 2,
source: function (request, response) {
$.ajax({
...
});
}
});
});
code Behind:
void ButtonSave_Click(object sender, EventArgs e)
{
Titi item = new Titi ();
item.titiName = LabelNYCNhanVienName.Text;
//My problem is here: the LabelNYCNhanVienName.Text always
//return "" even when i use firebug at that time to catch the LabelNYCNhanVienName
//It still have text in it.
OnSave_Event(item);
}
Here is the picture when i debug. At the save event, the Label still has Text:
Hope you can help me get text from the labels. Thank you

How do I call up a jQuery UI dialog from ASP.NET code behind without a client-side event?

I'm trying to open a jQuery UI dialog from my C# ASP.NET code based on a value being outside a certain range, rather than based on a button click or other client-side event. Here's the Javascript function that should create the dialog (at the top of the .aspx page):
<script type="text/javascript">
//Total out of range dialog
function ShowRangeDialog() {
$('#rangeDialog').dialog({
modal: true,
width: 'auto',
resizable: false,
draggable: false,
close: function (event, ui) {
$('body').find('#rangeDialog').remove();
},
buttons:
{
'OK': function () {
$(this).dialog('close');
}
}
});
}
</script>
Here's the dialog div itself (at the bottom of the .aspx page):
<div id="rangeDialog" style="display: none;" title="Total out of range">
<p>
Your line items total is out of the range allowed by the approval level you chose.
Please check the approval range and adjust the line items or quantities.
</p>
</div>
And here's the section of the C# code behind that attempts to display the dialog:
if (currTotal < lowerLim || currTotal > upperLim)
{
//Show jQuery dialog telling user that their line items total is out of range
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "dlgOutOfRange",
"ShowRangeDialog();", true);
}
The code in the if block is being reached and executed if I step through it in the debugger, but the dialog isn't being displayed. What am I missing?

I modified my function slightly, based on a question/answer I found at How do I open a jQuery UI Dialog from my c# code behind?, and now it works. Here's the modified function:
<script type="text/javascript">
//Total out of range dialog
function ShowRangeDialog() {
$(function() {
$('#rangeDialog').dialog({
modal: true,
width: 'auto',
resizable: false,
draggable: false,
close: function (event, ui) { $('body').find('#rangeDialog').remove(); },
buttons: { 'OK': function () { $(this).dialog('close'); }
}
})
}).dialog("open");
}
</script>

try this
if (currTotal < lowerLim || currTotal > upperLim)
{
//Show jQuery dialog telling user that their line items total is out of range
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "dlgOutOfRange",
"ShowRangeDialog();", true);
}
You should just be calling the function name.
Also, you may want to try startupscript instead of registerclientscriptblock. You have to be sure that your script gets added AFTER the function is defined, and not before.
if (currTotal < lowerLim || currTotal > upperLim)
{
//Show jQuery dialog telling user that their line items total is out of range
Page.ClientScript.RegisterStartupScript(this.GetType(), "dlgOutOfRange",
"ShowRangeDialog();", true);
}

How to call c# method with parameter from Jquery? ASP.Net 2.0

I show modal popup window in default.aspx page so:
<a id="popup" href="../Popup/Keywords.aspx">edit</a>
Jquery function:
$(document).ready(function () {
$('a#popup').live('click', function (e) {
var page = $(this).attr("href")
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 450,
width: 'auto',
title: "Edit Employee",
buttons: {
"Close": function () { $dialog.dialog('close'); }
},
close: function (event, ui) {
__doPostBack('<%= grdReportKeywordsRefresh(report_id) %>', '');
}
});
$dialog.dialog('open');
e.preventDefault();
});
});
How to call "grdReportKeywordsRefresh" method with parameter "report_id" right?
Why controls of Default.aspx page are not displayed in popup window?
report_id:
private String r_id;
public Int32 report_id
{
get { return r_id != null ? Convert.ToInt32(r_id) : 0; }
set { r_id = value; }
}
grdReportKeywordsRefresh method:
protected void grdReportKeywordsRefresh(int report_id)
{
grdKeywords.DataSource = conn.GetKeywordsByRepId(report_id);
grdKeywords.DataBind();
}

People are right, you're mixing stuff :)
It should go like this:
<script type="text/javascript">
this is what you call:
__doPostBack('updateMyGrid', '')
</script>
in codebehind (using VB.NET, if you use C#, I'll change it)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Page.IsPostBack AndAlso Page.Request("__EVENTTARGET") = "updateMyGrid" Then
'rebind your grid here
End If
End Sub
c# (just frome head)
protected void Page_Load(object sender, EventArgs e) {
if(IsPostBack && Page.Request["__EVENTTARGET"] == "updateMyGrid") {
//rebind here
}
}

You're mixing client and server code.
You're also loading another page altogether into your pop-up, so it's not surprising it's not showing anything from default.aspx.
You could set a value in a hidden field when you close the pop-up, then force the postback & on the server, check if the hidden field value is set and call the function if it is.
Simon

Where is report_id defined? You cannot use variables that are set in javascript because server side code (<%= %>) gets executed when the page is rendered by the server.