Opening Show Page In A Modal With Updating Url In Address Bar As In Instagram Example Using Ruby On Rails 5

I'm trying to achieve the attached behaviour in my Ruby on Rails 5 project. Clicking post in index opens modal instead of linking to show page, but also updates browser's address b

Solution 1:

Adding this line to show.js.erb solved the issue

history.replaceState({}, "<%= @post.title %>", "<%= request.original_url %>");

or if you don't want to change url when modal opened. Adding this line to show.js.erb

history.pushState({}, "Your Title", "<%= your_current_url %>");

Solution 2:

On ajax:success of retrieving your modal partial, you can edit the navigation bar using

function editURL(page, title, url) {
  window.history.pushState(page, title, url);
}

So something like

$("#get-show").on("ajax:success", function(e) {
   editURL("pagename", "pagetitle", "url")
})

EDIT

If you want your back buttons to work in browser, you must add the following code on document ready.

window.addEventListener("popstate", function(e) {
   window.location.href = location.href;
});