Develop Reference

How to add a clickable button to the group header?

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>.

jQuery call different function when buttons class has changed

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>

Moving code from jquery to angularjs

I have following code block in jQuery which I need to convert it into angularjs
JS Code
command: [
{
name: "Delete",
text: "<span class='glyphicon glyphicon-trash' aria-hidden='true'></span>",
click: function (e) {
e.preventDefault();
//add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = this.dataItem(tr); //get the row data so it can be referred later
wnd.content(confirmationWindowTemplate(data)); //send the row data object to the template and render it
wnd.open().center();
wnd.title("Delete Prospect");
$("#yesButton").click(function (e) {
alert("hi")
})
//$("#noButton").click(function (e) {
$scope.noButton = function() {
alert("hi!");
}
},
]
HTML Code
<div class="pull-right">
<button class="btn btn-blue" id="yesButton">Yes</button>
<button class="btn btn-default" ng-click="noButton()"> No</button>
</div>
I have not posted the entire code as it would be too lengthy. I want to convert this jquery code into angularjs. As you can see I am trying to call Yes and No function with jQuery and Angularjs respectively. When I click on yes, I see an alert message "hi" but I don't get an alert message when I click on no.
I am sorry if this question provides insufficient details. I am stuck on this from past 2 days. Any help would be appreciated.

How/where your code $scope.noButton = function() { alert("hi!"); }
is placed? as per my angularjs knowledge, you required controller in your HTML code and then you can set button with ng-click inside that controller, which will finally bind function in your angular controller file code.
Ref - http://fdietz.github.io/recipes-with-angular-js/introduction/responding-to-click-events-using-controllers.html
and here your yes button code $("#yesButton").click(function (e) { alert("hi") }) is working with jQuery so its working correctly

JQuery OnClick not changing text on first click

Have a basic link that I am using as a button and changing the text when the user clicks it to go from edit to done editing. When I first click the button, the click event happens but the text does not change until I click it again which is throwing off and not behaving as I would like:
HTML:
<a type="button" id="editButton" class="editButton" style="cursor: pointer">EDIT</a>
JS:
$("#editButton").click(function () {
var $this = $(this);
$this.toggleClass('editButt');
if ($this.hasClass('editButt')) {
$this.text('EDIT');
} else {
$this.text('DONE EDITING');
}
});
Fiddle

You toggle a class that is not present at first click, so it mean it will add it and then run your condition.
Add the class and problem solved
<a type="button" id="editButton" class="editButton editButt" style="cursor: pointer">EDIT</a>
http://jsfiddle.net/U8Ns3/4/

Try this out, and see fiddle
$("#editButton").click(function () {
var $this = $(this);
if ($this.hasClass('editButt')) {
$this.text('EDIT');
} else {
$this.text('DONE EDITING');
}
$this.toggleClass('editButt');
});

Simpler solution, here's a FIDDLE
<button type="button" id="editButton" class="edit">EDIT</button>
$('#editButton').click(function() {
var text = ($(this).text() === 'EDIT') ? 'DONE EDITING' : 'EDIT';
$(this).text(text).toggleClass('done');
});

how to detect the button class that clicks on show in bootstrap

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.
}