我有一个屏幕，用户可以点击“添加发货点”按钮，弹出一个对话框，输入信息，点击“添加”，这会产生一个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>
答案 0 :(得分：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.");
}
});
}
答案 1 :(得分：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");
}
});
感谢大家的帮助。如果有人知道为什么引入行变量固定后跟电话让我知道。
-Jim