I want to disable button 10 minutes after it was clicked. I am using this code and it is working if there is no delay() added. But with delay it is not working.
<script>
$(".selected-button").delay(600000).attr({
disabled: true,
title: "You have already chosen the best answer and now you can not change it!"
});
</script>
You can try to do something like this using setTimeout instead:
$(".selected-button").click(function() {
var $this = $(this);
$this.attr("disabled", true);
setTimeout(function() {
$this.removeAttr("disabled");
}, 600000);
});
To disable button 10 minutes after click:
$(".selected-button").click(function() {
$.ajax({
type: 'POST',
url: url,
data: data,
done: function (data) {
if (data.status === 'OK') {
var that = $(this);
setTimeout(function() {
that.prop("disabled", true);
}, 10*60*1000);
}
}
});
});
See fiddle example for 5s.
Related
I am using simple popup and I want to auto close popup after seconds. Please guide me how to do that
jQuery(document).ready(function($) {
$(".movenext").on("click", function(e) {
e.preventDefault();
$(this).simplePopup({
type: "html",
htmlSelector: "#popupuser"},
setTimeout(function(){
$(this).simplePopup().close();
}, 3000)
);
});
});
Try this,, you are loosing the this scope inside setTimeout callback, see if that works
jQuery(document).ready(function($) {
$(".movenext").on("click", function(e) {
e.preventDefault();
var self = this;
$(this).simplePopup({
type: "html",
htmlSelector: "#popupuser"
});
setTimeout(function() {
$('.simple-popup-content .close').click();
}, 3000);
});
});
EDIT:
I've updated your fiddle, see it here: https://jsfiddle.net/8vx0185d/1/
The callback given to setTimeout has no "this" value. Use a variable to store $(this) and use it in your setTimeout callback
jQuery(document).ready(function($) {
$(".movenext").on("click", function(e) {
e.preventDefault();
var element = $(this);
element.simplePopup({
type: "html",
htmlSelector: "#popupuser"
});
setTimeout(function(){
element.simplePopup().close();
}, 3000);
});
});
Guys What I am trying to do is load a page on navigation click with ajax and put some delay in it loading
when nothing is clicked I want load home page following loading animation with jquery and a delay with PHP code
and if something on nav is clicked I want to load that particular file
but this code don't seem to be working
var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
});
$('ul#nav_a li a').click(function(){
$.ajax({
url: 'templates/delay.php',
beforeSend, function(){
res.container.append(res.loader);
},
success, function(){
res.container.find(res.loader).remove();
var page=$(this).attr('href');
$('.content').load('templates/pages/'+page+'.php');
return false;
});
});
}
});
I will not discuss the code itself, but just improve it.
Try this code and tell me if you get what you want : ( comments inside the js code )
$(document).ready(function(){
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/home.php');
}
// beforeSend and success are keys with functions as values that's why we use ":" and not ","
// the "," comma is used to separate ajax settings
});
$('ul#nav_a li a').click(function(){
var page = $(this).attr('href');
$.ajax({
url: 'templates/delay.php',
// old code : beforeSend,
beforeSend: function(){
res.container.append(res.loader);
},
// old code : success,
success: function(){
res.container.find(res.loader).remove();
$('.content').load('templates/pages/'+page+'.php');
// old code
// return false;
// });
// we close our ajax.success function
}
})
// old code
// }
// return false is used to prevent browser to run the a href that's why we use it in the a.click function and not inside the ajax block
return false;
})
})
var res = {
loader: $('<div />', {class: 'loader' } ),
container: $('.content')
};
$(document).ready(function(){
res.container.append(res.loader);
$('.content').load( "templates/pages/home.php", function() {
res.container.find(res.loader).remove();
});
$('ul#nav_a li a').click(function(){
var page=$(this).attr('href');
$('.content').load( 'templates/pages/'+page+'.php', function() {
res.container.find(res.loader).remove();
});
});
}
});
Just copy and paste it.
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();
}
$(document).ready(function() {
setInterval($("#to").on("change keyup paste click mouseout", function() {
$.get('ajaxSearch.php', $("#form").serialize(), function(data) {
$('#result').html(data);
});
}, 3000);
});
ajax delay or setTimeout is not working. I want to delay on input field and run ajax after 3 sec but it is not working.
You should use setTimeout to delay the ajax request.
And if one of change keyup paste click mouseout event fired, you just cancel the previous delay and create a new one.
$(document).ready(function() {
var timer_id;
$("#to").on("change keyup paste click mouseout", function() {
if (timer_id) {
clearTimeout(timer_id);
}
timer_id = setTimeout(function() {
$.get('ajaxSearch.php', $("#form").serialize(), function(data) {
$('#result').html(data);
});
}, 3000);
});
});
Your syntax is wrong, also the setInterval() should be in the handler
$(document).ready(function () {
var interval;
$("#to").on("change keyup paste click mouseout", function () {
if (interval) {
return
};
setInterval(function () {
$.get('ajaxSearch.php', $("#form").serialize(), function (data) {
$('#result').html(data);
});
interval = undefined;
}, 3000);
});
});
Also if there is already a interval in progress, we need not have to add another call.
In your case you set deley to event handling ( and whyy you use setInterval but not setTimeout ? )
try
$(document).ready(function() {
$("#to").on("change keyup paste click mouseout", function() {
setTimeout(function(){
$.get('ajaxSearch.php', $("#form").serialize(), function(data) {
$('#result').html(data);
});
}, 3000);
});
});
The code which changes the active class to the currently clicked pagination class. Removing it works but adding the new class doesn't work.
http://jsfiddle.net/spadez/qKyNL/35/
$('a').click(function(event){
event.preventDefault();
var number = $(this).attr('href');
$.ajax({
url: "/ajax_json_echo/",
type: "GET",
dataType: "json",
timeout: 5000,
beforeSend: function () {
$('#content').fadeTo(500, 0.5);
},
success: function (data, textStatus) {
// TO DO: Load in new content
$('html, body').animate({
scrollTop: '0px'
}, 300);
// TO DO: Change URL
$('#pagination li.active').removeClass("active");
$(this).parent().addClass("active");
},
error: function (x, t, m) {
if (t === "timeout") {
alert("Request timeout");
} else {
alert('Request error');
}
},
complete: function () {
$('#content').fadeTo(500, 1);
}
});
});
Can anyone please tell me where I am going wrong?
The problem is that this in the success callback isn't your element.
You may do this :
$('a').click(function(event){
var element = this; // <= save the clicked element in a variable
event.preventDefault();
var number = $(this).attr('href');
$.ajax({
...
success: function (data, textStatus) {
...
$('#pagination li.active').removeClass("active");
$(element).parent().addClass("active"); // <= use it
},
...
});
});
This this in ajax callback isn't what you expect it to be. Add this to your ajax parameters:
context: this,
No need to build custom object saving system and making code more messy, as jQuery already has this functionality.
Edit: In this case it should look like:
$('a').click(function(event){
event.preventDefault();
var number = $(this).attr('href');
$.ajax({
context: this,
url: "/ajax_json_echo/",
...