Question

I have the following code:

$.ajax({
      type: 'GET',
      url: 'index.php?route=checkout/onepagecheckout/getpaypaldata',
      dataType: 'json',
      success: function(json) {
                              $('#pp_info').html(json['output']);
                              $('#payment').submit();
                              }
      });

The ajax requests receives a json object containing a html form like :

<form id="payment" method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" value="_cart" name="cmd">
<input type="hidden" value="1" name="upload">
<input type="hidden" value="[e-mail]" name="business">
<input type="hidden" value="Sample Item Name" name="item_name_1">
<input type="hidden" value="TESTI-1" name="item_number_1">
<input type="hidden" value="104.98" name="amount_1">
<input type="hidden" value="1" name="quantity_1">
<input type="hidden" value="0" name="weight_1">
<input type="hidden" value="Type" name="on0_1">
<input type="hidden" value="As Shown" name="os0_1">
<input type="hidden" value="Delivery Date" name="on1_1">
<input type="hidden" value="Jun 23,2012" name="os1_1">
<input type="hidden" value="Comments" name="on3_1">
<input type="hidden" value="test message" name="os3_1">
</form>

which contains the information that PayPal requires in order to process the order. Everything works fine except I believe sometimes the form gets submitted before the jQuery .html function is done with loading the html content.

Is there any callback function for .html ? or any other method that I can use to solve the issue ? the PayPal data comes as a HTML form and I can’t change that part, so I only have one option which is somehow load the html content and submit the form !

Answer 1

You may try this

success: function(json) {
    $('#pp_info').html(json['output']).promise().done(function(){
        $('#payment').submit();
    });
}