1

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.

-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));
  • I was always under the impression you shouldn't use $(document).ready() but use attachBehaviors ? – Glenn De Backer Jan 21 '13 at 8:58
  • Actually, attach behaviors already contains a document.ready... – Gregory Kapustin Jan 21 '13 at 11:42
  • Behaviors are, in fact, called on document ready. But some of the site's elements might not be there yet, as they are added by other behaviors. Using document.ready inside document.ready can sometimes confuse browsers... Shouldn't but I've seen it. – Mołot Aug 30 '13 at 7:09
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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