Develop Reference

Click on the button after the class appears in the DOM

There is a form in the popup window that sends data to Ajax. After a successful form, a message about successful submission with the .form-message--success class appears below. I would like that when this class appears in 5 seconds, the window close button with the id #close_pop a is clicked.
Is this possible when a class is added dynamically to the DOM?
I tried something like this, but it doesn't work(
jQuery(document).ready(function($) {
$('.jet-form-message--success').on(function(){
setTimeout(function(){
$('#close_pop a').click();
}, 2000);
});
});

<script>
$(function() {
$("#user-form").on("submit", function(event) {
event.preventDefault();
$.ajax({
url: "form.php",
method: "POST",
data: $( this ).serialize(),
success: function(data) {
alert('form send success');
setTimeout(function(){
$('#close_pop a').click();
}, 2000);
},
error: function(xr) {
alert("error "+xhr.status+' '+xhr.statusText);
}
});
});
});
</script>

how to bind event to element after generateing

I have this script :
$(window).load(function () {
$(document).on('click', '.btn-delete-confirm', function () {...});
});
and I have this element :
<div id="attachments"></div>
and I have this script to load some html :
$(document).on('click', '.nav-tabs li a[href="#attach"]', function () {
$.ajax({
url: loadAttachmentsURL,
data: { equipmentId: equipmentId },
success: function (data) {
$("#attachments").html(data);
}
});
});
in my result from ajax I have some button that have .btn-delete-confirm class but when clicked on them nothing happen .
the sample of result like this :
<td><a data-id="73b2db39-199c-845c-8807-6c6164d2d97d" data-url="/Admin/EquipmentAttachment/Delete" class="btn-delete-confirm btn">Delete</a></td>
how can I resolve this ?

one way will be by attaching click event after html is set:
$(document).on('click', '.nav-tabs li a[href="#attach"]', function() {
var equipmentId = "?";
var loadAttachmentsURL = "/url";
$.ajax({
url: loadAttachmentsURL,
data: {
equipmentId: equipmentId
},
success: function(data) {
$("#attachments").html(data);
$(".btn-delete-confirm").click(function() {
alert("click!");
});
}
});
});
another will be attaching the click event to the document context:
$(document).on('click', ".btn-delete-confirm", function() {
alert("click!");
});
$(document).on('click', '.nav-tabs li a[href="#attach"]', function() {
var equipmentId = "?";
var loadAttachmentsURL = "/url";
$.ajax({
url: loadAttachmentsURL,
data: {
equipmentId: equipmentId
},
success: function(data) {
$("#attachments").html(data);
}
});
});

You are trying to add an eventlistener to something that isnt there yet.
This will result in an error, and the event wont fire again.
So try to add the listener AFTER the ajax import.
$(document).on('click', '.nav-tabs li a[href="#attach"]', function () {
$.ajax({
url: loadAttachmentsURL,
data: { equipmentId: equipmentId },
success: function (data) {
$('#attachments').html(data);
$('.btn-delete-confirm').on('click', function () {...});
}
});
});

Though .delegate() method is deprecated in jquery-3.0, its description is still worth to have a look:
Attach a handler to one or more events for all elements that match the
selector, now or in the future, based on a specific set of root
elements.
Exmaple:
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );
Using document as a root element is not a big problem, but have you tried #attachments ?
$(window).load(function () {
$("#attachments").on('click', '.btn-delete-confirm', function () {...});
});

Ajax + browser backbutton = checkbox not working

I have a content page which is loaded via Ajax with a checkbox on it. The checkboxes works as it should when I click the normal menu buttons on my webpage to get to the content. But when I go to another page and use the back button to get back to the page which has the checkboxes, the checkboxes stop working.
html:
<div id="filters">
<ul id="filters-background">
<li id="option-type">Filter Options</li>
<li class="wave2"><label for="white">White<input type="checkbox" name="white" value=".White" id="white"></label></li>
<li class="wave2"><label for="blue">Blue<input type="checkbox" name="blue" value=".Blue" id="blue"></label></li>
</ul>
</div>
<script type="text/javascript">
OnSort();
</script>
js:
function OnSort(e) {
console.log('aaa');
// filter button click
var filterCheckboxes = $('#filters input');
var filters = [];
filterCheckboxes.change(function() {
console.log('clicked checkbox');
filterCheckboxes.filter(':checked').each(function() {
console.log('working');
filters.push( this.value );
});
});
}
If you look at the above code, the console will output 'aaa' when I click on the back button but if I test a checkbox it will not output 'clicked checkbox' in the console. How can I make it so the checkboxes will keep working even after I use the browser back button?
Maybe relevant PageLoad and Backbutton Ajax code:
function OnLoadPage(e) {
e.preventDefault();
var pageurl = $(this).data('url');
$.ajax({
type: 'GET',
url: pageurl,
success: function(data) {
$('#content').html(data['content']); // update content
if(data['menu']) { // update menu
$('#menu').html(data['menu']);
}
else {
$('#menu').html('');
}
// update url
window.history.pushState({path:pageurl}, '', pageurl);
},
error: function(response) {
alert('ERROR:' + response.responseText);
}
});
}
function InitOverrideBrowserBackButton() {
// override the back button to get the ajax content without page reload
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab', success: function(data){
$('#content').html(data['content']); // update content
if(data['menu']) { // update menu
$('#menu').html(data['menu']);
}
else {
$('#menu').html('');
}
}});
});
}
I've also tried:
$(document).on('click', '#filters input', function() {
console.log('clicked checkbox');
filterCheckboxes.filter(':checked').each(function() {
console.log('working');
filters.push( this.value );
});
});
Which will output 'aaa' and 'clicked checkbox' but not 'working'.

