I want to create the event based on data attribute instead of class name
<button type="button"
class="btn btn-danger approvalbtn" data-approvestatus="N" data-dismiss="modal">Reject</button>
Now I have added attribute as `$('.approvalbtn').prop("disabled",true);`
I want to check with data-approvestatus="N" in jquery
$('button[data-approvestatus=N]').click(function(){
alert("Clicked");
//$(this).prop("disabled",true) you can disable it too
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button"
class="btn btn-danger approvalbtn" data-approvestatus="N" data-dismiss="modal">Reject</button>
You're looking for the attribute selector! This is how:
$("[data-approvestatus='N']").prop("disabled", true);
Docs: https://api.jquery.com/attribute-equals-selector/
Related
I have a page with many articles. Each article has a delete button. How can I identify the button clicked for the article?
Currently I have this:
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
$('#delete-article').on('click', function(e) {
console.log('Test delete article');
});
This logs 'Test delete article' according to the number of articles on the page.
You can attach the event on button and use this object to refer the currently clicked button:
$('button').on('click', function(e) {
console.log(this.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
<button type="button" id="delete-article-2" class="btn btn-small btn-danger">Delete</button>
You can use your event variable to get the target of the event (that is, the element responsible) and from there get its id, like this:
let btnId = event.target.id;
However, for that to work properly you should assign unique ids to your buttons. If you want to provide other data (or you don't want to use id) you can append custom attributes, like data-value or similar, and use it like this:
let myValue = event.target.getAttribute('data-value');
You need to establish relation between article and corresponding button, one way to implement is by using HTML5 data attribute.
assign data-articleId to article id in button element and when you click the button you can access which button was clicked by using Jquery .data() function.
<button type="button" data-articleId='123' class="btn btn-small btn-danger delete-article">Delete</button>
$('.delete-article').on('click', function(e) {
$(this).data('articleId'); //will return 123;
console.log('Test delete article');
});
If all the buttons have this markup
<button type="button" id="delete-article" class="btn btn-small btn-danger">Delete</button>
Then the DOM sees them as just one button, you should find a way to attach unique ids to your buttons
You can get an object of clicked button then you can get any details from that object like an index or whatever you want.
$('#delete-article').click(function(){
console.log($(this));
console.log($(this).index());
});
You can directly achieve it by using the JavaScript.
document.addEventListener('click',(e)=>{
console.log(e.target.id)
})
<button type="button" id="delete-article1" class="btn btn-small btn-danger">Delete1</button>
<button type="button" id="delete-article2" class="btn btn-small btn-danger">Delete2</button>
<button type="button" id="delete-article3" class="btn btn-small btn-danger">Delete3</button>
<button type="button" id="delete-article4" class="btn btn-small btn-danger">Delete4</button>
<button type="button" id="delete-article5" class="btn btn-small btn-danger">Delete5</button>
<button type="button" id="delete-article6" class="btn btn-small btn-danger">Delete6</button>
<button type="button" id="delete-article7" class="btn btn-small btn-danger">Delete7</button>
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")
I want to replace following HTML string:
</p><span onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">XXX</span><p><br></p>
with:
</p><button onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">YYY</button><p><br></p>
using jQuery. I have tried .replace() function, but its not working for some strange reason.
try give span an ID and
You can do:
$("#yourid").text("YYY");
or
$("#yourID").html("testing <b>YYY</b>");
Here you go with a solution https://jsfiddle.net/bqfv5fge/1/
var span = $('span:contains("XXX")');
span.after('<button>YYY</button>');
$(span[0].attributes).each(function() {
$('button:contains("YYY")').prop(this.nodeName, this.nodeValue);
});
span.remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">XXX</span><p>
test paragraph
</p>
Use jQuery contains to get the target element.
Reference Document: https://api.jquery.com/contains-selector/
First get the reference of span element, then add button next to span using jQuery after.
Then attach all the attribute to the button and then remove span.
Try this, but better to add an ID for selector.
$(document).ready(function(){
$('span').click(function(){
$(this).text('YYY') or $(this).html('YYY');
})
})
var attr ='';
$("span").each(function(){
$.each(this.attributes,function(){
attr += this.name+'="'+this.value+'"';
});
});
$("span").replaceWith('<button '+attr+'>'+$('span').text()+'</button>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span onclick="alert(event)" class="btn btn-sm btn-success xyz" contenteditable="false">XXX</span>
https://jsfiddle.net/s0bv09gm/.
If you just want to replace "span" with "button" tag:
$(document).ready(function(){
var x = '</p><span onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">XXX</span><p><br></p>';
alert(x.replace(/span/g,"button"));
});
https://jsfiddle.net/L26fvfvL/
If you want to replace XXX with YYY:
HTML Code:
<span onclick="alert(event)" class="btn btn-sm btn-success" contenteditable="false">XXX</span>
JQuery Code:
$(document).ready(function(){
var x = $("span");
x.html(x.html().replace("XXX","YYY"));
})
https://jsfiddle.net/f7qsa6kw/
If you want to do both the things, apply the second step and then first step.
I have a couple of buttons
<button id="btn-ok[1]" class="btn-ok"></button>
<button id="btn-failed[1]" class="btn-failed"></button>
<button id="btn-ok[2]" class="btn-ok"></button>
<button id="btn-failed[2]" class="btn-failed"></button>
<button id="btn-ok[3]" class="btn-ok"></button>
<button id="btn-failed[3]" class="btn-failed"></button>
And I am running differnt jquery functions for btn-ok and for btn-failed.
I would like to use the index number of the id. How can I obtain it?
<script>
$(document).ready(function() {
$('#btn-ok').click(function() {
console.log('I would like to print the index of the pressed button here. (i.e. 1,2,3)');
});
});
</script>
Use html5's data attributes and separate the index and status into separate elements - I added some teext to each button so it could be easily seen and then the click grabs the data-attributes and console.logs the values.
$(document).ready(function() {
$('.btn').click(function() {
var index = $(this).data('index');
var status = $(this).data('status')
console.log(index + ' / ' + status);
}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button data-index="1" data-status ="ok" class="btn btn-ok">1 Ok</button>
<button data-index="1" data-status ="failed" class="btn btn-failed">1 Failed</button>
<button data-index="2" data-status ="ok" class="btn btn-ok">2 OK</button>
<button data-index="2" data-status ="failed" class="btn btn-failed">2 Failed</button>
<button data-index="3" data-status ="ok" class="btn btn-ok">3 OK</button>
<button data-index="3" data-status ="failed" class="btn btn-failed">3 Failed</button>
Create a collection of all those buttons to index against. Note that index() is zero based
var $buttons = $('.btn-ok, btn-failed').click(function(){
alert($buttons.index(this));
})
Or for more specifc target:
var $buttons = $('.btn-ok, btn-failed');
$('#btn-ok\\[1\\]').click(function(){
alert($buttons.index(this));
})
Or use data attributes instead of messing around with [] in ID
<button class="btn-ok" data-index="1"></button>
..
$('.btn-ok').click(function(){
alert($(this).data('index'));
})
HTML id's shouldn't use an index. Instead use a class to hold the selector and a data attribute to hold the other values you'll need like this:
The HTML:
<button class="btn-ok" data-index="1">Ok</button>
The JS:
$('.btn-ok').click(function() {
$(this).data('index');
});
The fiddle:
https://jsfiddle.net/kLvqe8dw/2/
did you mean to get id ?
$("button").click(function(){
alert($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-ok[1]" class="btn-ok">ok[1]</button>
<button id="btn-failed[1]" class="btn-failed">failed[1]</button>
<button id="btn-ok[2]" class="btn-ok">ok[2]</button>
<button id="btn-failed[2]" class="btn-failed">failed[2]</button>
<button id="btn-ok[3]" class="btn-ok">ok[3]</button>
<button id="btn-failed[3]" class="btn-failed">failed[3]</button>
I have a toolbar with buttons. Only one button has the class 'btn-info' for instance to indicate it is currently selected.
But it may not be 'btn-info', it could be btn-anything.
If I click any of the buttons in the tool bar I want to know what the matching class is on which ever button is selected.
I have tried:
$('.btn-toggle-group .btn').click(function(){
var selectedClass = $(this).siblings('button[class^="btn-"]').prop('class')
$('.btn-toggle-group .btn').removeClass('btn-info btn-primary btn-danger btn-success btn-warning btn-default')
})
And...
$('.btn-toggle-group .btn').click(function(){
var selectedClass = $(this).parent().find('[class^="btn-"]').prop('class')
$('.btn-toggle-group .btn').removeClass('btn-info btn-primary btn-danger btn-success btn-warning btn-default')
})
But to no avail.
How can I achieve this? The solution in Jquery or pure Javascript is fine (Javascript is preferred as it is native and faster).
<div class="btn-group btn-toggle-group">
<button type="button" class="btn btn-info">Current</button>
<button type="button" class="btn">Deleted</button>
</div>
Try using * instead of ^
$(this).siblings('button[class*="btn-"]').prop('class');
I think you just need to switch to .attr('class') instead of .prop('class'). DOM elements have properties className and classList; you could also use those if preferred.