WordPress Ajax is reloading the page

Question

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!

Use `event.preventDefault();` or `return false;` in event handler — Tushar, Oct 16 '15 at 13:22
By the way.... (i stripped my JS down for debugging) I had the exact code that you see inside the `.click(".ajax-link")` right above it so that the page would start off with the first item in the list already selected. Before I removed it, that first action on page load went perfectly! It would select the first item in my list and load the content exactly as it should. Then when I clicked another option, the troubles explained above started. — drumichael611, Oct 16 '15 at 13:24

Racil Hilan · Accepted Answer · 2015-10-16T13:40:20.847

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

Thank you! Is it bad form to just leave out the `href` completely? Or does that not even work? — drumichael611, Oct 16 '15 at 20:24
In HTML4, it will become an anchor if you don't provide `href`. It will still work, but it will not look like a link (unless you add all the CSS to look like a link). — Racil Hilan, Oct 16 '15 at 20:55

WordPress Ajax is reloading the page

1 Answers1