Figured it out with help from others on StackOverflow. Here's the answer:
function OnSort(e) {
console.log('aaa');
// filter button click
var filters = [];
$(document).on('click', '#filters input', function() {
console.log('clicked checkbox');
$('#filters input', document).filter(':checked').each(function() {
console.log('working');
filters.push( this.value );
});
});
}

Reset Bootstrap loading state button when AJAX call is completed

I have a simple AJAX request and I'm wondering if it's possible to combine the loading state button with my request. Is it possible to make the button reset to default when the request is completed, instead of choosing for example 5 seconds before reset as per now?
Loading state button
$("button").click(function() {
var $btn = $(this);
$btn.button('loading');
// simulating a timeout
setTimeout(function () {
$btn.button('reset');
}, 1000);
});
AJAX request
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
dataType:'html',
url: '/m/core/_processEditEntry.php',
data: $('form').serialize(),
success: function () {
$(".message").fadeIn(0);
$(".message").delay(5000).fadeOut('slow');
}
});
});
});

It's best to keep your code in the same place. Remove the click handler and add these lines to the ajax call:
$(function () {
$('form').on('submit', function (e) {
//save button so we can use later
var my_button = $(this).find("button");
//give button loading state
my_button.button('loading');
e.preventDefault();
$.ajax({
type: 'POST',
dataType:'html',
url: '/m/core/_processEditEntry.php',
data: $('form').serialize(),
success: function () {
//reset state
my_button.button('reset');
$(".message").fadeIn(0);
$(".message").delay(5000).fadeOut('slow');
}
});
});
});

You can add a span with a class to the button when it was clicked
if ($(this).is(".btn, .page-link, .df-link")) {
// disable button
$(".btn").prop("disabled", true);
// add spinner to button
$(this).html(
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ` + $(this).text()
);
}
and then in Ajax complete remove that element:
complete: function(response) {
$(".btn").prop("disabled", false);
$(".spinner-border").remove();
}

Turning a Standard Javascript Confirm Dialog into Bootbox Confrim

$(document).ready(function () {
$("#close").click(function () {
var link = $(this).attr("href"); // "get" the intended link in a var
var result = confirm("Are you sure?");
if (result) {
document.location.href = link; // if result, "set" the document location
}
});
});
How would I use Bootbox dialogs instead of the JavaScript Dialogs?
EDIT
Well I've tried but nothing happens upon clicking the Ok button the bootbox dialog
$(document).on("click", "#close", function (e) {
e.preventDefault();
var link = $(this).attr("href"); // "get" the intended link in a var
bootbox.confirm("Are you sure you want to close this Incident? This operation cannot be reversed.", function (result) {
if (result) {
document.location.href = link;
} else {
console.log("user declined");
}
});
});

I would consider using a Bootbox Dialog, like below.
Bootbox Dialogs allow you to attach callback functions to the buttons, so you can specify a specific function to occur for each button.
I also included the line closeButton: false, so that the user cannot click a close button to dismiss the Dialog, and instead must either click Ok or Cancel.
$(document).on("click", "#close", function (e) {
e.preventDefault();
var link = $(this).attr("href"); // "get" the intended link in a var
bootbox.dialog({
closeButton: false,
message: "Are you sure you want to close this Incident? This operation cannot be reversed.",
buttons: {
cancel:{
label: "Cancel",
callback: doThisOnCancel
},
ok:{
label: "Ok",
callback: doThisOnOk
}
}
});
doThisOnCancel(){
console.log("user declined");
}
doThisOnOk(){
document.location.href = link;
}
});