所以我让这个设置运行得很好,然后突然停止工作。我已完成此功能并转到另一个功能而不编辑我的原始代码,它退出。我删除了我对JS和PHP所做的更改(无关,但我还是删除了它们),它还没有解决我的问题。
这是我的HTML:
<div class="container">
<div class="list_cell_numbers">
<a href="" class="ajax-link" id="1238675309">123-867-5309</a>
<a href="" class="ajax-link" id="9035768321">903-576-8321</a>
</div>
<div class="show_conversation">
<!--Display Database Results Here -->
</div>
</div>
这是我的JS:
jQuery(document).ready( function($) {
$("body").on('click', '.ajax-link', function() {
var data = {
action: 'sms_load_conversation',
cell_number: $(this).attr('id'),
user_store: <?php echo $user_home_store; ?>
};
$.post('http://example.com/wp-admin/admin-ajax.php', data, function(response) {
$('#convo').html(response);
});
alert('clicked');
});
});
这是PHP处理程序脚本:
add_action('wp_ajax_sms_load_conversation', 'sms_load_conversation');
function sms_load_conversation() {
global $wpdb;
if ( isset( $_POST["cell_number"] ) ) {
$number = $_POST["cell_number"];
$store = $_POST["user_store"];
$sql = "SELECT * FROM sms_log WHERE cell_number = $number AND user_store = $store ORDER BY sent_date ASC";
$msgs = $wpdb->get_results($sql);
echo '<span class="message_option"><a class="ajax-phone-link" id="'.$number.'"><i class="fa fa-phone fa-lg fa-fw"></i>Call Customer</a></span>';
echo '<span class="message_option"><a href="#"><i class="fa fa-archive fa-lg fa-fw"></i>Archive</a></span>';
echo '<span class="message_option"><a href="#"><i class="fa fa-ban fa-lg fa-fw"></i>Archive & Blacklist</a></span>';
echo '<div class="messages">';
foreach ($msgs as $msg) {
$thedate = strtotime($msg->sent_date);
if($msg->bypass) echo '<div class="bypass">Filter Bypassed</div>';
if($msg->direction == 'OUT') {
echo '<div class="from-me">';
} elseif ($msg->direction == 'IN') {
echo '<div class="from-them">';
}
echo $msg->message . '<br />';
echo '<span style="font-size: .65em; ">' . date('l M d \a\t h:i:s A', $thedate) . '</span>';
echo '</div>';
}// msgs foreach
echo '</div>';
wp_die();
}
}
当我点击带有class="ajax-link"
的锚点时,(在firebug控制台中观看)会发生什么,POST会立即显示在控制台中,显示时间在10到17毫秒之间,并且我的页面会刷新。
如果我在我的JS末尾添加alert('clicked')
,POST通常以黑色(+ 550ms)显示,我得到了ajax预期的响应,我在屏幕上看到“点击”警报我可以在警报后面看到所有事情都发生在我的页面上,正如预期的那样,但是当我在警报上单击“确定”时,我的页面再次刷新,我失去了我刚刚得到的ajax响应!
我真的不明白为什么有一个停止进程的警报,一切正常,但没有警报我立即刷新页面,POST行为红色。几乎看起来页面刷新的速度比ajax可以返回响应更快,这就是它与警报一起工作的原因。但为什么我的页面令人耳目一新!?大声笑。
感谢任何想法!
答案 0 :(得分:0)
原因是click
超链接的<a>
事件的默认操作是在浏览器中加载引用的href
URL。由于您将href
链接的<a>
属性设置为无""
,因此单击它们实际上会在浏览器中加载相同的页面,使其看起来好像页面是刷新的,但它实际上是再次加载。
解决方案是停止<a>
链接的默认操作。在事件结束时返回false
,因此它不会继续执行默认操作。试试这个:
jQuery(document).ready( function($) {
$("body").on('click', '.ajax-link', function() {
var data = {
action: 'sms_load_conversation',
cell_number: $(this).attr('id'),
user_store: <?php echo $user_home_store; ?>
};
$.post('http://example.com/wp-admin/admin-ajax.php', data, function(response) {
$('#convo').html(response);
});
return false;
});
});