jquery - $j.ajax() 成功のコールバックメソッドが期待どおりに新しいテーブル行を作成しない

Question

ユーザーが「Add Shipping Point」ボタンをクリックできる画面があり、情報を入力するダイアログが表示され、「Add」を押すと、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>

score 1 · Accepted Answer

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

score 1 · Accepted Answer

わかりました、私はそれを働かせました。

コードの一部をシャッフルしたり、関数をインラインに移動したりしましたが、役に立ちませんでした。成功の呼び出しが行われ、呼び出しで ID が返されましたが、行が作成されず、ダイアログが閉じられませんでした。ダイアログを閉じるときにセレクターを変更し、それが機能するようにしました。だから私はそれが問題だったのはおそらくテーブル追加のセレクターだと思っていました.

tr.after() 呼び出しから html を取り出して変数に入れたので、 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");
    }
});

ご協力いただきありがとうございます。行変数を導入してアフターコールを修正した理由を誰かが知っている場合は、お知らせください。

-ジム

jquery - $j.ajax() 成功のコールバック メソッドが期待どおりに新しいテーブル行を作成しない

2 に答える 2

Related

Reference

jquery - $j.ajax() 成功のコールバックメソッドが期待どおりに新しいテーブル行を作成しない