我目前正在开发一个呈现自己页面的插件,因此管理员的表单提交发生在管理面板之外。我想在表单提交上创建即时更新,就像你在Wordpress管理面板中看到的那样。
我已阅读了一百万个教程,我似乎无法理解,我希望有人可以花时间向我解释,使用这个例子:
我想要一个表单来添加联系人。 表格要求“联系人姓名”,“联系人类型”,“联系人号码”和“职务ID”的隐藏字段。我想加载此作业的数据库中已有的所有联系人,我希望在您添加新联系人时刷新它。
先谢谢了,我真的需要一些帮助!
JS:
jQuery(document).on("click", "#submitcontact", function(e){
e.preventDefault();
jQuery.ajax({
url: MyAjax.ajaxurl,
type: "POST",
data: {
action: "tm_add_contact",
contactname: jQuery("#contactname").val(),
contacttype: jQuery("#contacttype").val(),
contact: jQuery("#contact").val(),
jobnumber: jQuery("#jobnumber").val()
},
success: function(data){
alert("success " + data);
},
error: function(e){
alert("error " + e);
}
});
});
表格:
<button type="button" class="btn btn-success pull-right" data-toggle="popover" title="Add Contact" data-placement="left" data-html='true' data-content='
<form>
<div class="form-group">
<label for="contactname">Name</label>
<input type="text" class="form-control" id="contactname" name="contactname" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="contacttype">Type</label>
<select class="form-control" id="contacttype" name="contacttype">
<option>Landline</option>
<option>Mobile</option>
<option>Buisness</option>
<option>Email</option>
<option>Fax</option>
</select>
</div>
<div class="form-group">
<label for="contact">Contact</label>
<input type="text" class="form-control" id="contact" name=contact placeholder="">
<input type="hidden" id="jobnumber" name="jobnumber" value="<?php echo $job->JobNumber ?>">
</div>
<button type="button" id="submitcontact" name="submitcontact" class="btn btn-default"><i class="fa fa-plus" aria-hidden="true"></i> Add Contact</button>
</form>
'><i class="fa fa-plus" aria-hidden="true"></i> Add Contact</button>
功能:
function tm_add_contact(){
$contactname = $_POST['contactname'];
$contacttype = $_POST['contacttype'];
$contact = $_POST['contact'];
$jobnumber = $_POST['jobnumber'];
$date = current_time( 'mysql' );
global $wpdb;
$table_name = $wpdb->prefix . 'trademanager_job_contacts';
$wpdb->insert(
$table_name,
array(
'JobNumber' => $jobnumber,
'ContactName' => $contactname,
'Type' => $contacttype,
'Contact' => $contact,
'DateAdded' => $date
),
array(
'%s'
)
);
echo "HELLO WORLD!!!";
die();
return true;
}
//
add_action('tm_ajax', 'tm_add_contact'); // Call when user logged in
add_action('tm_ajax', 'tm_add_contact'); // Call when user in not logged in
更新:
我使用了上面的错误操作和错误的名称。表单现在有效,但是我仍然不明白如何在不刷新页面的情况下显示提交结果...
答案 0 :(得分:0)
尝试使用ajaxForm jquery插件。 http://malsup.com/jquery/form/#ajaxForm
之后使用回调:
function showResponse(response){
jQuery('.datalist > tbody').prepend(response);
}
注意:使用表格相应地格式化后端的响应。您甚至可以在成功提交后清除表单。
或者没有ajaxForm插件:
jQuery('form').on('submit', function(event){
event.preventDefault();
var data = $(this).serialize();
var form = $(this);
// than use $.ajax
$.post(url,data,function(response){
jQuery('.your_table > tbody').append(response);
//using previously defined form variable, because this is now post object
form[0].reset();
});
// or use: return false
});
对于数据库结果,请使用
$db_contacts = $wpdb->get_results('SELECT * FROM your_table ORDER BY id');
然后:
foreach($db_contacts as $contact){
echo $contact->contactname;
}