Hi I have following code that selects or de selects check boxes in a gridview which works fine.
$(document).ready(function () {
$("#<%=GridView3.ClientID%> input[id*='chkAll']").click(function () {
if ($(this).is(':checked'))
$("#<%=GridView3.ClientID%> input[id*='chkEmployee']").attr('checked', this.checked);
else
$("#<%=GridView3.ClientID%> input[id*='chkEmployee']").attr('checked', false);
});
});
My next step is to use .each class and iterate through each check box and display alert message.
$(document).ready(function () {
$('#mainForm').click(function () {
$("<%=GridView3.ClientID%> input[id*='chkAll']:checked").each(function () {
alert("checked box");
});
});
The above code does not work. Any suggestions how to fix it? Thanks
The second bit of code the selector is missing the #
$(document).ready(function () {
$('#mainForm').click(function () {
$("#<%=GridView3.ClientID%> input[id*='chkAll']:checked").each(function () {
alert("checked box");
});
});
Related
When I tried to refresh my controller view my page reload itself inside of the page with this code
$(function () {
$.ajaxSetup({ cache: false });
setInterval(function () {
$('#deneme').load('/veri/index/'); }, 500);
});
How can I solve this situation I attached as png ...
My code is in C#. I have a span with id change. I need to change the text onmouseover to a value from the database. I got the value and assign it to a label and I made it hidden. Now on mouseover I want to get the value of the hidden label.
Here is my script.
<script>
$(document).ready(function () {
$("#change").mouseover(function () {
$('#change').text("value of label");
});
$("#change").mouseout(function () {
$('#change').text("Investor");
});
});
</script>
How can I do it?
Solved By Me :)
I have solved the issue. It was because I had visible=false in the label properties and I should replace it with style="display:none;" .
.Regarding my Script. It is as below .
$(document).ready(function () {
var originalText = $('#change').text();
$('#change').mouseover(function () {
var hiddenVar = $('[id$="NewAccountsLabel"]').html();
$('#change').text(hiddenVar);
});
$('#change').mouseleave(function () {
$('#change').text(originalText);
});
});
Why don't you use the label value , your label should have the id
$(document).ready(function () {
Var lblvalue = $('#label').val();
$("#change").mouseover(function () {
$('#change').text(lblvalue);
});
$("#change").mouseout(function () {
$('#change').text("Investor");
});
The jQuery events are mouseover and mouseleave events. More on this here
// save the previous value in javascript variable
var originalText = $('#change').text();
//mouse event on mouseover the span
$('#change').mouseover(function() {
// read the value from the hidden label
var hiddenVar = $('#NewAccountsLabel').text();
// assign the new value from the hidden var
$('#change').text(hiddenVar);
});
//mouse event when mouse leaves the span
$('#change').mouseleave(function() {
// assign the original value when it leaves
$('#change').text(originalText);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<span id="change"> Investor</span>
<label id='NewAccountsLabel' hidden> value from DB </label>
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.
I am using a colorbox plugin with iframe. The iframe source is another HTML page which has a image courosal. Where i need to write a click event to get the id of the clicked image.
The ordinary click event on the HTML page in document ready is not working, i tried with live as well. Also i tried having a click event inside the colorbox onload function and failed.
Its an Web application with asp.net 4.0.
Please help me out on this to write a click event.
The Script where i am calling the colorbox
$(".iframe").colorbox({ iframe: true, width: "70%", height: "80%" });
$(".iframe").colorbox({
onLoad: function () {
alert('onLoad: colorbox has started to load the targeted content');
$('ul#boutiquegallery img').on('click', function () {
alert('clciked img');
});
},
onComplete: function () {
alert('onComplete: colorbox has displayed the loaded content');
},
//onClosed: function () { alert('onClosed: colorbox has completely closed'); }
});
The script that i have tried in My HTML
(function ($) {
$('#boutique').boutique();
//$("iframe.cboxIframe").contents().find($('ul#boutique img').live('click', function () {
// var id = $(this).attr('id');
// alert(id);
//}));
//$("iframe.cboxIframe").load(function () {
// alert('hi');
// // write your code here
// $('a').click(function () {
// alert('clciked');
// });
// $('img').live('click', function () {
// alert('clciked img');
// });
//});
})(jQuery);
$(document).ready(function () {
//$('img').on('click', function () {
// alert('clciked img');
//});
//$('iframe.cboxIframe').load(function () {
// $('iframe.cboxIframe').contents().find('img').live({
// click: function () {
// alert('clicked img');
// }
// });
//});
});
Try this extra step:
var iFrameDoc = $(".iframe").contentDocument || $(".iframe").contentWindow.document;
iFrameDoc.colorbox({
// rest of the code is the same as yours after here
onLoad: function () {
alert('onLoad: colorbox has started to load the targeted content');
$('ul#boutiquegallery img').on('click', function () {
alert('clciked img');
});
},
onComplete: function () {
alert('onComplete: colorbox has displayed the loaded content');
},
//onClosed: function () { alert('onClosed: colorbox has completely closed'); }
});
iframes can be tricky when trying to access DOM objects :)
The below code inside my HTML page has done the trick.
$(document).on('click', 'img', function () {
alert('hi dsad');
alert($(this).attr('src'));
});
I have a jquery function where upon clicking on a more link I display more information of a specified summary.
I am relatively new to jQuery and I was hoping for a pointer as to where I am going wrong as it is not working as it is.
$(document).ready(function () {
$('#more').on("click", function () {
"$('#more').hide(); $('#content').show();"
});
});
This is my C# code on code behind
topicGenerator.InnerHtml += summary.Substring(1, 100);
topicGenerator.InnerHtml += "<a href='#' id='more'> more...</a>";
topicGenerator.InnerHtml += "<div id='content' style='display:none;'>"+summary+ </div>";
Kind regards
Try changing
"$('#more').hide(); $('#content').show();"
to
$('#more').hide();
$('#content').show();
You don't need to wrap these statements in "quotations".
You could also condense .hide() and .show() into .toggle():
<script>
$(function(){
$("#more").click(function(){
$("#content").toggle();
});
});
</script>
See fiddle.
this will swap between show and hide and change the <a> to less then again more
$(document).ready(function () {
$('#more').click(function () {
$('#content').toggle();
if($('#more').html()=='more...'){
$('#more').html('less...');
}else{
if($('#more').html()=='less...'){
$('#more').html('more...');
}
}
});
});