1

hi there I wanted to use Ajax in a drop down list using Drupal form API. the problem is that i want to prevent the user submit the form before the Ajax response from server comes back. how it is possible to disable the submit button or to prevent any other user actions when the select list state is being changed and the server is responding to the request. beside I'm using drupal 7 with a simple form which ajax has been attached to the combo box select list

1
  • You mean that you have select which work as AJAX selector and you want to disable possibility to submit your form while AJAX is loading? Dec 22, 2011 at 12:11

5 Answers 5

5

Ajax in Drupal has a public method called .ajaxStart

You can do a

jQuery('#form_id').ajaxStart(function(){  //Here you prevent shit } );

And also has a method named .ajaxSuccess for the finish action

2
  • It works for me, but once the form is submitted and reloaded, desired behavior is lost. Any solution? Thanks anyway!
    – Roger
    Dec 10, 2012 at 12:28
  • I was wrong, the desired behavior fails only if the form doesn't get validated. If all form fields get validated, the desired behavior remains intact once the form is reloaded.
    – Roger
    Dec 10, 2012 at 12:41
0

jQuery allows you to run code after an AJAX call has finished. You could disable your elements when the combo box is changed and then enable everything on success. Here's an example I pulled from the jQuery.ajax() Docs.

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});
0

Its just a trick that you should use to prevent submitting during ajax loading. During ajax loading just disabled the submit button and enable it on success. Like that: Suppose submit button's id is: submit_button, then

$("#submit_button").attr("disabled", "disabled");

$.ajax({
  url: 'html-data/demo.html',
  success: function(data) {
    $('#resultDiv').html(data);
    $('#submit_button').removeAttr("disabled");
  }
});

above code is in jquery and it will work in Drupal. Check it.

0

Set a global flag

var flag = true;

Then in your AJAX before your post set the flag to false

flag = false;

As part of your success function

flag = true;

And then on your submit buttons

onclick="return(if(flag));"
0

here is my take on it

$(document).ajaxComplete(function(){
            // the code to be fired after the AJAX is completed
            $('#edit-submit').removeAttr("disabled");
        });

$(document).ajaxStart(function(){
    event.preventDefault();
    $("#edit-submit").attr("disabled", "disabled");
    } );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.