1

我有一个屏幕，用户可以单击“添加运输点”按钮，这会弹出一个对话框，他们在其中输入信息，点击“添加”，这会进行 Ajax 调用，将运输点添加到数据库，然后关闭对话框并那么 ajax 调用的成功回调方法应该在运输点表中附加一个 tr。一切正常，除了 tr 没有被添加。

这是应该将行添加到其中的运输点表的 html。

<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>

这是做这项工作的jquery。

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;
};

这是用于输入信息的对话框的代码。

<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>
4

2 回答 2

1 
 function saveShippingPoint() {
            $j.ajax({
                url: "urlpath",
                data: { 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(JSON.stringify(data));

                    var htmlTr = "<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(htmlTr);

                    //Or 

                    var htmlTr = "<tr><td>" + $j('#city').val().toUpperCase() + ", " + $j('#state').val().toUpperCase() + "</td>"
                               + "<td><input type='checkbox' name='chk' value='" + data + "' /><input type='hidden' name='shipPointId' value='" + data + "' /></td></tr>";

                    alert(htmlTr);

                    $j('#shipPoints').find('tbody tr:last').after(htmlTr);
                    //Or
                    $j('#shipPoints').find('tbody').append(htmlTr);
                },
                error: function () {
                    alert("There was a problem adding the shipping point.");
                }
            });
        }
于 2012-05-12T14:20:07.893 回答
1

好的，我得到它的工作。

改组了一些代码，内联移动功能等。但这没有帮助。正在进行成功调用，我在调用中获取了 id，但没有创建行，也没有关闭对话框。修改了对话框关闭上的选择器并使其正常工作。所以我想这可能是表格添加上的选择器是问题所在。

我将 html 从 tr.after() 调用中提取出来，并将其放入一个变量中，这样我就可以在 after() 调用之前将它放在一个警报中，这样我就可以保证我传递的是有效的 HTML .. . 出于某种原因，这解决了问题。

这是工作版本。

$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");
    }
});

感谢大家的帮助。如果有人知道为什么引入行变量修复了调用后的问题，请告诉我。

-吉姆

于 2012-05-14T17:18:17.000 回答