I have an unordered list and I want to change the text on a button when a list item is clicked to the text in the list item. So far, I have:
$(document).ready(function() {
$('.List-item').on("click",function(){
$('#selectedOption').text("hi");
});
});
This will change the button text to hi when any list item is clicked. How can I get the button to display the list item text? Do I need to pass the list item into the function?
try:
$(document).ready(function() {
$('.List-item').on("click",function(){
$('#selectedOption').text($(this).text());
});
});
Because this will refer to what you click.
Also, you can use
event.target.innerText
to get the clicked li text without jQuery
.text will give you the text
$(document).ready(function() {
$('.List-item').on("click",function(){
alert( $('option:selected', this).text());
var txt = $('option:selected', this).text();
});
});
Try This:
$(document).ready(function() {
$('.List-item').on("click",function(){
$('#selectedOption').text($(this).text());
});
});
this refers to the object on which onclick is triggered.
You can try
$(document).ready(function() {
$('.List-item').on("click",function(){
$('#selectedOption').text($(this).text());
});
});
Related
I would like to add an element to another list and remove it from the current when clicked. I tried it with the property appendTo of Selectable, but nothing happens when I click on it.
I built this https://jsfiddle.net/wgaga8uc/ to ilustrate it.
$("#paramselectable").selectable({appendTo: "#paramselected"});
$("#paramselected").selectable({appendTo: "#paramselectable"});
I would appreciate any help,
Thanks.
$("#paramselected li").click(function(){
$("#paramselectable").append(document.createTextNode( "Hello" ));
});
Finally I achieved it adding and removing classes. https://jsfiddle.net/22d7sxvd/
$(function() {
$( ".paramsnav" ).selectable();
});
$('li').click(function () {
var selected = $('#params').find('.ui-selected');
if(selected.hasClass('selectable')) {
selected.removeClass('ui-selected');
selected.removeClass('selectable');
selected.addClass('selected');
selected.appendTo('#paramselected');
} else {
selected.removeClass('ui-selected');
selected.removeClass('selected');
selected.addClass('selectable');
selected.appendTo('#paramselectable');
}
});
I have an main php that load a php into a div box via a dropdown list.
The loaded php contains a table. There is jquery in it that does an alert on row clicked.
$(document).ready(function() {
$('#newsTable tr').click(function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
});
But after it is loaded into the div, the script is not firing
use Event delegation to attach event. Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$(document).ready(function() {
$(document).on('click','#newsTable tr',function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
}); // End
There is something with event delegation. Try using this code :
$('id_Or_Class_container_hold_the_php_data').on('click', 'tr', function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
replace
(document).ready(function() {
with
$(document).ready(function() {
try this
jQuery(document).ready(function($) {
$('#newsTable tr').click(function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
});
I think you need to use live query, instead of your click event u can use following.
$('#newsTable tr').on('click',function()
Use below code..i think its working properly.
$(document).ready(function() {
$("#newsTable").on('click','tr',function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
});
I have more similar elements in HTML which are being added continously with PHP. my question is the following:
With jQuery, I would like to add a click event to each of these <div> elements. When any of them is being clicked it should display it's content. The problem is that I guess I need to use classes to specify which elements can be clickable. But in this case the application will not be able to decide which specific element is being clicked, right?
HTML:
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
jQuery try:
$("test").on("click", function()
{
var data = ???
alert(data);
});
UPDATE - QUESTION 2:
What happens if I'm placing <a> tags between those divs, and I want to get their href value when the DIV is being clicked?
I always get an error when I try that with this.
this refers to the element triggering the event. Note that it is a regular js element, so you'll need to convert it to a jQuery object before you can use jQuery functions: $(this)
$(".test").on("click", function()
{
var data = $(this).text();
alert(data);
});
Like this:
$(".test").on("click", function(event)
{
var data = $(event.target);
alert(data.text());
});
this variable contains the reference of current item
$(document).ready(function() {
$(".test").click(function(event) {
var data = $(this).text();
alert(data);
});
})
;
The class selector in jquery is $(".ClassName") and to access the value, use $(this) as such:
$(".test").on("click", function(){
var data = $(this).text();
alert(data);
});
You can use this inside the function which mean clicked div
DEMO
$(".test").on("click", function () {
alert($(this).html());
});
What I'm trying to do! Rank your top 10 movies in order from 1-10.
When a link is clicked it should add the text value to the input and a button that removes the value. The process should be repeated until all inputs have a value.
My horrible code!
When I click a link, it adds the value to all inputs. How do I click a link add the value to input1, click another link add the value to input2, etc.
HTML
<div class="movies">
Titanic
Rainman
Forrest Gump
</div>
<ol>
<li>
<input type="text">
<button class="remove">X</button>
</li>
<li>
<input type="text">
<button class="remove">X</button>
</li>
<li>
<input type="text">
<button class="remove">X</button>
</li>
</ol>
jQuery
$('.movies a').click(function() {
var value = $(this).text();
var input = $('input')
input.val(value);
$('button').show();
});
$('button').click(function() {
$('input').val("");
$(this).hide();
});
See Demo on Fiddle
You can use .filter() to select the next input with no current value.
$('.movies a').click(function() {
var value = $(this).text();
var input = $('input').filter(function () {
return this.value === ''
}).eq(0);
input.val(value);
input.next().show();
});
Here is a demo: http://jsfiddle.net/yp2ee/3/
The above code will only select input elements where the value is blank and then it only selects the first one returned by the .filter() function. This way you only change the value of a single input and only the first blank one.
I also updated the show/hide code for the buttons by showing and hiding the element relatively to the input element or button element clicked:
input.next().show();
UPDATE
You can use .data() to store the state of the links so you can only add a movie once:
$('.movies a').data('clicked', false).click(function() {
if ($(this).data('clicked') === false) {
$(this).data('clicked', true);
...
}
});
Then in your "X" button click event handler you can change the data regarding that value before removing the value:
$('button').click(function() {
var val = $(this).prev().val();
$('.movies a').filter(function () {
return $(this).text() === val
}).data('clicked', false);
$(this).prev().val("");
$(this).hide();
});
Here is a demo of my update: http://jsfiddle.net/yp2ee/7/
Another way: not upto standards, but readable
Modified the HTML a bit by adding classes and ids
http://jsfiddle.net/yp2ee/5/
$('.movies a').click(function() {
var value = $(this).text();
var id = $(this).attr('id');
$('.'+id).val(value).show();
$('.'+id).next('button').show();
});
$('button').click(function() {
$(this).prev('input').val("");
$(this).hide();
});
You are simply selecting the elements with its tag name. It will return collection of elements. So we don't need that. Right.? so what should we do is we have to filter the required element by using .filter() function by supplying the necessary condition[empty] to it.
Ok now we are having chances to get more than one empty text boxes, so in that situation we have to use .first() to select the first element from that collection.
Try,
$('.movies a').click(function() {
var value = $(this).text();
var input = $('input')
.filter(function(){ return $.trim($(this).val()) == ""; })
.first();
input.val(value);
input.next('button').show();
});
$('button').click(function() {
$(this).prev('input').val("");
$(this).hide();
});
The above explanations would have given a minimum understanding about the mechanism. Ok now come to the point .next() and .prev(). Again you are selecting those buttons using the tag name. So actually what we need at this situation is to select the button next to the input box and vice versa. So we could use that both to accomplish what we needed.
DEMO
I want to append the text in last column of the table (grid like structure). Like below
When Click on Add button i want to append some text in last column adjacent to Add button. I am getting repated text on click of Add as in picture above.
This is what i have tried so far (one step away):
$(document).ready(function(){
$('.new').on('click', function(){
var recId= $(this).parents("#myTable td:last-child");
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
});
});
Can someone help me rectify this, Sample JSFiddle
Edit for Clarity in question
Sometext added in last column is dynamic and click event on Add button should fire multiple times.
Try .one()
Attach a handler to an event for the elements. The handler is executed
at most once per element per event type.
$('.new').one('click', function () {
fiddle Demo
Updated after OP's comment.
fiddle Demo
$(document).ready(function () {
$('.new').on('click', function () {
var recId = $(this).parents("#myTable td:last-child");
if (recId.text().indexOf("Sometext") === -1) { //if it contains Sometext it will not append it again but if it's a new value it will append it
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
}
});
});
Better code
fiddle Demo
$(document).ready(function () {
$('.new').on('click', function () {
var recId = $(this).parent();
recId.find('b').remove();
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
});
});
Try:
$(document).ready(function(){
$('.new').on('click', function(){
var recId= $(this).parents("#myTable td:last-child");
recId.find('b').remove(); //remove text
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
});
});
DEMO here.
i did this to your JS.
$(document).ready(function(){
$('.new').on('click', function(){
var recId= $(this).parents("#myTable td:last-child");
if (!recId.hasClass("changed")) {
recId.append('<b>Sometext</b>');
recId.css("background-color", "lightgreen");
recId.addClass("changed");
}
});
});
checking if the td has the class "changed", if not: add text, change bgcolor and the add the class "changed" so the event can fire but won't do anything to the same td twice.