[FIXED] WordPress Ajax is reloading the page

Issue

So I had this setup working just fine, then all of a sudden it quit working. I had completed this feature and moved on to another and without editing my original code, it quit. I removed the changes I made to the JS and PHP (unrelated, but I removed them anyway), and it hasn't solved my issue.

Here's my 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>

Here's my 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');
  });

});

Here's the PHP handler script:

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();
  }
}

What happens is when I click an anchor with class="ajax-link", (watching in firebug console), The POST shows up in console in red immediately with a time of between 10 - 17ms, and my page refreshes.

If I add alert('clicked') to the end of my JS, the POST shows up normally in black (+550ms), I get a response as expected from ajax, I get the "clicked" alert on the screen and I can see behind the alert that everything has happened on my page just as expected, however as soon as I click "OK" on the alert, my page refreshes again and I lose the ajax response I just got!!

I really don't understand why with an alert to halt the process, everything works, but without the alert I IMMEDIATELY get the page refreshed and the POST line in red. It almost seems like the page is refreshing faster than the ajax can return a response, and that's why it works with the alert. But WHY is my page refreshing!? LOL.

Any ideas are appreciated!

Solution

The reason is that the default action of the click event of the <a> hyperlinks is to load the referenced href URL in the browser. Since you set the href property of your <a> links to nothing "", clicking on them will actually load the same page in the browser so it looks as if the page is refreshing, but it is actually loaded again.

The solution is to stop the default action of the <a> links. Returning false at the end of the event so it does not continue to the default action. Try this:

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

Answered By - Racil Hilan