Databases
StackOverflow2013
Postsdbo
PO$j.ajax() success callback method not creating new table row as expected
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO$j.ajax() success callback method not creating new table row as expected
    primarykey
    data
    text
    <p>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.</p> <p>Here is the html for the shipping points table that should get the row addded to it.</p> <pre><code>&lt;table id="shipPoints" class="ui-widget-content" width="697"&gt; &lt;thead&gt; &lt;tr class="ui-widget-content" width="696"&gt; &lt;th class="ui-widget-header" width="395"&gt; Shipping Points &lt;/th&gt; &lt;th class="ui-widget-header" width="300"&gt; Remove &lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;c:forEach items="${shippingPoints}" var="shippingPoint"&gt; &lt;tr width="695"&gt; &lt;td with="395"&gt; ${shippingPoint.shippingPointsCity}, ${shippingPoint.shippingPointsState} &lt;/td&gt; &lt;td width="300"&gt; &lt;INPUT type="checkbox" NAME="chk" value="${shippingPoint.shippingPointsId}" /&gt; &lt;INPUT type="hidden" NAME="shipPointId" VALUE="${shippingPoint.shippingPointsId}" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/c:forEach&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>And here is the jquery that is doing the work.</p> <pre><code>function saveShippingPoint() { //alert("Before ajax call."); $j.ajax( { url: "&lt;portlet:resourceURL id='saveShippingPoint'/&gt;" + "?city=" + $j( "#city" ).val().toUpperCase() + "&amp;state=" + $j( "#state" ).val().toUpperCase() + "&amp;stateOther=" + $j( "#stateOther" ).val().toUpperCase() + "&amp;zip=" + $j( "#zip" ).val() + "&amp;product=" + $j( "#product" ).val().toUpperCase() , type: 'GET', cache: false, timeout: 30000, success: function(data) { //alert("In success callback."); $j("#shipPoints tr:last").after( "&lt;tr&gt;" + "&lt;td&gt;" + city.val().toUpperCase() + ", " + state.val().toUpperCase() + "&lt;/td&gt;" + "&lt;td&gt;" + "&lt;INPUT type='checkbox' NAME='chk' VALUE='"+ data + "' /&gt;" + "&lt;INPUT type='hidden' NAME='shipPointId' VALUE='"+ data + "' /&gt;" + "&lt;/td&gt;" + "&lt;/tr&gt;"); }, error: function() { alert("There was a problem adding the shipping point."); } }); //alert("Done with ajax call, about to return."); return; }; </code></pre> <p>Here is the code for the dialog that is used to enter the information.</p> <pre><code>&lt;div id="dialog-form" title="Shipping Points"&gt; &lt;p class="validateTips"&gt; 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. &lt;/p&gt; &lt;fieldset&gt; &lt;label font-family="Courier New" align="left" for="city"&gt;City&lt;/label&gt; &lt;input maxlength=50 align="right" type="text" name="city" id="city" class="text ui-corner-all" /&gt; &lt;br /&gt; &lt;label font-family="Courier New" align="left" for="state"&gt;State&lt;/label&gt; &lt;select maxlength=6 align="right" name="state" id="state" class="text ui-corner-all"&gt; &lt;option value=""&gt;Select State...&lt;/option&gt; &lt;c:forEach items="${states}" var="state"&gt; &lt;option value="${state.fieldValue}"&gt; ${state.fieldDescription} &lt;/option&gt; &lt;/c:forEach&gt; &lt;/select&gt; &lt;br /&gt; &lt;label font-family="Courier New" align="left" for="stateOther"&gt;State (Other):&lt;/label&gt; &lt;input maxlength=6 align="right" type="text" name="stateOther" id="stateOther" value="" class="text ui-corner-all" /&gt; &lt;br /&gt; &lt;label font-family="Courier New" align="left" for="zip"&gt;Zip&lt;/label&gt; &lt;input align="right" maxlength=10 align="right" type="text" name="zip" id="zip" value="" class="text ui-corner-all" /&gt; &lt;br /&gt; &lt;label font-family="Courier New" align="left" align="left" for="product"&gt;Product&lt;/label&gt; &lt;input align="right" maxlength=50 type="text" name="product" id="product" value="" class="text ui-corner-all" /&gt; &lt;br /&gt; &lt;/fieldset&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJames Gawron
    1. USJames Gawron
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PO$j.ajax() success callback method not creating new table row as expected
      1. This table or related slice is empty.
      1. VTUpMod
    1. COwhat version of jquery are you using
      singulars
      1. PO$j.ajax() success callback method not creating new table row as expected
      1. USJason
    2. COjquery-ui-1.8.16
      singulars
      1. PO$j.ajax() success callback method not creating new table row as expected
      1. USJames Gawron
    3. COwhile we're here to help you fix certain distinct problems you may be having, we're not here to write your code and build your project for you. also, jQuery UI is not a version of jQuery.
      singulars
      1. PO$j.ajax() success callback method not creating new table row as expected
      1. USJason
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload