I'm trying to make an alert set off every time a button is clicked on, which is a column in a table.
However, the alert is only working when the user clicks the button in the top row. All rows below it does not work. Why?!
<span class="inline" id="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>
<td id ="Buy">
<a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
</td>
<script type="text/javascript">
$('#Buy').click(function() {
var myPart = $('#part-name').text();
alert (myPart);
});
</script>
Note I have tried with id="Buy" in both the td tag, and also the a tag.
If you want to bind to multiple DOM elements, bind to a class that they share instead (make a new class and use that class on each element).
Your DOM structure seems somewhat confusing, but if I understand it correctly, this should work.
<span class="inline" id="part-name" class="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>
<td class="buy" id ="Buy">
<a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
</td>
<script type="text/javascript">
$('.buy').click(function() {
var myPart = $(this).closest('tr').children('.part-name').text();
alert (myPart);
});
</script>
Instead of ID "Buy", give class name 'Buy' then use the below code
$('.Buy').on('click',function(){
alert($('#part-name').text());
});
This is because you're selecting the s by their ids. Id's are supposed to be unique, so jQuery is grabbing the first one. If you use classes it will work better.
<span class="inline" id="part-name" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>
<td class='Buy'>
<a class="btn btn-warning" href="{{offer.buynow_url}}">BUY NOW </a>
</td>
<script type="text/javascript">
$('.Buy').click(function() {
var myPart = $('#part-name').text();
alert (myPart);
});
</script>
Perhaps you might want to do something like this:
<span class="inline" id="part-name-{{partID}}" style="font-size:20px;font-weight:bold;"> {{unipart.part}}</span>
<td class ="Buy">
<a class="btn btn-warning" href="{{offer.buynow_url}}" partId="{{partID}}">BUY NOW </a>
</td>
<script type="text/javascript">
$('.Buy').click(function() {
var myPart = $("#part-name-"+$(this).attr("partId")).text();
alert (myPart);
});
</script>
This will break validation unless you are using HTML5.
Related
I have images list and need to select image for album cover.
HTML:
<button type="button" id="imageCover1" class="btn btn-sm btn-success btn-image-cover" data-id="1">
<i class="far fa-circle"></i> cover
</button>
<input type="hidden" name="is_cover[]" id="imageCover1" class="image-cover" value="">
<button type="button" id="imageCover2" class="btn btn-sm btn-success btn-image-cover" data-id="2">
<i class="far fa-circle"></i> cover
</button>
<input type="hidden" name="is_cover[]" id="imageCover2" class="image-cover" value="">
JS:
$(document).on('click', '.btn-image-cover', function () {
var item_id = $(this).attr('data-id');
$('.image-cover').val('');
$('#imageCover' + item_id).val('1');
$('#imageCover' + item_id).find('i').addClass('far fa-check-circle');
});
In action worked and change input value true But when i need to find i and change/add class jquery not find i. how to fix this problem?
It actually works.
The problem is that font awesome only renders one icon class. Change the addClass function to toggleClass like this:
$(document).on('click', '.btn-image-cover', function () {
var item_id = $(this).attr('data-id');
$('.image-cover').val('');
$('#imageData' + item_id).val('1');
$('.btn-image-cover').not(this).find('i').removeClass('fa-check-circle').addClass('fa-circle');
$(this).find('i').toggleClass('fa-circle fa-check-circle');
});
JSFiddle link
The toggleClass will remove the "fa-circle" class when it is present and add the "fa-check-circle" class if it is not present, and vice-versa.
As noted by #Teemu, you also have same ids with your (button + input:hidden) pairs. I've changed the id of the input:hidden to start with "imageData" instead.
I'm trying to do something like a social network, but I'm having problems with jquery, I want, by clicking the comment button, the user is taken to the comment field, but I'm not able to use $(this).
When the user click here
The code:
<button type="button" class="btn btn-default abreComentarios" >
<span class="fa fa-comments-o"></span>
</button>
The field:
The code:
<div class="comentar">
<textarea class="txtComentario form-control caixaComentario" placeholder="Seu comentário" onkeypress="comentarEnter()"></textarea>
</div>
My jquery:
$('body').on('click', '.abreComentarios', function() {
//console.log('entrou');
$(this).next('.caixaComentario').focus();
});
Remember, I'm using a foreach, so I have to use $(this)
Your next() isn't .caixaComentario but .comentar,
So use the next() but then you'll have to use find() (or children()) to focus the textarea
$('.abreComentarios').on('click', function() {
//console.log('entrou');
$(this).next('.comentar').find('.caixaComentario').focus();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-default abreComentarios">click</button>
<div class="comentar">
<textarea class="txtComentario form-control caixaComentario" placeholder="Seu comentário"></textarea>
</div>
Solved, i just did it:
1- Added a data-id with the id of the post in the button
<button type="button" class="btn btn-default abreComentarios" data-id="'.$post->id.'"><span class="fa fa-comments-o"></span></button>
2- Added the same id in the end of the name of class "caixaComentario"
<div class="comentar">
<textarea class="form-control caixaComentario'.$post->id.'" placeholder="Seu comentário" onkeypress="comentarEnter()"></textarea>
</div>
3- Call without $(this) on jQuery
$('body').on('click', '.abreComentarios', function() {
var id = $(this).data("id");
$('.caixaComentario'+id).focus();
});
and Worked :D
$(this) will be your <button>, but calling .next(".caixaComentario") will look for a sibling element to the button. If your <button> and <div class="comentar"> are siblings, the .next(".caixaComentario") will not match any elements as they aren't siblings. The would be a niece/nephew.
Try changing .next(".caixaComentario") to .next("div .caixaComentario")
My code in HTML :
<td id ="tdtest">
<a id="atest" href="#">
<span id="spantest">Show</span>
</a>
</td>
and Jquery :
$(document).ready(function () {
$("#tdtest #atest").on('click',function(){
alert ("Success !!!");
})
}
But when i click "Show" , it's not working.
You can't have a standalone <td> without a table and table row surrounding it. As soon as you write valid markup, it works:
$("#tdtest #atest").on('click',function(){
alert ("Success !!!");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="tdtest">
<a id="atest" href="#">
<span id="spantest">Show</span>
</a>
</td>
</tr>
</table>
As suggested in other answers already, an ID is already a unique identifier for a DOM element, so there's actually no need to use two ids in a selector and it might even internally slow down finding the correct node.
use div the place of td and your code is working.
<div id ="tdtest">
<a id="atest" href="#">
<span id="spantest">Show</span>
</a>
</div>
JS
$(document).ready(function () {
$("#tdtest #atest").on('click',function(){
alert ("Success !!!");
});
});
working fiddle here
only use one id in selector
put code after document ready, $(function(){ code here.. })
$(function(){
$("#atest").on('click',function(){
alert ("Success !!!");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<td id="tdtest">
<a id="atest">
<span id="spantest">Show</span>
</a>
</td>
Maybe is my question trivial, but I could not found a answer. Maybe I have been to much hours in front of the monitor :)
I have this situation:
<div class="col-xs-3" style='margin-left: -50px;'>
<a class="btn btn-primary" href="?c=Student&a=list" id="protokol"> List Studens</a>
</div>
This represent a button and with the click event, using MVC, the controller Student is called and the function list executed. But I need to send a parameter to this function that is the value of a HTML component.
<input type='text' id='parm' value=''>
How I can do this using the same structure? I tryed this, but is not correct
<div class="col-xs-3" style='margin-left: -50px;'>
<a class="btn btn-primary" href="?c=Student&a=list&v=<script>$('param').val();</script>" id="protokol"> List Studens</a>
</div>
If you're using jQuery you can attach a click handler to that element which appends the current value of the input. Try this:
$(function() {
$('#protokol').click(function(e) {
e.preventDefault(); // prevent the browser going to the default URL
var url = $(this).attr('href') + '&v=' + $('#param').val();
window.location.assign(url);
});
});
try this instead
<div class="col-xs-3" style='margin-left: -50px;'>
<a id="targetLink" class="btn btn-primary" href="?c=Student&a=list&v=<script></script>" id="protokol"> List Studens</a>
</div>
//document ready
$(function(){
var parameter = $('param').val();
$('#targetLink').attr('href', '?c=Student&a=list&v=' + parameter);
});
I want to change the content of a span in my form
HTML:
<form action="javascript:submit()" id="form" class="panel_frame">
<label>Origin:</label>
<div class="input-group" id="input-group">
<input type="text" id="origin" name="origin" class="form-control">
<span class="input-group-btn">
<button id="btn-default" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>
</span>
</div>
What I want change is che content of <span class="input-group-btn"> with
<button id="btn-default" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
So what change is: the icon pushpin to remove and the action useCurrentPosition to clearPosition.
I' using jquery and despite I've read other answer about similar question on Stack like: How can I change the text inside my <span> with jQuery? and how to set a value for a span using JQuery I haven't solved the issue.
I tried:
$("#input-group span").html('
<button id="btn-default" class="btn btn-default" type="button" onclick="br_bus.useCurrentPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>
');
,giving an id to the span and also modify the full div, but none solved my problem.
What am I missing?
Here's a way to overcome the problem of changing the onclick attribute, which is bad practice, without storing a Global var, and using jQuery delegation (learn to use it, it's really good):
$(document).on('click','.btn', positionChange); // Give that button an id on his own and replace '.btn' with '#newId'
// Not using an anonymous function makes it easire to Debug
function positionChange(){
var $btn = $(this), // Caching jQuery elements is good practice
$span = $btn.find('span'), // Just caching
pushpinApplied = $span.hasClass('glyphicon-pushpin'); // Check which icon is applied
( pushpinApplied ) ? useCurrentPosition() : clearPosition();
$span.toggleClass( 'glyphicon-pushpin glyphicon-remove' );
}
Rather than changing the function called in the onclick attribute I suggest having a flag in one function to define the logic it should follow.
For example:
function positionChange(this){
var $this = $(this);
if(!$this.data("currentpositionused")){
//useCurrentPosition() code here
$this.data("currentpositionused", true);
}
else {
//clearPosition() code here
$this.data("currentpositionused", false);
}
Then change your HTML to:
<button class="btn btn-default" type="button" onclick="positionChange(this)">
If you want to change only the onclick attribute of the button inside the particular span you can use the following in your script.,
$(document).ready(function(){
$("span.input-group-btn button").attr("onclick","clearPosition()");
});
EDIT
$(document).ready(function(){
$("span.input-group-btn button").attr("onclick","clearPosition()");
$("span.input-group-btn button span").attr("class","Your_class");
});
And also learn about how to change/add/remove attribute values....
Try this:
$("span.input-group-btn").html('<button class="btn btn-default" type="button" onclick="clearPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>');
Is it like This ?
how to change onclick event with jquery?
$("#id").attr("onclick","new_function_name()");
jquery change class name
$("#td_id").attr('class', 'newClass');
If you want to add a class, use .addclass() instead, like this:
$("#td_id").addClass('newClass');