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")
});
}

How to make a previous DIV text bold using JQuery

I have the following fiddle: http://jsfiddle.net/kmgj8ny9/
JQuery:
$(document).ready(function(){
$(".chosen-select").chosen();
$("body").on("focus", ".htLeft", function (e) {
//alert(this);
$(this).parent("div").parent("div").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
});
$("body").on("focusout", ".htLeft", function (e) {
$(this).parent("div").parent("div").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
});
});
If the textarea is focused, the Comments label is bold, but if the dropdownlist is focused, the Issue label isn't bold.
The dropdownlist is a HTML generated ASP.net control.
How can I resolve it?

Update
Based on the new HTML provided, I have tweaked the selectors to target the input elements created by the chosen plugin as well as your inputs:
$(document).ready(function () {
$(".chosen-select").chosen();
$("body").on("focusin", ".htLeft, .chosen-search input", function (e) {
console.log(this);
$(this).closest(".section").find(".span_small:first").removeClass("setNormal").addClass("setBold");
});
$("body").on("focusout", ".htLeft, .chosen-search input", function (e) {
$(this).closest(".section").find(".span_small:first").removeClass("setBold").addClass("setNormal");
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/12/
You can also combine the event handlers into one and check the event.type property to decide if you are focusin or focusout and toggle the classes accordingly:
$("body").on("focusin focusout", ".htLeft, .chosen-search input", function (e) {
var focusin = e.type == "focusin";
$(this).closest(".section").find(".span_small:first").toggleClass("setNormal", !focusin).toggleClass("setBold", focusin);
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/13/
Typically you would only need one class, which you toggle, rather than two as the default styling should be the same as setNormal. That means you can shorten it further to this:
e.g.
$("body").on("focusin focusout", ".htLeft, .chosen-search input", function (e) {
$(this).closest(".section").find(".span_small:first").toggleClass("setBold", e.type == "focusin");
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/14/
Original answer
Because of the plugin you are using for the dropdown, the control that gets focus in the dropdown is not .htLeft. That element has been buried within other elements to make the "pretty" control you see.
Try this as a quick fix:
$(document).ready(function () {
$(".chosen-select").chosen();
$("body").on("focusin", ".htLeft,:has(.htLeft)", function (e) {
//alert(this);
$(this).closest(".section").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
});
$("body").on("focusout", ".htLeft,:has(.htLeft)", function (e) {
$(this).closest(".section").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kmgj8ny9/3/
Normally I view the DOM in my browser to see what elements get created by plugins and target something specific to them.
Note: closest is always preferable to something like parent("div").parent("div") as it handles DOM changes.

You can also use mouseover and mouseout :http://jsfiddle.net/kmgj8ny9/6/
$(document).ready(function(){
$(".chosen-select").chosen();
$("body").on("mouseover", ".htLeft", function (e) {
$(this).parent("div").find("div:first-child").first().removeClass("setNormal").addClass("setBold");
});
$("body").on("mouseout", ".htLeft", function (e) {
$(this).parent("div").find("div:first-child").first().removeClass("setBold").addClass("setNormal");
});
});
UPDATE
After I gave it a little more thought, I believe .mouseup() would work better for this task.

Dialog popup doesn't work

I'm trying open a view in popup (dialog) after a click on a link, i don't find the problem:
Here is my JS code in my view:
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").on("click", "a", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () {
$(this).remove();},
modal: true,
height: 500,
width: 700
})
.load(this.href);
});
$(".close").on("click", "a", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
</script>
And here is my link in the same view:
#Html.ActionLink("Exports",
"List",
new { id = Model.Orga_Id },
new {
#class = "openDialog",
data_dialog_id="exportDialog",
data_dialog_title="Tous les exports"
})
All the code is of this view and the code of the view i'd like to show in the dialog is in the same Controller.
When i click on the link, my nav only change the page like a <a href="#"..></a>
Can you see what is wrong here? Do you need more information?

I believe your problem is your click handler.
$(".openDialog").on("click", "a", function (e) {
Your ActionLink is an A tag. The javascript you are using adds a click to an anchor tag that is a child of the object with the .openDialog class. But the anchor is the object with the .openDialog class, e.g. has no child anchor to attach a click handler to.
Try just
$(".openDialog").on("click", function (e) {
Refer to JQuery Documention for .on() for more detailed examples,
http://api.jquery.com/on/

Change your code as like below,
$(".openDialog").on("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () {
$(this).remove();},
modal: true,
height: 500,
width: 700
})
.load(this.href);
});

Perhaps trying the .live method instead of the .on
something like
('.openDialog').live('click', function (e) {
This solved a similar issue I was having recently, granted I am relatively new to JS/jQuery

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 pass parameters to an action that's called on JQuery dialog() Open event

Good morning.
I have a modal JQuery dialog that on Open calls and loads a Partial View. Good example can be seen here https://stackoverflow.com/a/4802423/1193841 but I'll re-paste:
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
open: function(event, ui) {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$(this).load("#Url.Action("CreateAlbumPartial")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
In my case ActionMethod "CreateAlbumPartial" takes an ID parameter that's passed from another page with onclick="" event.
How can I make that Id available to pass to an ActionMethod when its called as shown above ? Something like
$('#dialog').dialog('open',Id)
Would be awesome but I dont think that's how it works.
P.S. Right now I'm displaying my popup by doing $.post() to load .html(data) to div and then displaying that DIV in a .show().dialog('open').
However, instead of having my Action method call and Dialog related stuff separately I would really like to re-do it the way I'm asking to keep all logic in one place.
Thank you in advance.

Why dont you make a hidden control and assign the value to that and use it in the dialog