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.

textbox password gets shown on alert message

My textbox HTML code is:
<asp:TextBox ID="txt_pass"
runat="server" class="txt-box_reg"
onfocus="if (this.value == 'Password')
{
this.value = '';this.type='password';
}"
onblur="if (this.value == '')
{
this.value = 'Password';this.type='text';
}"
value="Password">
</asp:TextBox>
and my javascript code is:
<script type="text/javascript" language="javascript">
function myFocus(element) {
if (element.value == element.defaultValue) {
element.value = '';
}
}
function myBlur(element) {
if (element.value == '') {
element.value = element.defaultValue;
}
}
</script>
All things work fine till the alert message box opens on my page.
When the alert message opens, the password shows and when I close the alert box the password regain its value as...
//More INFORMATION//
When I put textmode="password" then the second textbox shows but I use to show my textbox as 3rd textbox i.e. Confirm Password

Do one thing, try it in your source code.
if(your alert box condition)
{
//your alert box coding
txt_pass.Text = ""; // or make text as you wish.
}
else.....
do this in your .cs page, at where you popup your Alert-box.

You are able to it using jQuery:
$(".txt-box_reg").focus(function (pas) {
$(".txt-box_reg").attr("Type", "Password");
});

Prevent Full Postback from __doPostBack

I have a content page that contains the following...
UpdatePanel1 - containing Error Display Divs
contains update triggers for both buttons
UpdatePanel2 - containing process 1 with an asp:button
updatePanel3 - containing process 2 with an asp:button
JavaScript that presents the user with a Popup confirm Jquery Messagebox based on the process they are executing.
UpdatePanel 2 or 3 becomes visible based on the users selection from the menu options.
When I click a button the messagebox pops and the page is processed correctly using __doPostback from the messagebox response and the page does a full postback.
I would rather the page do a partial postback and the content it had and display the Error Display Divs if there was an error. Any assistance would be appreciated.
nothing special about the button
<asp:Button ID="ResetSomething" runat="server" Text="ResetSomething" Width="275px" />
here is the content page script block
<script type="text/javascript" language="javascript">
<!--
function pageLoad() {
setform();
};
function setform() {
var reset1_button = $('input[id*=ResetSomething]');
var reset2_button = $('input[id*=ResetSomethingElse]');
reset1_button.click(function() {
var element = $(this);
$.prompt('Message1', { show: 'slideDown', buttons: { Ok: true, Cancel: false },
submit: function(v, m, f) { submit_reset_callback(v, m, element); }
});
return (false);
});
var submit_reset_callback = function(result, messages, element) {
if (result) { __doPostBack("ResetSomething");}
return (false);
};
reset2_button.click(function() {
var element = $(this);
$.prompt('Message2', { show: 'slideDown', buttons: { Ok: true, Cancel: false },
submit: function(v, m, f) { submit_update_callback(v, m, element); }
});
return (false);
});
var submit_update_callback = function(result, messages, element) {
if (result) { __doPostBack("ResetSomethingElse"); }
return (false);
};
};
-->
</script>
this is the code behind for the OnInit:
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
this.PreLoad += (sender, args) =>
{
this.ClientScript.GetPostBackEventReference(this, "arg");
if (!IsPostBack) { return; }
string __targetaction = this.Request["__EVENTTARGET"];
string __args = this.Request["__EVENTARGUMENT"];
if (string.IsNullOrEmpty(__args)) return;
if (__targetaction == "ResetSomething")
{
ResetSomething();
}
if (__targetaction == "ResetSomethingElse")
{
ResetSomethingElse();
}
this.upnlNotifications.Update();
};
}

Define the function below and replace your __doPostBack calls with doPostBackAsync(controlId, null).
function doPostBackAsync(eventName, eventArgs) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (!Array.contains(prm._asyncPostBackControlIDs, eventName)) {
prm._asyncPostBackControlIDs.push(eventName);
}
if (!Array.contains(prm._asyncPostBackControlClientIDs, eventName)) {
prm._asyncPostBackControlClientIDs.push(eventName);
}
__doPostBack(eventName, eventArgs);
}

The controlId should be the id of the button to generate async postback else full postback occurs in the page.
For that you can use the clientidmode as static e.g
<asp:Button ID="button1" runat="server" ClientIDMode="Static"/>
//then you can use below code
_doPostBack('button1', '');//clientidmode forces buttonid = id given by us
Check its correct?
If so then you can get the async postback instead of a full page postback.
This helped me.
Thanks #Tim for his comment.

How to allow tabs in an HTML Edit box?

I know this is probably a very beginner question that I just can't seem to find the answer to but anyway.
How do you allow a muli-line HTML edit box to allow tabs to be put into it?(rather than tab going to the next control)
I would prefer to do this without javascript also.

You cannot do this without JavaScript. Here's a sample done with jQuery if you want to go that route.

See here:
<html>
<head>
<script type="text/javascript">
function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function replaceSelection (input, replaceString) {
if (input.setSelectionRange) {
var selectionStart = input.selectionStart;
var selectionEnd = input.selectionEnd;
input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);
if (selectionStart != selectionEnd){
setSelectionRange(input, selectionStart, selectionStart + replaceString.length);
}else{
setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
}
}else if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == input) {
var isCollapsed = range.text == '';
range.text = replaceString;
if (!isCollapsed) {
range.moveStart('character', -replaceString.length);
range.select();
}
}
}
}
// We are going to catch the TAB key so that we can use it, Hooray!
function catchTab(item,e){
if(navigator.userAgent.match("Gecko")){
c=e.which;
}else{
c=e.keyCode;
}
if(c==9){
replaceSelection(item,String.fromCharCode(9));
setTimeout("document.getElementById('"+item.id+"').focus();",0);
return false;
}
}
</script>
</head>
<body>
<form>
<textarea name="data" id="data" rows="20" columns="35" wrap="off" onkeydown="return catchTab(this,event)" ></textarea>
<input type="submit" name="submit" value="Submit"/>
</form>

Wild hunch but I think you'd want to have multiple HTML edit boxes on the page, then use javascript (like jQuery) to place them into separate tabs.
The tabs will require some sort of javascript to create the interaction.
(ugh. Disregard. I was thinking visual user interface tabs. Not the tab character.)

<input id="textbox" />
<script language="JavaScript">
<!--
var textbox = document.getElementById("textbox");
if (textbox.addEventListener)
textbox.addEventListener("keydown", this.textbox_keyHandler, false);
else if (textbox.attachEvent)
textbox.attachEvent("onkeydown", this.textbox_keyHandler);
function textbox_keyHandler(e)
{
if (e.keyCode == 9)
{
var textbox = document.getElementById("textbox");
textbox.value += "\t";
if(e.preventDefault) e.preventDefault();
return false;
}
}
// -->
</script>