jQuery ajax request breaks drupal behaviours

Question

In the Drupal commerce checkout I want to fill in the billing information automatically. I do that by attaching a javascript to that form and retrieving the information that is stored in the line item. That works great except for only one thing. The first time I click “continue on the next step” nothing happens and the page refreshes. But the second time the button does work and goes to the next pane.

It has the same strange behaviour when I load the page once, go to another page and go back. Then it works from the first time.

My javascript is rather basic and does work, but for some reason it breaks my form.

(function($) {
Drupal.behaviors.mymodule = {
    attach : function(context, settings) {

         var txtFullname = jQuery('input[id^=my_dynamic_id]');

        // do ajax request
        jQuery.ajax({
            type : "POST",
            url : 'http://example.com/retrieve_information',
            data : {
                'order' : settings.order_id
            },
            dataType : "json",
            success : function(data) {
                txtFullname.val(data.fullname);
            }
        });

    }
};
}(jQuery));

One thing I really have a hard time grasping (but then again I'm a Drupal beginner) is how a DOM operation can break the whole thing, especially when the only thing I'm doing is filling a simple textfield.

Is there a way in jQuery to trigger drupal to rebuild a form, because I have the gut feeling that this is the reason why it works the second time.

EDIT: It doesn't seem to have anything to do with jQuery as I have rewritten that part to use the Drupal ajax framework.

From the moment the billing information is filled in - i'm setting the values of the field in hook_form - the submit button doesn't seem to work for the first time.

Answer 1

I presume you need to add that code with in document ready. Some thing like give

// Code that uses jQuery's $ can follow here.

(function($) {
Drupal.behaviors.mymodule = {
    attach : function(context, settings) {
      jQuery(document).ready(function($) {
         var txtFullname = jQuery('input[id^=my_dynamic_id]');

         // do ajax request
         jQuery.ajax({
            type : "POST",
            url : 'http://example.com/retrieve_information',
            data : {
                'order' : settings.order_id
            },
            dataType : "json",
            success : function(data) {
                txtFullname.val(data.fullname);
            }
        });
      });
    }
};
}(jQuery));

Answer 2

I guess you should try to add in your JS a Drupal.attachBehaviors(); on your form or your ajaxified field