rails ajax URL change

Question

I have the next issue, I have page which opens with ajax and change dynamicly URL of browser like this

window.history.pushState(null, null, "/desktop/manage/add");

so when I am in the "add" page and open any page with get/post request(even another web site) and push "Go back" button in browser I get not the full html code of page but only ajax part. Like this:

How this can be fixed?

P.S If I delete window.history.pushState(null, null, "/desktop/manage/add"); everything works fine, but I need to change URL of browser.

UPD: I open this page via post request, NO ajax

THen I open "manage/add" page via AJAX

Then go to google.com(any site) and Click back button

And my ajax loaded page is not full HTML page, There is only ajax part only like text:

I read about this issue, and ussually rails programmers add event to back click button to application.js like this:

$(window).on('popstate', function () {
    $.get(document.location.href)
  });

But this works only is user go not to google(or any other site), it works only if they go through my site and click back button.

UPD2: /add controller

def addProduct

@categories = Market.where("depth = ? and title != ''", 0).reorder(:title);
        @tags = UserTag.where(user_id: current_user.id).includes(:tags);
        respond_to do |format|
            format.html{render layout: "desktop_layout"}
            format.js {}
        end
    end

here is my addProduct.js: (this rendered file you see in screenshot after back button clicked)

window.history.pushState('page212', 'Mikee.kz', '/desktop/manage/add');
    $("#rightBlock").html("<%= escape_javascript(ajax_section id:'page', :render => 'myadd') %>");

Can you edit the question to include output from your log when you switch between pages? — James Smith, Jul 21 '15 at 10:13
Ah right, pushState doesn't cause anything to get loaded. https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history. Is /desktop/manage/add a page the user would have visited previously? — James Smith, Jul 21 '15 at 11:06
@JamesSmith, Yes, exactly. More details: I'm in "/desktop/manage/", then open "/desktop/manage/add" via ajax, then generate any get/post request( for exmaple go to google.com) then click "Back" button and get this page. — mondayguy, Jul 21 '15 at 13:10
We are tying to help you : you need to edit your question and add details.. if possible screen shots otherwise you know :) — Shiva, Jul 24 '15 at 13:41
@CbaBhusal, I have added as much details as it possible. plz try to help( — mondayguy, Jul 24 '15 at 19:50
hey, could you show your controller action `add` and if possible some more — Shiva, Jul 25 '15 at 02:52
@CbaBhusal I have added both js and controllers. Plz checkout upd2 — mondayguy, Jul 25 '15 at 09:19
so far what I understood your problem is browser make a normal `GET` request however its getting response as if it make a `JS` type request.. am I right? — Shiva, Jul 25 '15 at 10:17
yes, def addProduct is /manage/add. No your are not right, because if it make normal get request this page will render format.html{render layout: "desktop_layout"} and everything will be fine. For example if I go directly to /manage/add (ie using get request) it looks good — mondayguy, Jul 25 '15 at 12:16
This issue always happens when you are trying to deal with pushState. I have investigated it a lot in the past and could not find any decent solution. My guess is that even +5000 bounty will not be able to resolve it. I see the only way to resolve it is to find a way to refresh a page to which you go back, but I don't know how it could be done. — , Jul 27 '15 at 20:51
@Jan Strnádek, of course I am using turbolinks. Without turbolinks it works just fine. The turbolinks gives a nice experience. — , Jul 28 '15 at 21:24
You must to use ajax to call "add"; and you will use a unique master page at the left the menu and in the middle a div that show data for "add", so your url always looks like "/desktop/manage/" and not "/desktop/manage/add" — bicho, Jul 29 '15 at 14:54
@bicho as I write in question: "P.S If I delete window.history.pushState(null, null, "/desktop/manage/add"); everything works fine, but I need to change URL of browser." — mondayguy, Jul 29 '15 at 14:56

score 3 · Accepted Answer · edited May 23 '17 at 11:51

I had this same problem a while back, however with replaceState() instead. I didn't notice this at first, but my fellow developer called it to my attention. It turned out that I didn't notice it because I was using Firefox and this seems to be a bug exclusive to Chrome/Chromium, which he was using. In fact, it seems to have been a bug for a while now, but Google hasn't fixed it yet.

That being said, it seems that there is no real fix for this, at least until Google fixes it. Of course, simply reloading the page will make the problem go away for the moment, but you still see the ugly code. And you could just not use Chrome/Chromium, but that really isn't a solution either.

rails ajax URL change

1 Answers1