在 ajax提交后将表单替换为结果
Replace form with Results after ajaxSubmit
我正在尝试用 POST 响应的结果动态替换表单。对于此示例,我正在关闭公告,并希望在成功后将"关闭公告"提交按钮/表单替换为简单的"公告已关闭"。POST 工作正常,我可以按预期返回结果,只是不在特定的div 中。
我认为 $post->ID 将是一个唯一的 ID,所以我可以删除该div,但我不知道如何将其传递给 ajaxSubmit 函数。
<div id="<?php echo $post->ID;?>">
<form action="" method="post" id="openclose">
<input type="hidden" name="id" value="<?php echo $post->ID;?>"/>
<input type="hidden" name="action" value="ocVehicleWanted"/>
<input type="hidden" name="oc" value="close">
<button type="submit" style="padding:1px;background-color:#c41f1f;" >Close Announcement</button>
</form>
</div>
这是我当前的jQuery,唯一不起作用的部分是用于替换$post->IDdiv中的表单数据的.html(data)。此当前代码将替换为页面输出的所有表单div。我每页有 25 个。
jQuery('#openclose').submit(ajaxSubmit);
function ajaxSubmit(){
var vehicledata = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: vehicledata,
success:function(data){
jQuery("#openclose").html(data);
}
});
return false;
}
将 ID
更改为类,因为 ID 在页面中必须是唯一的
您可以通过多种方式替换整个表单,方法是从this
开始并遍历到parent()
或使用replaceWith()
以及其他几种方式
function ajaxSubmit() {
var $form = jQuery(this);// cache form as jQuery object
var vehicledata = $form.serialize();
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: vehicledata,
success: function(data) {
// replace form parent html
$form.parent().html(data);
// or replaace form element
$form.replaceWith(html);
}
});
}
文档中不得有多个具有相同
value
id
属性。
您可以改用class
选择器。
.bind()
将在函数表达式中提供this
上下文,该上下文将在调用函数后使用。
试试这个:
jQuery('.openclose').submit(ajaxSubmit);
function ajaxSubmit() {
var vehicledata = jQuery(this).serialize();
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: vehicledata,
success: function(data) {
jQuery(this).html(data);
}.bind(this)
});
return false;
}
<div id="<?php echo $post->ID;?>">
<form action="" method="post" class="openclose">
<input type="hidden" name="id" value="<?php echo $post->ID;?>" />
<input type="hidden" name="action" value="ocVehicleWanted" />
<input type="hidden" name="oc" value="close">
<button type="submit" style="padding:1px;background-color:#c41f1f;">Close Announcement</button>
</form>
</div>
相关文章:
- 用“$$$”替换文本,在Javascript中给出截断的结果
- 如何在 JavaScript 中将数组中的 [ ] 替换为 var 结果
- 试图通过克隆节点来替换 HTML,但得到奇怪的结果
- 在使用Protractor进行测试时,我可以用json文件替换结果,而不是调用实际的REST端点
- 如何使jQuery插件自动完成像谷歌替换结果
- 如何使用regex在以前的搜索结果中进行搜索和替换
- 正则表达式 - 替换方法从字符串中删除运算符产生不希望的结果
- 将通过 AJAX 上传到 DIV 的变量传递到同一 DIV 中,并将内容替换为结果
- JS中的多个字符替换 - 如何在同一函数中停止对先前结果的替换
- 正则表达式第一个结果($ 1)替换为变量的属性
- 正则表达式替换的意外结果
- 在 ajax提交后将表单替换为结果
- 如何使用AJAX替换json_encode返回结果的内部html
- 如果计算结果小于225,则将值替换为225
- Javascript替换regex剪切结果
- 对ng重复的结果使用replace将下划线替换为空格
- 将选择框选项替换为JSON结果
- javascript中的文本替换没有得到预期的结果
- 替换数组中的字符并将结果返回到相同的数组
- 如何替换getelementbyid的结果以显示文本链接?