w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
How to prevent reloading of a page after clicking on a hyperlink but redirect to that page and work out the necessary code written over there?

You can do that with history.js. Here is an example;

HTML:

<a href="/delete/1">Delete</a>
<a href="/update/2">Update</a>


<div id="content"></div>

JS:

var History = window.History;
if (!History.enabled) {
    return false;
}

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState();

    $('#content').load(State.url);
});

$('body').on('click', 'a', function(e) {

    var urlPath = $(this).attr('href');
    var Title = $(this).text();
    History.pushState(null, Title, urlPath);
    return false;
});

You can see code here: jsfiddle code

You can see demo here: jsfiddle demo

Note: Urls in example cannot be found. You need to update it according to your needs. This simply, loads content in href without refreshing your page.





© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.