Modifying on the fly the data sent with jquery via ajax

Question

Hi,
I am using the jQuery.ajax() with some specific data. One of them is an albumid which is generated on the server side if the user choose not to use one of his albums. The problem is that if a user add several photos to a new album then, instead of adding all photos to the same album, it creates several albums with one photo in each.

What is currently working:

• update an album (using one the user already has)
• create a new album
• send back the new album id

I tried to update the album name field according to the new album id sent back on the success event, thinking that in the next ajax call, the attribute data: ({ 'albumid': album.val() )} would then be the new album id, but it keeps using the former value.

I know that this issue can be solved by using async: false, because in this case each ajax call will use the updated value in the album name field, but it totally freezes the browser.

Do you have any trick/suggestion for this issue?

Cheers,
Nicolas.

Answer 1

Sounds like you have a race condition. Without seeing the code it's hard to tell for sure but album.val() is probably set once when the code is parsed and not evaluated during the success handler.

You can still use aync calls but you have to do them in serial. It's called an Active Object pattern. Setup an array that holds the ajax calls and call one. Each one has, in the success handler, a call to trigger the next one.

Answer 2

You should use the new value as album.val() seems not the be reevaluated with the new value.

It should be quite easy with jquery to retrieve the new Album value from $("#hiddenId").val()

Considering that the retrieved id is stored in a created hidden field from the ajax request.