Question

I have a screen where user can click on “Add Shipping Point” button, which brings up a dialog where they enter info, hit “Add”, this makes an Ajax call which adds the shipping point to the db, then closes the dialog and then the success callback method of the ajax call should append a tr to the shipping point table. Everything is working except the tr is not being added.

Here is the html for the shipping points table that should get the row addded to it.

<table id="shipPoints" class="ui-widget-content" width="697">
<thead>
    <tr class="ui-widget-content"  width="696">
        <th class="ui-widget-header" width="395">
        Shipping Points
    </th>
    <th class="ui-widget-header" width="300">
        Remove
    </th>
    </tr>
</thead>

<tbody>
    <c:forEach items="${shippingPoints}" var="shippingPoint">
    <tr width="695">
        <td with="395">
            ${shippingPoint.shippingPointsCity},
            ${shippingPoint.shippingPointsState}
        </td>
        <td width="300">
        <INPUT type="checkbox" NAME="chk" value="${shippingPoint.shippingPointsId}" />
        <INPUT type="hidden" NAME="shipPointId" VALUE="${shippingPoint.shippingPointsId}" />
        </td>                           
    </tr>
</c:forEach>
</tbody>
</table>

And here is the jquery that is doing the work.

function saveShippingPoint() 
{
//alert("Before ajax call.");
$j.ajax(
{
    url: "<portlet:resourceURL id='saveShippingPoint'/>" + 
       "?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)
    {
        //alert("In success callback."); 
    $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>");
    },
    error: function()
    {
        alert("There was a problem adding the shipping point.");
    }
});
//alert("Done with ajax call, about to return.");
return;
};

Here is the code for the dialog that is used to enter the information.

<div id="dialog-form" title="Shipping Points">
<p class="validateTips">
    Please include all vendor ship points by product group. If vendor
    ships all products from one location input City, State, Zip Code
then select "All" for product group.
</p>
<fieldset>
<label font-family="Courier New" align="left" for="city">City</label>
    <input maxlength=50 align="right" type="text" name="city" id="city"
        class="text ui-corner-all" />
    <br />
    <label font-family="Courier New" align="left" for="state">State</label>
    <select maxlength=6 align="right" name="state" id="state"
        class="text ui-corner-all">
        <option value="">Select State...</option>
        <c:forEach items="${states}" var="state">
            <option value="${state.fieldValue}">
                ${state.fieldDescription}
            </option>
        </c:forEach>
    </select>
    <br />
    <label font-family="Courier New" align="left" for="stateOther">State (Other):</label>
    <input maxlength=6 align="right" type="text" name="stateOther" id="stateOther" value=""
        class="text ui-corner-all" />
    <br />
    <label font-family="Courier New" align="left" for="zip">Zip</label>
    <input align="right" maxlength=10 align="right" type="text" name="zip" id="zip" value=""
        class="text ui-corner-all" />
    <br />
    <label font-family="Courier New" align="left" align="left" for="product">Product</label>
    <input align="right" maxlength=50 type="text" name="product" id="product" value=""
        class="text ui-corner-all" />
    <br />
    </fieldset>
</div>

Answer 1

Ok, I got it working.

Shuffled some of the code around, moving function in-line etc. But it wasnt helping. The success call was being made, I was getting the id back in the call, but no row creation, and wasnt closing the dialog. Modified the selector on the dialog close and got that working. So I was thinking it was probably the selector on the table addition that was the problem.

I pulled the html out of the tr.after() call and put it in a variable so I could put it out in an alert just prior to the after() call so that I could guarantee that I was passing in valid HTML … For some reason this fixed the problem.

Here is the working version.

$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) 
            {
                //alert("Before save shipping point.");
                function saveShippingPoint() 
                {
                    //alert("Before ajax call.");
                    $j.ajax(
                    {
                        url: "<portlet:resourceURL id='saveShippingPoint'/>" + 
                        "?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)
                        {                                      
                            var row = "<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>";

                            //alert("In success callback. About to add row " + row); 

                            //$j("#shipPoints').find('tbody tr:last").after( 
                            $j("#shipPoints tr:last").after(row);
                            //alert("After ajax call. About to call close");
                            $j("#dialog-form").dialog("close");
                        },
                        error: function()
                        {
                            alert("There was a problem adding the shipping point.");
                        }
                    });
                };
                saveShippingPoint();
            }
        },
        Cancel : function() 
        {
            $j(this).dialog("close");
        }
    },
    close : function() 
    {
        allFields.val("").removeClass("ui-state-error");
    }
});

Thanks to all for your help. If anyone knows why introducing the row variable fixed the after call let me know.

-Jim