3
sunny44
6y

Hii,
I want to use HTML5 History API.
I'm using ajax to fetch whole page (Yes Whole page)
Then I'm searching a particular TAG and replace whole html code in container.
I'm feeling that I'm doing it so wrong.
Can anybody tell me best use of HTML5 History API.
This update data in page without reloading page, but I think this does not make any sense.
This is an Example of my Code, You'll get Idea:
$('body').on('click','a.ajax-nav-link',function(e) {
e.preventDefault();
//call ajax method, show data and update url via html5 history api :)
if (isHistorySupport) {
//fetch url associated with a tag
let url = $(this).attr("href");
let title = $(this).attr("data-title");
fetchPage(url);
$(".ajax-nav-link").removeClass("active");
$(this).addClass("active");
return false;
}else {
alert("Not Available");
}
});

Comments
  • 1
    function fetchPage(url) {
    $.post(url, "",
    function(data, status) {
    let html = $(data).find('#ui-view')[0];
    //console.log(html)
    let breadcrumb = $(data).find('.breadcrumb')[0];
    $('.breadcrumb').replaceWith(breadcrumb); //replace breadcrumb
    $('#content').html(html);
    });
    }
  • 1
  • 5
    Sounds to me like you are trying to implement some sort of turbolinks.

    https://github.com/turbolinks/...
  • 1
    @bioDan I think, I'm doing the same thing but is there better way to do this?
  • 2
    @sunny44 use turbolinks and dont reinvent the wheel.

    Just make sure you read the documentation before you pull the repo. 🐒
Add Comment