Question

I have a select menu that has multiple select enabled. I have a click event handler set for the submit button, so that jQuery loops through each drop down value selected and makes an ajax call. It works fine, except for the very last value; the last value in the list never seems to make it to the ajax call, and if only one item is selected, then there doesn’t seem to any action. Any help would be greatly appreciated.

Here is my code:

$("#add_members").click(function () {
    var members = $("#project_members").val();

    jQuery.each(members, function () {
        var projectid = <? php echo $project_id; ?> ;
        var member = this[0];

        $.post([url], {
            project_id: projectid,
            user_id: member
        }, function (data) {
            alert(data);
        });
    });

    location.reload();
});

Answer 1

I agree with the others that you most likely have a race condition going on. Your location.reload gets called directly after you last post and is most likely cancelling your ajax.

Try setting your ajax to not be asynchronous by using $.ajaxSetup

    jQuery.ajaxSetup({async: false});   //set to false for this method

    $.post([url], {
        project_id: projectid,
            user_id: member
        }, function (data) {
            alert(data);
    });

    jQuery.ajaxSetup({async: true});   //Change it back when done if you so desire

This should end your race condition.