We Keep Coding

Ajax is not aborting when button was clicked

How can I abort an ajax request when a button was clicked? I tried some answers I found here but it didn't work on me.
<button type="button" id="toStop">Stop</button>
When the stop button was clicked ajax isn't aborting.
function() {
var myajaxreq = $.ajax({
url: myurlhere,
type: 'GET',
async: true,
success: function(result) {
}
beforeSend: function () {
if(document.getElementById('toStop').clicked == true) {
myajaxreq.abort();
}
}
});
}

You need a separate click listener that will abort ajax request. Using beforeSend will not always work.
$('#toStop').click(function(e) {
e.preventDefault();
// abort here
// make sure myajaxreq is accessible in this function
if (myajaxreq) myajaxreq.abort();
});

Success message fades out after first form submit but not after subsequent submits

The first time a submit form the success message displays and then fades correctly. If I submit form again then it doesn't work. I want it to repeat the display of message and subsequent fade out after each form submit.
I found this answer
Trying to have a JQuery flash message after an ajax from submit in show again after more than one form submit (in rails)
but couldn't get to work, I'm very new to all this so be gentle ;-)
$(document).ready(function() {
$("#editMember").submit(function(e) {
e.preventDefault();
$.ajax( {
url: "php/adminUpdateMember.php",
method: "post",
data: $("form").serialize(),
dataType: "text",
success: function(strMessage) {
$("#message").text(strMessage);
}
});
});
setTimeout(function() {
$('#message').fadeOut('fast');
}, 4000);
});

Your setTimeout() call is not inside your submit() block. It will trigger the fadeOut 4 seonds after page load, and not be called again.
You might also need to call $('#message').show(), to make the element visible after it's been faded out.

$(document).ready(function() {
$("#editMember").submit(function(e) {
e.preventDefault();
$.ajax( {
url: "php/adminUpdateMember.php",
method: "post",
data: $("form").serialize(),
dataType: "text",
success: function(strMessage) {
$("#message").text(strMessage);
$('#message').fadeIn('fast');
}
});
setTimeout(function() {
$('#message').fadeOut('fast');
}, 4000);
});
});

JQuery prevent links working whilst ajax is loading

I have a firework detonation system which uses JQuery to connect to a PHP script via AJAX to detonate the fireworks. The only problem is that if you click one launch button straight after another, there is a possibility of setting off more fireworks than you want.
I need a way to disable all other links on the page until the ajax has finished and received a response. I have tried:
//Prevent clicks
$("body").find("a").click(function (e) { e.preventDefault(); });
//Re-enable clickable links
$("body").find("a").unbind("click");
My current ajax script is:
$(document).ready(function() {
$(".button").on("click",function() {
//Disable all other links
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(e) {
//Re-enable other links once ajax is complete
}
});
return false;
});
});
What would be even better is, if the buttons were to grey out whilst waiting for the response. I have a demo script at http://joshblease.co.uk/firework/

One way using a variable disabled
$(document).ready(function() {
var disabled = false;
$('a').css('opacity','0.4');
$(".button").on("click",function() {
//Disable all other links
disabled = true;
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(e) {
//Re-enable other links once ajax is complete
disabled = false;
$('a').css('opacity','1');
}
});
return false;
});
});
$('a').click(function(event){
if(disabled)
event.preventDefault();
});
Update
Changed link opacity for a disabled effect.

I would use actual buttons, not links, and disable them when one is clicked. Use a class on the button distinguish it from other buttons that might be on the page.
<input type="button" class="launch" ... >
...
$(document).ready(function() {
$("input[type=button].launch").on("click",function(event) {
// We will handle the button, prevent the standard button press action.
event.preventDefault();
//Disable all other links
$('input[type=button].launch').disable();
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(e) {
//Re-enable other links once ajax is complete
$('input[type=button].launch').enable();
}
});
return false;
});
});
Further manage it with a flag as #MonkeyZeus suggests.

I'd manage this with a class (assuming there might be some links you want to work). All the links that you want to not work give them the class blockable.
You can also then style your a.disabled class in your css to grey out the links (or whatever you want)
$(document).ready(function() {
$(a.blockable).click(function(e) {
if($(this).hasClass('disabled'))
{
e.preventDefault();
}
}
$(".button").on("click",function() {
$('a.blockable').addClass('disabled');
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(e) {
$('a').removeClass('disabled');
}
});
return false;
});
});

