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>.
Related
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>
i have form including 2 type of information first type is new data and the second type comes from the database "this type defined by attribute preDefined"
i want to display search icon after input that have attribute preDefined only if i focus or hover on the input "this icon i use it to display new modal to select the data from database" so if i clicked on the icont button let the icon displayed if i clicked on another let the icon removed
this is the Jquery function
$('input').each(function(){
if ($(this).attr('preDefined') === 'preDefined') {
$(this).focus(function(){
$(this).after(
'<button type="button" class="preDefinedSearch" id="preDefinedSearch" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-search"></i></button>'
);
})
.blur(
jQuery('#preDefinedSearch').click(function(){
$(this).data('clicked', true);
}));
if(jQuery('#preDefinedSearch').data('clicked')) {
//clicked element, do-some-stuff
}
else {
$("#preDefinedSearch").remove();
}
$(this).hover(function(){
$(this).after(
'<button type="button" class="preDefinedSearch" id="preDefinedSearch" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-search"></i></button>'
);
},
function(){
$("#preDefinedSearch").remove();
})
}
});
this is my First code it works fine to add and remove the button but the problem when i click on the button the button removed and the modal not opened
// add search div pre define fields
$('input').each(function(){
if ($(this).attr('preDefined') === 'preDefined') {
// NOTE: add button on focus of preDefined input
$(this).focus(function(){
$(this).after(
'<button type="button" class="preDefinedSearch" id="preDefinedSearch" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-search"></i></button>'
);
})
// NOTE: remove button if no focus of preDefined input
.blur(function(){
$("#preDefinedSearch").remove();
});
}
});
Have a read of these articles from the JQuery API docs. .focus() and .blur() can be used to display or remove elements from the DOM when a certain element has been clicked into or clicked out of.
https://api.jquery.com/focus/
https://api.jquery.com/blur/
I'm using the following <a> tag to display a simple confirm which it does. However, when I click the Cancel button it still performs the post method. From my understanding, having the return in front of confirm should cause the form to not post if the Cancel button is clicked.
<a href="#"
data-potr-action="delete"
data-potr-val="#item.RID"
onclick="return confirm('Are you sure you want to delete this Request?');"
class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-trash"></i> Delete
</a>
I have this code at the end of the page but I don't think it has anything to do with the issue. I didn't thinking it would fire the click event when selecting Cancel in the Confirm dialog.
This just takes the values in the data-action and data-value and stores them to a hidden field. This is done on click which it shouldn't be getting to.
#section scripts {
<script>
$(document).ready(function () {
// Hook events on buttons and anchors
buildClickEvents();
});
// Hook events on buttons and anchors
function buildClickEvents() {
$("[data-potr-action]").on("click", function (e) {
e.preventDefault();
$("#EventCommand").val(
$(this).data("potr-action"));
$("#EventArgument").val(
$(this).attr("data-potr-val"));
$("form").submit();
});
}
</script>
}
To answer your question no confirm doesn't block form post. It return true if pressed "OK" or false if pressed "Cancel" button. See this from W3c
What you could is as below:
function buildClickEvents() {
$("[data-potr-action]").on("click", function (e) {
e.preventDefault();
var result = confirm('Are you sure you want to delete this Request?');
if(result == false){
return;
}
$("#EventCommand").val(
$(this).data("potr-action"));
$("#EventArgument").val(
$(this).attr("data-potr-val"));
$("form").submit();
});
}
And remove the below from a tag:
onclick="return confirm('Are you sure you want to delete this Request?');"
$("[data-potr-action]").on("click", function (e) {
if(confirm("your message")){
$("#EventCommand").val(
$(this).data("potr-action"));
$("#EventArgument").val(
$(this).attr("data-potr-val"));
$("form").submit();
}
e.preventDefault();
});
I've:
backdrop = document.getElementById('backdrop');
dialog = document.getElementById('dialog');
dialog_body = document.querySelector('#dialog .body');
document.addEventListener('click', function(e) {
if ( matches.call(e.target, '[data-show=dialog]')) {
buoy.addClass(backdrop, 'fadeIn');
buoy.addClass(dialog, 'fadeIn');
var href = e.target.parentNode.getAttribute('action');
dialog_body.innerHTML = '<div>FOOOOO</div>';
[].forEach.call(document.querySelectorAll('[data-hide=dialog]'), function(el) {
el.addEventListener('click', function() {
buoy.removeClass(backdrop, 'fadeIn');
buoy.removeClass(dialog, 'fadeIn');
})
})
}
}, false);
and [data-show=dialog] is:
<button type="sumit" class="btn xs default" data-show="dialog">
<i class="ellipsis-v"></i>
</button>
If I click on
<i class="ellipsis-v"></i>
the code doesn't work..
If I click out of
<i class="ellipsis-v"></i>
the code works perfectly..
Also if I have:
<button type="sumit" class="btn xs default" data-show="dialog">
<i class="ellipsis-v"></i>
<span>fooo</span>
</button>
If I click on
<i class="ellipsis-v"></i>
or
<span>fooo</span>
the code doesn't work..
If I click out of
<i class="ellipsis-v"></i>
or
span>fooo</span>
the code works perfectly..
What is the problem?
Why Not:
function handler(e){
var t=e.target;
if(t.dataset['show']=='dialog'||t.parentNode.dataset['show']=='dialog'){
/* code ...... */
}
}
document.addEventListener('click',handler,false);
in this case you have one eventHandler.(no loops).
you can add that handler to the parentNode for simplicity.
and you have to add a better check for t.dataset['show']=='dialog' as it produces an error if it has no dataset. (i wrote it just to give you an idea)
btw you search for data-hide but you have only data-show
if you have any questions just ask..
if i misunderstood your question tell me so i can reelaborate the code.
DEMO
http://jsfiddle.net/A7xk2/1/
Less eventHadlers is always more performance...
also in this example i'm just writing now... i need alot of mouse events and most of them are on the document itself...
http://jsfiddle.net/LxX34/12/
EDIT
Add the click handler on the btn elements
it works on span on li and on button as you can see in this example.
maybe your li has some sort of preventDefault or return false??
http://jsfiddle.net/A7xk2/2/
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.
}