I am new in jquery (real newbie) , but I am trying to solve a problem.
I cannot get this script to work in the desired way.
There are two divs. when you click on the second one, the first one is clicked as well.
That works for me when you have specific name for the first div.
html+css for both examples:
<div id ="div11" name="this-is-name-of-div" data-unique="this-is-name-of-div" style="width:100px;
height:100px;
background-color: blue; color:white;cursor: crosshair;">FIRST ELEMENT
SECOND ELEMENT
working axample-jsfiddle
$(document).ready(function () {
$("#div11").bind("click", (function () {
alert("DIV11 is clicked!");
}));
$(".item").bind("click", (function () {
$('div[name=this-is-name-of-div]').trigger("click");
return false;
}));
});
The first div has the same name attribute as second div data-unique attribute. By clicking the second div I would like to set the name of div to be clicked, but under those square brackets I cannot get it work. Can somebody help me to solve this correctly? Thx in advance for help.
$(document).ready(function () {
$("#div11").bind("click", (function () {
alert("DIV11 is clicked!");
}));
$(".item").bind("click", (function () {
$('div[name=$(this).attr("data-unique")]').trigger("click");
return false;
}));
});
jsfiddle-notworking-to-achieve
[jsfiddle-not-working-to-achieve][3]
Try this:
var name = $(this).attr("data-unique");
$('div[name=' + name + ']').trigger("click");
But this could fail if name contains some special characters like ]. If that's a concern, try using the filter method, like this:
var name = $(this).attr("data-unique");
$('div').filter(function() { return $(this).attr('name') == name; })
.trigger("click");
Demonstration
Related
I do know how to get the name of nav-tab when it is shown, but I am trying to get the name of the tab of a child element when the child element is changed. Just getting the name of the last tab clicked/shown won't help. I am using asp.net MVC Razor and need to find out what changed on the page and on what tabs. The user technically could click tabs without changing anything. I tried doing something like this:
$('body').on('change', '.form-control', function () {
var tab = this.closest('nav-tab');
})
I have also tried:
$('body').on('change', '.form-control', function () {
var tab = this.closest('.nav-tab');
})
but that did not work. There may be a better way to accomplish what I need. Any assistance is greatly appreciated.
Have you looked through the DOM to see where its nested? I've had luck in tables just going up to the TR then doing a find with the class. Maybe this sample will help?
$(".ctxMenu li").click(function () {
var thisLink = $(this).closest("tr").find("input[id$='" + $(this).attr("data-action") + "']").attr("id");
if (thisLink != "undefined") {
$(this).closest("tr").find("input[id$='" + $(this).attr("data-action") + "']").click();
}
$(".ctxMenu").hide(100);
});
$(".jqSaveChangeDiv").change(function (e) {
$(this).closest("div").find(".jqQuickUpdate2").trigger("click");
console.log("Updated " + $(this).closest("div").find(".jqQuickUpdate2").attr("id"));
});
Hi I am developing one jquery application. I ghave one dropdownbox with jquery choosen.
$(function () {
$(".limitedNumbSelect").chosen();
});
This is my dropdown and binding values from database.
<b>Awarded To:</b> <asp:ListBox ID="ddlvendorss" runat="server" SelectionMode="Multiple" class="limitedNumbSelect"></asp:ListBox>
I am trying to get click event for the above dropdown. As soon as i click on the dropodwn i want to fire a alert before loading any options.
$('#ddlvendorss').click(function (e) {
alert("I am going crazy");
});
In the below code checkedValues arrays contains some values(values present in dropdownlistbox). As soon as i click on the drodpown i ant to hide those values. But below code doesnt work.
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
$(".limitedNumbSelect option").each(function () {
var val = $(this).val();
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
Above code does not work. May I get some advise on this? Any help would be appreciated. Thank you.
Chosen hides the select element, thus you are not actually clicking the element. However you can use chosen:showing_dropdown event
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
alert('No need to go crazy');;
});
Fiddle
If you want to hide options, You can use
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
//Find options and hide
$(this).find('option:lt(3)').hide();
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
Fiddle
As per OP's code
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
//Get all options
var options = $(this).find('option');
//Show all
options.show();
//Hide based on condtion
options.filter(function () {
return checkedValues.indexOf($(this).val()) === -1;
});
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
instead on using on click, use on change e.g.:
jQuery('#element select').on('change', (function() {
//your code here
}));
as the title says, having a bit of a problem on a page thats using jquery's load function.
if you click the 'about' icon on the page it use the jquery load function, here's a demo of whats going wrong http://goo.gl/CaQqy1
you can see the #homepage-slider bugging out by displaying a div inside a div with the same id's so it duplicates the backgrounds.
here's the code:
jQuery(document).ready(function() {
jQuery('#nav-icons a').click(function(){
jQuery('#nav-icons a').removeClass("active-icon");
jQuery(this).addClass( "active-icon" );
var toLoad = jQuery(this).attr('href')+' #main-content';
var toLoadSlider = jQuery(this).attr('href')+' #homepage-slider';
jQuery('#main-content , #homepage-slider').hide('fast',loadContent);
function loadContent() {
jQuery('#homepage-slider').empty().load(toLoadSlider)
jQuery('#main-content').empty().load(toLoad,'',showNewContent())
}
function showNewContent() {
jQuery('#main-content , #homepage-slider').show('normal');
}
return false;
});
});
I managed to find a workaround for this issue by removing the id and class on the div layers
function showNewContent() {
jQuery('#main-content , #homepage-slider').show('normal').removeAttr('id class');
}
Use unwrap() to remove the duplicated parent element:
function showNewContent() {
jQuery('#main-content , #homepage-slider').show('normal').unwrap();
}
DOCUMENTATION
Or add a wrapper div inside your content and load that, for example:
var toLoadSlider = jQuery(this).attr('href')+' #homepage-slider .wrapper';
I'm creating a dropdown menu for mobile site
http://gthost.dyndns.org/kudu/en/
when I click on My Account and click on Who we are, submenu still show,,
I Want to hide it after I click on the link.
this is JavaScript code
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j(".account").click(function () {
var X = $j(this).attr('id');
if (X == 1) {
$j(".submenu").hide();
$j(this).attr('id', '0');
} else {
$j(".submenu").show();
$j(this).attr('id', '1');
}
});
//Mouseup textarea false
$j(".submenu").mouseup(function () {
return false
});
$j(".account").mouseup(function () {
return false
});
//Textarea without editing.
$j(document).mouseup(function () {
$j(".submenu").hide();
$j(".account").attr('id', '');
});
});
i would try using:
$('.submenu').css({display:"none"});
instead of .hide();
Two things strike me as odd here.
Why are your ID's integers - valid names start with [a-z_] etc.
Why are you changing the ID? An ID is meant to be a unique identifier and should persist as long as the element does. If you wish to store information about the state of an element within the element itself, then perhaps look into data attributes.
Without seeing your HTML structure everyone is going to be guessing but rather than whatever you are trying to do with the ID's it looks like you could logically use jQuery.toggle:
$j(".account").click(function(){
$j(".submenu").toggle();
});
In jquery-events: Click function
I have a webpage with search textbox and another textbox ( called textbox1).
When I search a name, I get a table in the same page with all relevant names in the NAME column with some additional information. This column can have 1, 2... 100 rows.. according to the search keyword. What I want to do is the following:
When I click on the cell of one of the results, I want its value to be copied into textbox1.
I tried the following but it can't seem to work:
<script type="text/javascript">
$(document).ready(function () {
$("td").click(function () {
$(this).attr("id", "td1");
$("#textbox1").val(td1.innerHtml); // I also tried $("#textbox1").val(this.innerHtml);
});
});
</script>
You almost had it, it's just .innerHTML (case-sensitive) instead:
$(document).ready(function () {
$("td").click(function () {
this.id = "td1"; //no need for .attr() here either!
$("#textbox1").val(this.innerHTML);
});
});