I would approach this by declaring a variable and only allowing AJAX to fire if variable has not been tripped:
$(document).ready(function() {
var launch_processing = false;
$(".button").on("click",function() {
if(launch_processing === false){
launch_processing = true;
$.ajax({
type: "POST",
url: "launch.php",
data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
success: function(data) {
},
complete: function(){
launch_processing = false;
}
});
}
else{
alert('Are you mad?!?! Fireworks are in progress!');
}
});
});

jQuery Allow only one click before .ajax()

I am trying to allow a button to be clicked only once and then some data be submitted via ajax. The problem I am facing is that a user can click 50x and the data is POST submitted each time ?
jQuery("#id").unbind('click');
jQuery.ajax({
type: "POST",
url: ajax_url,
data: ajax_data,
cache: false,
success: function (html) {
location.reload(true);
}
});
How can I ensure that if a user clicks #ID 100x - that the data is only submitted once ? And then #ID is re-enabled ?

You could use the .one() function in jQuery.
jQuery("#id").one('click', function()
{
jQuery.ajax({
type: "POST",
url: ajax_url,
data: ajax_data,
cache: false,
success: function (html) {
location.reload(true);
}
});
});
Bear in mind this will completely remove the click event, even if you have an error with your ajax, you still won't able to click it again.

just disable the button
$("#id").attr("disabled", "disabled")
and then in the success function enable it
$("#id").removeAttr("disabled")

Easiest way would be to use a flag which gets reset when the success is fired:
if(clicked == False){
clicked = True;
jQuery("#id").unbind('click');
jQuery.ajax({
type: "POST",
url: ajax_url,
data: ajax_data,
cache: false,
success: function (html) {
location.reload(true);
clicked = False;
},
error: function () {
alert("Error happened");
clicked = False;
}
});
}

You can disable to control, or use one of the many modal libraries to show the spinning wheel
see this Jquery modal dialog question on SO

You could disable the button on click event and enable it back when ajax request is completed.

In your click event you could disable the button and then re-enable the button in the success function of the ajax event.
Another option would be to set a parameter on the element that is being clicked to indicate the button was clicked and then check to see if it is set if it is don't send the ajax request if not then do send it. Once the ajax is done you can unset the parameter again to allow it to be run.

try this:
$(document).ajaxStart({ function() {
$('#submit_button').click(function(){
return false;
});
});
where: #submit_button is id of the element U want to disable
that code will disable clicking on the submit button

jQuery.ajax not working in IE7/8

Something in my script is breaking IE.
I'm looking on a collection of links with a class, and hijacking the URL's.
Clicking a link will animate the height and reveal a message. It also
does an ajax request to mark the message as read.
However, in IE it simply goes to the URL instead of staying on the page and processing the http request.
$('.message .subject .subject_link').click(function(e) {
toggle_message(e)
return false;
});
function toggle_message(m) {
var link = m.target;
var parent = $(link).parent().parent();
console.log(link.href);
$.ajaxSetup({
url: link.href,
dataType: 'json',
timeout: 63000,
type: 'GET',
cache: false
});
if($(parent).hasClass('unread')) {
$(parent).addClass('read').removeClass('unread');
$.ajax({
complete: function(r, textStatus) {
console.log(r.responseText)
}
});
}
if($(parent).find('.body_wrapper').hasClass('collapsed')) {
$(parent).find('.body_wrapper').addClass('expanded').removeClass('collapsed');
$(parent).find('.body_wrapper').animate({
height: 'toggle'
})
} else {
$(parent).find('.body_wrapper').addClass('collapsed').removeClass('expanded');
$(parent).find('.body_wrapper').animate({
height: 'toggle'
})
}
}
any ideas what's causing this issue?
http://support.cooper.krd-design.net/
tester: 12345 if you want to review the page
Thanks
Rich

Adding
e.preventDefault();
before toggle_message in the first function should work, although return false should as well.

I don't have access to IE right now but I think you could try preventing the default click event to fire in your click()-function like so:
$('.message .subject .subject_link').click(function(e) {
toggle_message(e)
e.preventDefault();
});
More on .preventDefault() here: http://api.jquery.com/event.preventDefault/