I'm new to javascript and JQuery, and I'm working in a small project with JSP.
I create a grid dynamically with JSP and I added some buttons wich class is "select" and in the alt attribute I set the current row index. That works perfectly, I'm trying to set the onclick dynamically. This is my code
$('.select').click(function (){
alert($('.select').attr('alt'));
}
I want to each button to show its own index, but that code shows just the first index in each button. I've searched how to do it, but nothing comes out.
Is there a chance to do what I want?
change this line as:
alert($(this).attr('alt'));
When jQuery calls your event handler it sets this to be the DOM element in question, so try this:
$('.select').click(function (){
alert($(this).attr('alt'));
});
If you need to access DOM element properties you can then get them directly, e.g.:
alert( this.id );
this.value = "test";
If you need to use jQuery methods on the element you need to pass it to the jQuery function first, e.g.:
$(this).hide();
$(this).css("color","red").slideDown();
$('.select').click(function (){
alert($(this).attr('alt'));
});
Change
alert($('.select').attr('alt'));
by
alert($(this).attr('alt'));
Now you select the attr alt of the button lauch the event.
Not sure if that's what you're looking for but...
$('.select').click(function() {
$('.select').each(function() {
$(this).attr('value', $(this).attr('alt'));
});
});
This'll have every button "show" the value stored within their alt attribute when you click one button.
By the way, if you're using 1 button per row, you'd probably better go with index().
Related
I'm using this to take the value of an input and put it into another one at the end of the page:
jQuery( document ).ready(function() {
jQuery('.free-lesson input[type="text"]').each(function () {
jQuery(".free-lesson input[type='submit']").click(function(e) {
e.preventDefault();
var freeLessonContent = jQuery(this).val();
jQuery("#mce-EMAIL").val(freeLessonContent);
});
});
});
there are many .free-lesson divs but strangely only the last one works (the others don't put any value to the input in the form.
How to fix this?
This is the site: http://www.chineselearnonline.com/amember/signup40.php
You don't need to add the foreach in there. The this you reference in the foreach is not th element you need. Try this out.
jQuery('.free-lesson-form [type="submit"]').click(function(e){
e.preventDefault();
jQuery('#mce-EMAIL').val(jQuery(this).prev().val()); //find the element previous to the one that was clicked.
//You may also want to use .parent() and find the input as this is more reliable if you move the markup around
});
What I've done here is to bind to the click event of all submits inside the free-lesson-form div. And then capture the value of the text input that is next to the button that was clicked. Tried this out on your site and it works for the current markup.
I want danamically create select element in horizontal block. And have funny result. What is the correct way?
JSFiddle
You need to define where you want to append the new elements. For this, use .after(). And then you need to apply styles on the generated/modified controlgroup.
Demo here: http://jsfiddle.net/Palestinian/rKGtQ/
Code:
// append select menu after Button div
$("#Button_show_filters").after('<select id="sm"><option>Opt 1</option><option>Opt 2</option></select>');
// apply styles on select menu
$("#sm").selectmenu();
// add options to controlgroup
$( "#test" ).controlgroup( "option", "corners", true );
// create controlgroup
$( "#test" ).controlgroup().trigger('create');
controlgroup div ID is #test.
I think the main problem is that every time the "Push me!!" button is pressed, you are appending a select element with an id attribute of sm. Having multiple elements with the same id is invalid HTML and can cause problems with Javascript. See this question.
Namely, the $("#sm") line doesn't know which select you are trying to target.
Maybe you should try something like this:
$("button").click(function () {
$("#div_for_harakteristikinomenklatury_list").append('<select><option>Opt 1</option><option>Opt 2</option></select>');
$("#div_for_harakteristikinomenklatury_list select:last").selectmenu();
});
Also, you should get rid of the onclick attribute for the button. You don't need it. Passing the click handler to the click function should make the function run when the button is clicked.
Instead of using id you should use class and apply selctmenu only on last appended select element. Check this fiddle
$("button").click(function show_filters() {
//alert("Hello");
$("#div_for_harakteristikinomenklatury_list").append('<select class="sm"><option>Opt 1</option><option>Opt 2</option></select>');
$(".sm:last").selectmenu();
})
Updated Fiddle
change the $("#sm").selectmenu(); to $("select").selectmenu();
With above mentioned method no matter what is the id or class of the element you newly pushed, it'll get the styles applied.
Check the live fiddle here http://jsfiddle.net/mayooresan/VMj4U/6/
The following code should enable the second select element (id=ANSWER.TTQ.MENSYS.8.) when the value in the first select element (id=ANSWER.TTQ.MENSYS.9.) changes, but it doesn't work and I've exhausted all the options I can think of, including those suggested already on this site. (NOTE: the element ids must be these values, hence I'm not using # to select them, as that doesn't work).
$(document).ready(function() {
$("input[id='ANSWER.TTQ.MENSYS.9.']").bind('change',function() {
alert ('this script runs');
$("input[id='ANSWER.TTQ.MENSYS.8.']").removeAttr('disabled');
});
});
If I substitute the enabled select (id=ANSWER.TTQ.MENSYS.9.) with a button and the change event with a click event; it works. So why not with change event on the select element?
Thank you for your help.
Firstly, you can select by id using the # character. Secondly you need to escape the . in the id attribute otherwise the selector engine will look for an element with the id ANSWER which also has TTQ, MENSYS and 9 as classes. Try this:
$("#ANSWER\\.TTQ\\.MENSYS\\.9\\.").bind('change', function () {
alert('this script runs');
$("#ANSWER\\.TTQ\\.MENSYS\\.8\\.").removeAttr('disabled');
});
Example fiddle
$(document).ready(function() {
$("#ANSWER.TTQ.MENSYS.9.").bind('change',function() {
alert ('this script runs');
$("#ANSWER.TTQ.MENSYS.8.").removeAttr('disabled');
});
});
select is not input( i.e. text input)
I have some search results that I'm outputting that are of this form:
<div id="result" title="nCgQDjiotG0"><img src="http://i.ytimg.com/vi/nCgQDjiotG0/default.jpg"></div>
There is one of these for each result. I'm trying to detect which one is clicked and then do some stuff. Each result has a unique title, but the same id. How do I use .click() to know which one was clicked so I can get it's ID and use it?
Here's how I'm getting the HTML from above:
$.each(response.data.items, function(i,data)
{
var video_id=data.id;
var video_title=data.title;
var video_thumb=data.thumbnail.sqDefault;
var search_results="<div id='result' title='"+video_id+"'><img src='"+video_thumb+"'></div>";
$("#searchresults").append($(search_results));
I tried
$('div').click(function(){
alert(this.id);
});
and the alert says "searchresults" (no quotes).
Additionally, this is the perfect opportunity to make use of event delegation. With this technique, you do not have to worry about re-binding click handlers after programmatic insertion of new DOM elements. You just have one handler (delegated) to a container element.
$("#searchresults").delegate("div", "click", function() {
console.log(this.id);
});
See .delegate
You can't have the same ID on multiple tags. You will have to fix that. You can use the same class, but there can only be one object in the page with a given ID value.
this.id will fetch the id value of the item clicked on and this should work fine once you get rid of conflicting IDs:
$('div').click(function(){
alert(this.id);
});
This code should be something this:
var search_results="<div id='result'" + video_id + " title='"+video_id+"'><img src='"+video_thumb+"'></div>";
$("#searchresults").append(search_results);
to coin a unique id value for each incarnation and append will just take the string - you don't need to turn it into a jQuery object.
you could get the title using $(this).attr("title").val()
I am new in JQ. I have created this fiddle here: http://jsfiddle.net/SZ6mY/7/
All I want to do is to show an "ALERT" message when "C" button is clicked. Also I want to know that if you click "7" how you grab the value 7 in a variable in JQ?
Any input is appreciated! Thanks.
change btnClear to #btnClear. The # tells jquery that the following string is an ID and not a class, selector, etc.
$("#btnClear").click(function() {
alert("test");
});
You comment question:
$('input:button').click(function () {
alert(parseInt($(this).val(), 10))
})
this code will look for ALL input buttons and bind this event to them.
You need to add a "#" to specify that you are looking to use the id "btnClear".
You need a number sign to select by id, like $("#btnClear"). As for your second questions, all your numbered buttons are calling a function right now like NumPressed(7); So you can just use the parameter passed to that function. If you want to clean up your code though and remove those onclicks. You can also detect the value of the button like $(selector).val();
you should change the
$("btnClear").click(function() {
alert("test");
});
to
$("#btnClear").click(function() {
alert("test");
});
Then the jQuery can find the input element with id 'btnClear'.
Is that clear?
The number input elements you placed a function named NumPressed with the click event, so you can do it like normal js.
Okay! I did something like this: http://jsfiddle.net/SZ6mY/8/
So I'm assuming that in my seven variable the value 7 will be stored. Is this correct?