$ j.ajax（）成功コールバックメソッドが新しいテーブル行を期待通りに作成していない

Question

"Add Shipping Point"ボタンをクリックすると、情報を入力するダイアログが表示され、 "Add"を押すと、これにより、Ajaxコールが作成され、dbに出荷ポイントが追加され、ダイアログが閉じられ、ajaxコールのsuccessコールバックメソッドによって出荷ポイントテーブルに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です。

​​

ここに情報を入力するためのダイアログボックスのコードを示します。

<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]を、私はそれが働いて得ました。

周りのコードの一部をシャッフルし、インラインで機能を移動していましたが、それは助けてくれませんでした。成功の呼び出しが行われていましたが、コールで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"); 
    } 
}); 

ご協力いただきありがとうございます。なぜ誰かが行変数を導入したのを知っていれば、アフターコールは私に知らせてくれます。

-Jim

Answer 2

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