I have the following element
<button type="button" class='launch' data-toggle="modal" data-target="#myModal">Launch modal</button>
<button type="button" class='boom' data-toggle="modal" data-target="#myModal"> Boom </button>
and I have an event listener:
$('#myModal').on('show', function () {
// how do I check if button has class launch or boom?
})
how do I check if button has class launch or boom inside the function?
or in other words the question is how do I get the button that triggers this action inside this function.
use the jQuery .hasClass method to check whether the class exsists.
$('#element').hasClass('launch'); // returns true or false;
try the code below. Please add the .myModalbtn class to both buttons
$('.myModalbtn').on('hidden', function () {
$(this).hasClass('launch')) // if the it has launch class -> returns true else false;
});
You can add a separate class for each button like .modalBtn for example and do:
$('.modalBtn').click(function() {
if ($(this).hasClass('launch')) showModal($('.launch'));
else if ($(this).hasClass('boom')) showModal($('.boom'));
});
function showModal( $btn ) {
//insert code to show modal (you can find it in the bootstrap javascript docs. Now you have $btn object to use.
}
Related
We are able to customize the group header title by using groupHeader: function(){ //code here }.
Any idea how do we add a clickable button to the group header? For now button is clickable but how do we fire an event once the button is clicked?
// Tabulator
...
groupHeader: groupHeaderFormatter,
// Function
function groupHeaderFormatter(value, count, data, group) {
let code = `<span id="valueText">${value}</span><button class="btn btn-link" id="btn"><i class="far fa-star"></i>`
return code;
}
Thanks :)
You can register an onclick handler just as you would normally in HTML:
<button onclick="myFunction"></button>
Calls myFunction when user clicks the button.
function groupHeaderButtonClicked() {
alert("You clicked the button.")
}
// Function
function groupHeaderFormatter(value, count, data, group) {
return `<span id="valueText">${value}</span><button onclick="groupHeaderButtonClicked" class="btn btn-link" id="btn"><i class="far fa-star"></i></button>`
}
Don't forget to close <button>.
I'm a little stuck on the follow issue. I have a webpage that has a button when clicked it does some ajax things and if the result/response of that is successful then the buttons class is changed.
What I then want, if that changed button is clicked again, I want it to call a different function.
The first part works no problem. The ajax is called and the buttons class is changed so the colour and text of the button is changed. But when click the button again, I want to call the .btn.off function, but it remains to call the .btn.on function while I would have hoped it would call the .btn.off function.
Unfortunately, my knowledge of jQuery is not the best, any help in the right direction would be very much appreciated.
Thank you so much.
<button type="button" class="btn on btn-danger" id="123"><i class="fa fa-trash-o"></i><span>On</span></button>
<script>
$(document).ready(function(){
$(".btn.on").click(function(){
//do some ajax stuf.....
$(this).removeClass('btn on btn-danger').addClass('btn off btn-success btn-sm');
$("span", this).text("Off");
});
$(".btn.off").click(function(){
//do some ajax stuf.....
$(this).removeClass('btn off btn-danger').addClass('btn on btn-danger btn-sm');
$("span", this).text("On");
});
});
</script>
$('.btn').click(function () {
var btn = $(this);
var isOn = btn.hasClass('on');
if (isOn) {
// do something maybe call on function or write logic for on
} else {
// do something maybe call off function or write logic for off
}
btn.toggleClass('on off'); // flip the on <-> off switch
$('span', this).text(isOn ? 'Off' : 'On'); // was on before toggle so flipped
})
You can do this by checking the classes and take action
The issue is because you're dynamically changing the classes on the element at runtime. One way to work around this is to use delegated event handlers, like this:
jQuery(function($) {
$(document).on('click', '.btn.on', function() {
// AJAX...
$(this).removeClass('on btn-danger').addClass('off btn-success btn-sm').find('span').text('Off');
});
$(document).on('click', '.btn.off', function() {
// AJAX...
$(this).removeClass('off btn-danger').addClass('on btn-danger btn-sm').find('span').text('On');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<button type="button" class="btn on btn-danger" id="123">
<i class="fa fa-trash-o"></i>
<span>On</span>
</button>
Hi this is an odd question and i will try to ask it correctly. I have a function using javascript called load canvas.
function loadCanvas(canvas) {
relevant code here...
}
I also have a normal button called btn.
<button class="btn" type="button">Play!</button>
I am wondering can i disable the function until the play button is selected? The function is for a game using javascript. So on load there isnt anything there until i press play then it appears!
any ideas/help please?
$(document).ready(function(){
var loadCanvas= function (canvas) {
relevant code here...
}
$("#test").on('click',loadCanvas()); // using jquery
document.getElementById("test").addEventListener("click",loadCanvas()); // using javascript
<button class="btn" id="test" type="button">Play!</button>
})
If you are having issue because other method is triggering the function you can add a flag with a boolean and turn it on when you click..
Something like that:
The button don't change at all
<button class="btn" type="button">Play!</button>
The js code with this change:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
And in the on click function add this before call the function:
buttonClicked = true;
At the end your js should look like this:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
$(".btn").click(function(){
buttonClicked = true;
var canvas = ...;
loadCanvas(canvas );
});
EDIT
If you have more buttons with the class .btn you should use an id and change the selector of the .click() with the selector of the id instead of the class selector
As you mentioned in the comments <script type="text/javascript"> loadCanvas("game"); </script> You are calling the function as soon as the page loads. So you will have to change it to:
<button class="btn play-button" type="button">Play!</button>
<script type="text/javascript">
$('.play-button').click(function(e){
loadCanvas("game");}
);
</script>
If you are not using jquery you will have to handle the click event by javascript.
You got to do following:
function loadCanvas(game) {
alert('loading canvas');
}
<button class="btn" type="button" onclick="loadCanvas('game')">Play!</button>
I am using java-script bootstrap. And i am trying make Modal to appear on error or wrong input. Is it possible? Button one on their website works perfect but can you modify it?
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
http://getbootstrap.com/javascript/#modals
Yes.
I'd recommend creating a function that is run when the buttn in the modal is clicked to submit the input.
Example:
<button onclick="checkInput()">Button</button>
then create a function like the one below
// Pure JS
function checkInput () {
if(document.getElementById('inputId').value == "correct input") {
var modal = document.getElementById("modalId");
modal.className = modal.className + " hide";
}
}
//JQuery
function checkInput () {
if($('#inputId').val() == "correct input") {
$('#modalId').modal('toggle');
}
}
This question already has answers here:
Bootstrap onClick button event
(2 answers)
Closed 6 years ago.
Ok I'm new to bootstrap themes and all, so was trying to fire a javascript onclick method on
the below bootstrap button but couldn't figure out how to do so..
<a class="btn btn-large btn-success" href="http://twitter.github.io/bootstrap/examples/marketing-narrow.html#">Send Email</a>
Any help would be appreciated..
Just like any other click event, you can use jQuery to register an element, set an id to the element and listen to events like so:
$('#myButton').on('click', function(event) {
event.preventDefault(); // To prevent following the link (optional)
...
});
You can also use inline javascript in the onclick attribute:
<a ... onclick="myFunc();">..</a>
<a class="btn btn-large btn-success" id="fire" href="http://twitter.github.io/bootstrap/examples/marketing-narrow.html#">Send Email</a>
$('#fire').on('click', function (e) {
//your awesome code here
})
You can use 'onclick' attribute like this :
<a ... href="javascript: onclick();" ...>...</a>
Seem no solutions fix the problem:
$(".anima-area").on('click', function (e) {
return false; //return true;
});
$(".anima-area").on('click', function (e) {
e.preventDefault();
});
$(".anima-area").click(function (r) {
e.preventDefault();
});
$(".anima-area").click(function () {
return false; //return true;
});
Bootstrap button always maintain th pressed status and block all .click code.
If i remove .click function button comeback to work good.