Question

So I have a link on my page “Add Shipping Point”. This brings up a dialogue, which has the user enter some information .. when the user then clicks “Save Shipping Point” the dialogue closes and javascript adds a new row on the screen.

Problem is, if the user then clicks the checkbox on the dynamically created row and clicks “Delete Shipping Point” the row is not deleted.

This is occuring because the code that creates the new row does so before the AJAX calls which does the db update returns with the proper id.

So I need to get the code to wait for the id before creating the row. I see similar problems here on Stack, but the syntax of the calls is a bit different so I’m not sure how to get it to apply to my situation.

Here is the code from the dialogue that calls the save and creates the new row.

if (bValid) {
// make Ajax call save the Shipping Point and add to the list
var shipPointId = saveShippingPoint();                  

    // This alert when active does not have the id.
    //alert("Alert3:" + shipPointId);

if (shipPointId == "na") 
    {
        alert("There was a problem adding the Shipping Point.  Please try again.  If the problem persists please contact support.");
} 
    else 
    {
    $j("#shipPoints tr:last").after(
              "<tr>" 
            + "<td>" + city.val().toUpperCase() + ", " + state.val().toUpperCase() + "</td>" 
            + "<td>"
            + "<INPUT type='checkbox' NAME='chk' VALUE='"+ shipPointId + "' />"
            + "<INPUT type='hidden' NAME='shipPointId' VALUE='"+ shipPointId + "' />"
    + "</td>"+ "</tr>");
}
$j(this).dialog("close");
}

And this is the code which makes the AJAX call for the save….I put a while loop in there to force the wait just as a temp change to confirm that this is the issue … with the loop it waits, and the row is created correctly. Without the function immediately returns an unvalued id to the caller and it does not work. So need to know the proper way to get it to wait so I get the behavior I need.

// Ajax call to add the Shipping Point to the Session
function saveShippingPoint() {

    var savedId = "";

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            savedId = xhr.responseText;
        }

    };      
    var url = '<portlet:resourceURL id="saveShippingPoint"/>';
    xhr.open("GET", url + 
       "?city=" + $j( "#city" ).val().toUpperCase() +
       "&state=" + $j( "#state" ).val().toUpperCase() +
       "&stateOther=" + $j( "#stateOther" ).val().toUpperCase() +
       "&zip=" + $j( "#zip" ).val() +
       "&product=" + $j( "#product" ).val().toUpperCase()
       , true);
    xhr.send();

    /* WHile loop just here to test and verify problem */
    while(xhr.readyState != 4) /* null statement */ ;       
    return savedId;
}

Thanks in advance,
-Jim

Ok, based off the first few suggestions I have modified the code so that instead of manipulating the XmlHttpRequest myself I use $.ajax and define the success callback method.

Being new to jquery, I’ve clearly messed up some syntax here, as the Add Shipping Point button is no closing and not adding the row …

Here is the new code:

$j("#dialog-form").dialog(
{
    autoOpen : false,
    height : 500,
    width : 500,
    modal : true,
    buttons :
    {
        "Add Shipping Point" : function()
        {
            var bValid = true;
            var cityValid = true;
            var stateValid = true;
            var zipPresent = true;
            var zipValid = true;
            updateTips("");
            allFields.removeClass("ui-state-error");
            cityValid = checkRequired(city, "City");
            stateValid = checkRequired(state, "State");
            zipPresent = checkRequired(zip, "Zip");
            if(zipPresent) { zipValid = checkRegexp(zip, /(^\d{5}$)|(^\d{5}-\d{4}$)/, "Zip Code"); }
            bValid = cityValid && stateValid && zipPresent && zipValid;
            if (bValid)
            {
                saveShippingPoint();
                $j(this).dialog("close");
            }
        },
        Cancel : function()
        {
           $j(this).dialog("close");
        }
    },
    close : function()
    {
        allFields.val("").removeClass("ui-state-error");
    }
});
$j("#add-shipping-point").click(function()
{
    $j("#dialog-form").dialog("open");
    return false;
});
});
</script>
<script>
// Ajax call to add the Shipping Point to the Session
function saveShippingPoint()
{
$.ajax(
{
// This is a portal URL....which in reality has no spaces, it just didn't paste in very nicely
url: "/web/secure/!ut/p    /b1/jY7LUoMwGIWfpQ_g5CekGJdRKHek3FrYdCLN0DgUKlBUnl7sxpXo2Z2Z71xQgXIMVAVMASjao6Lho6z4INuG19--0A7xo51uEs1x9Sx- AntNrMAgBMBUZiCfAUUJXd81FaDPAGD7DnYjfa0A4P_l4Rcx- Cu_Q8UNWXpwAxYmAqs9C5TP2P3PVOJjHWxPswjoRAWKUYL2QA7xK30bjsb79bOcQiC0n_pqPMKH46bt4DUvnke7bFKzNGNbFuhGNLHVar6ZL5fvOt3164UKOr5KOKTvFxkU4WtbAa0LXl5Ep4YRR3ySqBzUW8e7DtznBj7Ao0UMN4!/" +
"?city=" + $j( "#city" ).val().toUpperCase() +
"&state=" + $j( "#state" ).val().toUpperCase() +
"&stateOther=" + $j( "#stateOther" ).val().toUpperCase() +
"&zip=" + $j( "#zip" ).val() +
"&product=" + $j( "#product" ).val().toUpperCase() ,
type: 'GET',
cache: false,
timeout: 30000,
success: function(data)
{
$j("#shipPoints tr:last").after(
"<tr>"
+ "<td>"
+ city.val().toUpperCase()
+ ", "
+ state.val().toUpperCase()
+ "</td>"
+ "<td>"
+ "<INPUT type='checkbox' NAME='chk' VALUE='"+ data + "' />"
+ "<INPUT type='hidden' NAME='shipPointId' VALUE='"+ data + "' />"
+ "</td>"
+ "</tr>");
}
});
return;
};
</script> 

Answer 1

Change your saveShippingPoint function to use the jQuery Ajax functions (rather than constructing and using the xhr object yourself) then implement a success callback to update your table.