jQuery callback return true/false for onclick

Question

I have implemented some basic ajax for loading pages via an onclick of the <a> tag.

The problem is that my JS is not returning to the onclick its bool val, here is my JS/jQuery and my HTML, I am sure it is a small oversight on my behalf but its driving me nuts.

JS:

function loadPage (caller) {
  var href = $(caller).attr('href');
  var url = 'http://localhost/api';

  $.ajax({
    type: 'POST',
    url: url + href,
    dataType: 'json',
    data: {},
    success: function (data) {
      $('li.active').removeClass('active');
      $(caller).parent().addClass('active');
      $('div#content').html(data);
      history.pushState({foo: "bar"} , '', href);
      return false;
    },
    error: function () {
      return true;
    }
  });
}

HTML:

<li><a class="header-text" href="/" onclick="return loadPage(this);"></a></li>

In case anyone is wondering I am doing this so that the button will ajax the content, and if the js fails for some reason it will instead load the page fully.

Not possible. Instead, always cancel it and manually redirect on error. — Kevin B, Sep 28 '17 at 05:35
You should add `href='#', and use asynchronous api calls and show your data. — BeingExpert, Sep 28 '17 at 05:40

score 0 · Answer 1 · answered Sep 28 '17 at 05:54

0

In order to ensure complete loading. You can use the following code

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

https://learn.jquery.com/using-jquery-core/document-ready/

answered Sep 28 '17 at 05:54

mohsen motamedi

84
4

jQuery callback return true/false for onclick

1 Answers1