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);
});
});
Related
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
}));
On the click event of a button I am reading the rows of a html table
and all I get with the alert is shown in the attached image.
I want to be able to get the value highlighted in yellow and store in a variable.
How can I achieve that?
$(document).on("click", "#AMeter", function () {
$('#Meters1 .numval').each(function () {
alert($(this).html());
});
});
You can use find() to get the input within #AMeter and then val() to get its value:
$(document).on("click", "#AMeter", function () {
$('#Meters1 .numval').each(function () {
var numval = $(this).find('input').val();
// use numval here...
});
});
Alternatively, if you want to build an array of all the .numval values in the row, you can use map():
$(document).on("click", "#AMeter", function () {
var values = $('#Meters1 .numval input').map(function () {
return this.value;
}).get();
// use values here...
});
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
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();
});
I have a div that I need to grab the HTML contents of (so naturally I use html())...
However, they are text fields. Whenever I grab the contents of the div (that contains the text fields), it grabs the initial HTML and not any data changed by the end user...
Here is JS bin version..change the input field, run the function and you see that it will only take the initial value of the field...
Any way around this?
http://jsbin.com/oleni3/edit
http://jsbin.com/oleni3/5/edit
Try this out ^
The code:
$(document).ready(function() {
$('div#top input').change(function() {
$(this).attr('value', $(this).val());
});
$('#click').click(function() {
var _curHtml = $("div#top").html();
$("div#bottom").html(_curHtml);
});
});
Your getting the HTML of the div. You want to get the value of the input box:
$(document).ready(function() {
$('#click').click(function() {
var _curHtml = $("#data").val();
$("div#bottom").html(_curHtml);
});
});
No way to do it with html(). You'll have to get the value of each input using val(). You can use
$("input").each(function() {
doSomething($(this).val());
}
if it make life easier.
$(document).ready(function() {
$('#click').click(function() {
var _curHtml = $("#data").val();
$("div#bottom").html(_curHtml);
});
});
The easiest hack would be like this:
$("div#bottom input").val($("div#top input").val());
Get the value of the updated input and set that to the clone.
Updated link:
http://jsbin.com/oleni3/3/edit
$(document).ready(function() {
$('#data').change(function() {
$(this).attr('value', $(this).val());
})
$('#click').click(function() {
var _curHtml = $("div#top").html();
$("div#bottom").html(_curHtml);
});
});
This works.. here's the link http://jsbin.com/oleni3/2/edit
UPDATE: If you have many inputs inside the div, you can use this http://jsbin.com/oleni3/6/edit