WordPress Ajax正在重新加载页面

时间:2015-10-16 13:21:34

标签: javascript jquery ajax wordpress

所以我让这个设置运行得很好,然后突然停止工作。我已完成此功能并转到另一个功能而不编辑我的原始代码,它退出。我删除了我对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可以返回响应更快,这就是它与警报一起工作的原因。但为什么我的页面令人耳目一新!?大声笑。

感谢任何想法!

1 个答案:

答案 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;
    });
});