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>

I have a form modal and need to replace/hide/ toggle it upon submit

So basically I have a form modal, I need it to hide and show my second modal upon submission, without leaving the page.
This is what I'm using, I'm not great at this stuff and this is probably an easy fix.
<script type="text/javascript">
$(document).ready(function () {
$('#myModal').modal('show');
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var $form = $('form');
$form.submit(function () {
$.post(
$(this).attr('action'), $(this).serialize(), function (response) {
$('#myModal').modal('hide');
$('#myModal2').modal('show');
},
'json'
);
return false;
});
});
</script>

Button JQuery event only working once, why?

<script>
$("button").on("click", function() {
   $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
$(".author").html(json[0].title);
$(".quote").html('"'+json[0].content+'"');
});
});
</script>
Situation: I click, the data is loaded. I click again, nothing changes.
Codepen: http://codepen.io/anon/pen/vxGgaZ
Reference: https://quotesondesign.com/api-v4-0/

The problem is because the first response is being cached. You can solve that by adding a $.ajaxSetup() call which stops the caching:
$.ajaxSetup({
cache: false
})
Updated Codepen
Alternatively, use $.ajax() and set cache directly in the settings:
$("button").on("click", function() {
$.ajax({
url: 'http://quotesondesign.com/wp-json/posts',
type: 'get',
cache: false,
data: 'filter[orderby]=rand&filter[posts_per_page]=1',
success: function(json) {
$(".author").html(json[0].title);
$(".quote").html('"' + json[0].content + '"');
}
});
});

Try Like This:
Maybe it's help you
<script>
$(document.body).on("click", 'button', function() {
   $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
$(".author").html(json[0].title);
$(".quote").html('"'+json[0].content+'"');
});
});
</script>

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();
}

how to create a pop up in mvc 4?

So, i want to show a pop up when deleting a row from my table, so this is my action link :
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
#Html.ActionLink("Delete", "Delete", new { id=item.cin },new { #class = "delete-logo" ,#pkNo=item.cin})
<div id="confirmDialog" title="Warning"></div>
my script :
<script type="text/javascript">
$(document).ready(function () {
buttonizeALL();
setLinks();
});
function buttonizeALL()
{
$(".delete-logo").button();
}
function setLinks()
{
//delete person
$(document).ready(function () {
$(".delete-logo").live("click", function (e) {
e.preventDefault();
var pkNo = $(this).attr("pkNo");
$("#confirmDialog").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
var rowNo = '#row-' + pkNo;
var url = '/Subscribers/Delete/' + pkNo;
$.ajax({
type: "Delete",
url: url,
data: {},
cache: false,
dataType: "json",
success: function () {
$(rowNo).animate({ opacity: 0.0 }, 400, function () {
$(rowNo).remove();
});
},
error: function (jqXHR, exception) {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
}, // end of yes button
"No": function () {
$(this).dialog("close");
}
} //end buttons
}); //end modal
}); //end delete
});
} //end setLinks
my problem is the pop up doesn't work, and when i used my script without the pop up it works, so please if some one have any idea i will be very appreciated.

Here is your example tidied up a little in a jsFiddle i.e. I've moved the setLinks() code into the document.ready() function.
$(document).ready(function () {
buttonizeALL();
setLinks(); // removed this
});
Also I've replaced the ActionLink with the anchor tag it will render.
This is using Jquery 1.8.3 and jQuery UI 1.9.2. The pop-up seams to work fine.

first off, don't use "live" command anymore. Thats been deprecated in lieu of the "on" command. Also there is no need to use the $(document).ready within the setLinks function. Since its a standalone function (not self executing) its only put into memory until its called when you call it in the doc.ready function.