I have a heavily ajax based application wherein i only have a login page and the main page.

Most of my links are "ajaxed" and i have them done like this:

//get the href of the link that has been clicked, ajaxify ANY links

$(document).on('click', '.tree a', function () {

            var link = $(this).attr('href');  //get the href off the list
            $.ajax({                          //ajax request to post the partial View
                url: link,
                type: 'POST',
                cache: false,
                success: function (result) {
                    $('#target').html(result);
                    $.validator.unobtrusive.parse($("form#ValidateForm"));
                }
            });
            return false; //intercept the link
   });

I want to implement "pushState" on my application and the first step that i have done so far is to add this code:

$(document).on('click', 'a', function () {
            history.pushState({}, '', $(this).attr("href"));
 });

Now it updates my address bar whenever i click on any of my links and the ajax content gets successfully loaded. I am kinda new to this API so i don't know what am i missing but here are my issues so far:

1. when i press the "back" button, nothing happens. I read about "popstate" and browsed through SO to look for solutions but i can't seem to make them work.

2. When i click the link from the history, i get the "raw" view of the child html w/o the layout from the master html. What do i need to do if i want it to be displayed like it was clicked from my main application?

Most of my child views are either forms or list.

I have a heavily ajax based application wherein i only have a login page and the main page.

Most of my links are "ajaxed" and i have them done like this:

//get the href of the link that has been clicked, ajaxify ANY links

$(document).on('click', '.tree a', function () {

            var link = $(this).attr('href');  //get the href off the list
            $.ajax({                          //ajax request to post the partial View
                url: link,
                type: 'POST',
                cache: false,
                success: function (result) {
                    $('#target').html(result);
                    $.validator.unobtrusive.parse($("form#ValidateForm"));
                }
            });
            return false; //intercept the link
   });

I want to implement "pushState" on my application and the first step that i have done so far is to add this code:

$(document).on('click', 'a', function () {
            history.pushState({}, '', $(this).attr("href"));
 });

Now it updates my address bar whenever i click on any of my links and the ajax content gets successfully loaded. I am kinda new to this API so i don't know what am i missing but here are my issues so far:

1. when i press the "back" button, nothing happens. I read about "popstate" and browsed through SO to look for solutions but i can't seem to make them work.

2. When i click the link from the history, i get the "raw" view of the child html w/o the layout from the master html. What do i need to do if i want it to be displayed like it was clicked from my main application?

Most of my child views are either forms or list.

• javascript
• jquery
• ajax

• 2 you need to serve real pages at all urls your user encounters while using your app. this means they need to be bookmarkable and refreshable. that's going to be hard to do unless you have a different place you load content from, rather than recycling the user-facing href's to store html partials. if you got the content from elsewhere, you can serve the exact same page on all user-facing URLs and use JS onload to fill in the correct content. – dandavis Commented Feb 1, 2016 at 23:28

1 Answer 1

This code should help you :

function openURL(href){

        var link = href;  //$(this).attr('href');                                    
        $.ajax({                                                             
            url: link,
            type: 'POST',
            cache: false,
            success: function (result) {
                $('#target').html(result);
                $.validator.unobtrusive.parse($("form#ValidateForm"));
            }
        });
        window.history.pushState({href: href}, '', href);
}

$(document).ready(function() {

   $(document).on('click', 'a', function () {
     openURL($(this).attr("href"));
     return false; //intercept the link
   });  

   window.addEventListener('popstate', function(e){
      if(e.state)
        openURL(e.state.href);
   }); 

});