back button results in naked json

[Daniel Nelson]

When hitting the back button from an AngularJS page that requested json, the browser displays the naked json. Is there a way to avoid this?

Thank You,

Daniel

[ProLoser]

You need to paste code and an example if you want questions like this answered. If people can't reproduce the problem they can't help just by guessing what you did wrong. Try putting something together on jsfiddle and linking to it.

[Daniel Nelson]

On Fri, Dec 23, 2011 at 3:49 PM, ProLoser <dean...@gmail.com> wrote:
>
> You need to paste code and an example if you want questions like this answered. If people can't reproduce the problem they can't help just by guessing what you did wrong. Try putting something together on jsfiddle and linking to it.

jsFiddle doesn't let you connect to actual JSON data, does it? If
there is a way, I could give it a try. Otherwise, I figured this would
be a common problem with a standard solution. This app isn't using
routes. It's just a controller that pulls in a JSON resource. After
hitting back, the browser displays the json to the user.

[ProLoser]

I have no idea HOW you're pulling in JSON data. And yes, jsfiddle does have json/ajax support (to some degree), although I'm not knowledgable on how to use it. Read the documentation and take a look at the little sonar-looking button at the top left.

[Daniel Nelson]

In case anyone else reads this and is interested in more details
before I have time to dive into jsFiddle, here is the resource
definition:

angular.service 'DailyCount', ($resource) ->
$resource '/analytics/doc_totals/:doc_id?tz_offset=:tz_offset&start_date=:start_date&end_date=:end_date',
{}, get: { method: 'GET' }

And here is the code from the controller that gets the resource:
scope.daily_opens = {}
scope.load_daily_counts = (start_date='', end_date='') ->
DailyCount.get { doc_id: $routeParams.doc_id, start_date:
start_date, end_date: end_date, tz_offset: -1 * new
Date().getTimezoneOffset() }, (data) ->
scope.daily_opens = data.open_events
scope.graph.open_event_graph(scope)
scope.load_daily_counts()

[Vojta Jina]

Hey Daniel,

I can't see any problem in your code. This code should not touch url (and browser history) at all, so clicking back/forward button should not cause anything...

Can you check the url ? Does it change ?

V.

[Daniel Nelson]

Thank you, Vojta, for your reply.

I have discovered that this problem appears to be Chrome only. Firefox
and Safari do not exhibit this problem. Chrome exhibits it
consistently (I am running Chrome stable 16.0.912.63).

I have been attempting to debug this for some time, but cannot seem to
discover what is causing the problem. Another AngularJS page that
operates in much the same way does not exhibit this problem. (That
page does some things that this page does not, such as loading Google
Graphs...my initial post in this thread indicated that it was that
page which was exhibiting the problem, but I was mistaken...the
problematic page is much simpler...just a dynamic index of resources,
no graphs.)

I hope to be able to solve the problem and report back if I do, but at
this point, I need to move on.

Thank You,

Daniel

[Vojta Jina]

Hey Daniel, I'd really like to help you. Can you share your code ?

V.

[Daniel Nelson]

> Hey Daniel, I'd really like to help you. Can you share your code ?

I'll need to make a boiled down example that reproduces the problem
(it's part of a large application). Let me see if I can do that and
get back to you.

Thank You,

Daniel

[Daniel Nelson]

On Tue, Dec 27, 2011 at 7:32 PM, Vojta Jina <vojta...@gmail.com> wrote:
> Hey Daniel, I'd really like to help you. Can you share your code ?

Hello Vojta,

I have successfully reproduced the problem, though I think the problem
is simply a bug in Chrome.

The problem arises when the same url is used to generate both the html
and the json. For example:

i. I navigate to http://localhost/docs
ii. my browser requests html
iii. the page is rendered
iv. upon rendering, javascript in the page requests the list of docs
from the same url, but this time the content type is json
v. Chrome appears to view the most recent response as the source for
http://localhost/docs, even though it is json: viewing page source,
navigating away and then hitting back, both show the json, rather than
the html

A minimal example that reproduces this behavior is available from
https://github.com/dnelson-cs/chrome_json_bug

Thank You,

Daniel

[Daniel Nelson]

On Wed, Dec 28, 2011 at 2:26 PM, Daniel Nelson <dan...@populr.me> wrote:
> I have successfully reproduced the problem, though I think the problem
> is simply a bug in Chrome.

I boiled it down even further to a very minimal case (without
AngularJS) and opened a Chrome bug:
http://code.google.com/p/chromium/issues/detail?id=108766

-Daniel

[Igor Minar]

pretty crazy stuff. I'm curious to see what the chrome folks say.

/i

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Vojta Jina]

Well, using same url for serving html template and json content is definitely not good approach, you should not do that.

The problem is, that Chrome serves the "wrong" json (after hitting back button) from cache. I don't think it's a Chrome bug, you should send "Cache-Control: no-cache" header if you want to disable caching for this document. Other browsers (tried Safari, Firefox) does not cache it, that's the difference...

V.

[Daniel Nelson]

On Wed, Dec 28, 2011 at 8:02 PM, Vojta Jina <vojta...@gmail.com> wrote:
> Well, using same url for serving html template and json content is
> definitely not good approach, you should not do that.

Using the same URL is proper RESTful practice, and is encouraged by
web application frameworks such as Ruby on Rails. A URL indicates a
single resource; the HTTP method (GET, POST, PUT, DELETE) indicates
what should happen on that resource; and the ACCEPT header indicates
the format that the resource should be presented in.

It is not the expected behavior for an end user to be looking at a
nicely styled web page, to navigate elsewhere, and then, after hitting
the back button, to see naked JSON. The other browsers respond in the
expected manner. Chrome does not.

[Vojta Jina]

I replied to Chrome issue, as now this has nothing to do with Angular...

http://code.google.com/p/chromium/issues/detail?id=108766#c5

V.

[Brandon Toone]

Hey Daniel, I just wanted to say thanks for running this bug to ground and especially taking the time to duplicate in a demo app. I just ran into this bug using Chrome (27.0.1453.110). For anyone else that runs into this, there is a good follow up discussion on the chrome bug reports linked in this thread but ultimately the bug is still open!

I'm running a rails backend and will be switching my $resources to use .json in the url (or possibly pass format: json as a param). At this point I think it is the best work-around.

[Joseph Robertson]

I had a similar problem which was resolved by removing Turbolinks from the JS manifest (assuming you're using Sprockets), as that was listening to the history.back event.