is it posible to make a universal jquery for basically all buttons in my code with diferent ids? i cant seem to get this to work. what im trying to achieve is everytime a button is clicked the javascript will add a class for that specific button that was clicked.
HTML :
<button type="button" onClick="myFunction(this.id)" id="test1" class="btn btn-primary btn-xs pull-right">button 1</button>
<button type="button" onClick="myFunction(this.id)" id="test2" class="btn btn-primary btn-xs pull-right">button 2</button>
<button type="button" onClick="myFunction(this.id)" id="test2" class="btn btn-primary btn-xs pull-right">button 2</button>
JS :
function myFunction(this) {
$(this).addClass("animated flipInY");
setTimeout(function(){
$(this).removeClass("animated flipInY")
},1000);
}
You can use click event with button selector and it will work for all your button :
$('button').on('click', function(){
$(this).addClass('animated flipInY');
}
Hope this helps.
I think the problem you have is more related with calling the "removeClass" for all buttons...
For that you need to change
setTimeout(function(){
$(this).removeClass("animated flipInY")
},1000);
to
setTimeout(function(){
$('button').removeClass("animated flipInY")
},1000);
in your code (or better add it to Zakaria answer).
Related
I have a div in which there are 3 buttons. What I am expecting is that when I click the 3rd button, the 2nd and the 3rd buttons should fadeOut ... but in reality, only the 3rd button is fading out ... why so?
Here's, my code
<div id="bttns">
<button class="btn btn-danger"> Delete </button> //1st Button
<button class="btn btn-warning"> Modify </button> //2nd Button
<button class="btn btn-success"> Complete </button> //3rd Button
</div>
And here is the jQuery
$(".btn-success").on("click", function(){
$( $(this) , $(this).parent().children(".btn-warning") ).fadeOut(500)
})
I couldn't find a question similar to mine ... and also I am new to all of this so if you do find that such a question exists, please redirect me to it.
This happens becuse:
$( $(this) , $(this).parent().children(".btn-warning") )
this is not a valid selector here. To chain multiple jQuery objects you can use .add() method and then call .fadeOut(500) on the collection like:
$(".btn-success").on("click", function() {
var $btn3 = $(this);
var $btn2 = $(this).parent().children(".btn-warning");
$btn2.add($btn3).fadeOut(500)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttns">
<button class="btn btn-danger"> Delete </button>
<button class="btn btn-warning"> Modify </button>
<button class="btn btn-success"> Complete </button>
</div>
As you have assigned classes. You can go like this :-
$(".btn-success").on("click", function () {
$('.btn-warning, .btn-success').fadeOut(500);
})
you are fading out only the button with the btn-warning class. instead use two selectors.
$(".btn-success").on("click", function(){
$(this).parent().children(".btn-warning, .btn-success").fadeOut(500)
})
I'm trying to apply a function when a button is pressed, but sometimes the button is appended, so I tried to apply the function to his class. The problem is that I can only make the function work when I link it to the button ID, when I link the class nothing happens. This happens to the button that is appended and to the normal button as well.
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control" id="createCustomLayer" class="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
If I change the .createCustomLayer for #createCustomLayer, all works fine.
You can't have multiple class="" move createCustomLayer into class="btn btn-light form-control", so it looks like class="btn btn-light form-control createCustomLayer"
Demo
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
This is because you have more than one class attribute in the element. If you have multiple class attribute in the same element then except the first one all are simply ignored:
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
I've got something like this:
<buttn type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> //WORKS GOOD
<button type="button" class="btn btn-primary" onclick="add_device(event, this)">Add</button>
Now I want the whole modal to close at the end of the add_device function. How can I do this?
I've tried
$(this).dialog('close');
But it doesn't work. Basically I want to do the same thing that I did with mi bttn 'Close' but now I want to do it at the end of this function.
$('#modalName').modal('hide');
or
$('#button').submit(function(e) {
e.preventDefault();
// Coding
$('#IDModal').modal('toggle'); //or $('#IDModal').modal('hide');
return false;
});
I'm having trouble changing a button value in bootstrap. I can change it using jQuery, but i'm changing it from a modal dialog. I looked elsewhere on SO but I couldn't find anything that seemed to match my specific issue?
Steps:
Click button. Change button text on main html form. Upon clicking the
button it changes the text, closes the modal, and then immediately
the text changes back to what it was originally. It should just change the text and stay that way, obviously.
$("#validate-rv-button").click(function () {
$("#review-history-validate").val("Review History");
});
HTML
<input id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" value="Validate" />
Any help would be much appreciated.
Another way to do it with <button></button>
<button id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" />Validate</button>
in jquery:
$("#validate-rv-button").click(function () {
$("#review-history-validate").text("Review History");
});
I believe you got the naming wrong.
This works:
$("#review-history-validate").click(function () {
document.getElementById("review-history-validate").value = "My value";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" value="elo" />
Or jQuery only as your question:
$("#review-history-validate").click(function () {
$("#review-history-validate").val("My value");
});
Here is my live demo: https://jsfiddle.net/johndoe1992/3uqg7y9L/
When I click some button on the left panel it must be cloned to the right panel (see live demo)
The bootstrap class 'disable' must be added on click to this button from the left panel too. We have the disabled button on the left and the enabled button on the right
When I click some button on the right panel it must relocate back to the left panel (see live demo)
We have the enabled button on the left and no button on the right
I've tried to find a solution using this, which works for #1 and #2, but I have no idea what to do with #3
$(this).clone().appendTo('.selected');
$(this).prop('disabled', true);
Thank you for your help
Firstly you need to use a delegated event handler to handle clicks on the buttons you dynamically add to the .selected div.
Secondly you need to add a way of identifying which button was clicked on in the .selected div and matching that with the original in the .base div. To do that you could use a data attribute. From there you can just set the disabled property state and remove() the clone. Something like this:
<div class="base">
<button type="button" class="btn btn-default" data-state="default">Text 1</button>
<button type="button" class="btn btn-primary" data-state="primary">Text 2</button>
<button type="button" class="btn btn-info" data-state="info">Text 3</button>
<button type="button" class="btn btn-warning" data-state="warning">Text 4</button>
<button type="button" class="btn btn-success" data-state="success">Text 5</button>
<button type="button" class="btn btn-danger" data-state="danger">Text 6</button>
</div>
<div class="selected"></div>
$(document).on('click', '.btn', function() {
if($(this).parent().attr("class") == "base") {
$(this).clone().appendTo('.selected');
$(this).prop('disabled', true);
}
else {
$('.base').find('[data-state="' + $(this).data('state') + '"]').prop('disabled', false);
$(this).remove();
}
});
Updated fiddle