Problem with chronological order : jQuery code runs too late

[Julien]

Hi,

I'm trying to set the values of hidden HTML inputs storing product
options for Paypal checkout.
These values are retrieved by a "POST " ajax request. The values are
correctly retrieved but don't seem to update the form.

The jQuery code seems to run concurrently with the other Javascript
tasks all around and not respecting the chronological order.

For instance, the retrieved option values are displayed last, and not
just after the call to SetOptionStringsInPaypalForm() like they
should.

This occurs despite my tentative to isolate the jQuery code in a
distinct function.

Any idea how to force the chronological order ?

Thanks.

Julien


// Retrieve product option values from session variables.

function SetOptionStringsInPaypalForm() {

var f = document.forms.paypal;

$(':input[class]', f).each( // for each input element in the
hidden PayPal form
// which has its "class" attribute
set.
// (In this case, the on0_ / os0_, and
on1_ / os1_ elements.)
// We only seach inside the form used
for the checkout !

function () {
var field = this;
var fieldName = this.name;
var fieldPrefix = fieldName.substr(0,3);

// only keep option strings fields
if ((fieldPrefix == 'os0') ||(fieldPrefix == 'os1') ) {

// Make an Ajax "POST" request to get the option string
value stored in the session variable.
$.post(cart_doc,
{
action: 'retrieve_opt',
name: fieldName
},
function (chosenOption) {

// Some feedback about what happens.

// THE FOURTH SET OF MESSAGES TO BE DISPLAYED
alert('Field');
alert(field.name);
alert('Chosen option:')
alert(chosenOption);

// The value returned by chosenOption is OK.

field.value=chosenOption; // Setting chosen option !

// Setting the value, does not seem to work.
}
);

}

} // end of function

); // end of "each()" sandwich

// THE SECOND MESSAGES TO BE DISPLAYED
alert('Now the form content is :');
alert(f.innerHTML);
}

function SetOptionsRightNow() {

alert('BEFORE'); // THE FIRST MESSAGE TO BE DISPLAYED

SetOptionStringsInPaypalForm();

// THE THIRD TO BE DISPLAYED
alert('AFTER');
}

[Leonardo K]

Ajax is asynchronous. The alert in the ajax post will only be executed when
the ajax request is completed. This can happen after the other part of your
code run.

You can use the async option and set to false;

http://api.jquery.com/jQuery.ajax/

Post by Julien
Hi,
I'm trying to set the values of hidden HTML inputs storing product
options for Paypal checkout.
These values are retrieved by a "POST " ajax request. The values are
correctly retrieved but don't seem to update the form.
The jQuery code seems to run concurrently with the other Javascript
tasks all around and not respecting the chronological order.
For instance, the retrieved option values are displayed last, and not
just after the call to SetOptionStringsInPaypalForm() like they
should.
This occurs despite my tentative to isolate the jQuery code in a
distinct function.
Any idea how to force the chronological order ?
Thanks.
Julien
// Retrieve product option values from session variables.
function SetOptionStringsInPaypalForm() {
var f = document.forms.paypal;
$(':input[class]', f).each( // for each input element in the
hidden PayPal form
// which has its "class" attribute
set.
// (In this case, the on0_ / os0_, and
on1_ / os1_ elements.)
// We only seach inside the form used
for the checkout !
function () {
var field = this;
var fieldName = this.name;
var fieldPrefix = fieldName.substr(0,3);
// only keep option strings fields
if ((fieldPrefix == 'os0') ||(fieldPrefix == 'os1') ) {
// Make an Ajax "POST" request to get the option string
value stored in the session variable.
$.post(cart_doc,
{
action: 'retrieve_opt',
name: fieldName
},
function (chosenOption) {
// Some feedback about what happens.
// THE FOURTH SET OF MESSAGES TO BE DISPLAYED
alert('Field');
alert(field.name);
alert('Chosen option:')
alert(chosenOption);
// The value returned by chosenOption is OK.
field.value=chosenOption; // Setting chosen option !
// Setting the value, does not seem to work.
}
);
}
} // end of function
); // end of "each()" sandwich
// THE SECOND MESSAGES TO BE DISPLAYED
alert('Now the form content is :');
alert(f.innerHTML);
}
function SetOptionsRightNow() {
alert('BEFORE'); // THE FIRST MESSAGE TO BE DISPLAYED
SetOptionStringsInPaypalForm();
// THE THIRD TO BE DISPLAYED
alert('AFTER');
}

[Julien]

Thanks, Leonardo.

This seems being the right answer. However, I fail at replacing the
$.post() request by the more general $.ajax().

Can you see any error in the manner I'm doing the ajax request ?
(The corresponding $.post() code in my first message works fine.)

$.ajax( async: false,
type: "POST",
url: cart_doc,
data: {action: 'retrieve_opt', name: fieldName},
success:
function (chosenOption) {

// Some feedback about what happens.
alert('Field');
alert(field.name);
alert('Chosen option:');
alert(chosenOption);

field.value=chosenOption; // Setting chosen option !
},
dataType: "text"
);

[Julien]

Solved. I dont' know exactly what was wrong, although it was most
probably in the callback function.
Maybe the carriage returns.

But this works fine:

$.ajax({
async: false,
url: cart_doc,
type: 'POST',
data: {action: 'retrieve_opt', name: fieldName},
dataType: 'text',
timeout: 1000,
error: function(){
alert('Error retrieving product option value');
},
success: function(chosenOption) {
field.value=chosenOption;
alert(field.value);
}
});

Bye.

[Julien]

Solved. I dont' know exactly what was wrong (...)

Oh, I found : the parameters to $.ajax() have to been included into
json-like brackets !

$.ajax( { parameters } );

[Smith, Allex]