JSF 2.1 : ViewExpiredException : When clicking browser back button : Chrome only - google-chrome

I am getting 'ViewExpiredException' on click of back button, in Chrome browser ONLY (IE and Firefox - no issue). This happens ONLY when the previous view has some ajax updates.
Load home.xhtml (let's say, javax.faces.viewState-sequence - 1)
Do some Ajax updates on home.xhtml (let's say, javax.faces.viewState-sequence - 2)
PRG and go to home.xhtml again (let's say, javax.faces.viewState-sequence - 3)
Press Chrome Back button.
Page loads. (Now view is having javax.faces.viewState-sequence - 2 - ISSUE is instead of having new sequence id - 4 it is getting the previous sequence id - 2. That means page may be loading from Cache. As I do remove the previous views from server, view with sequence id - 2 is not present).
Any click (post back/ajax) shows ViewExpiredException.
NOTE: If Step 2 above is skipped, there is no issue, as in the following
Load home.xhtml (let's say, javax.faces.viewState-sequence - 1)
PRG and go to home.xhtml again (let's say, javax.faces.viewState-sequence - 3)
Press Chrome Back button
Page loads. (It is having javax.faces.viewState-sequence - 4 - NO ISSUE. That means page IS NOT loading from Cache)
Any click (post back/ajax) - no issue.
Please note that I am on MyFaces 2.1.8 and I am also using NoCacheFilter as suggested by BalusC. That is why IE and Firefox has no issues, but issue is only with Chrome, and that too ONLY when the previous view has ajax updates.
Any help or pointers to fix the problem or your first thoughts, are very much appreciated.
Please let me know if any information that I might have missed and you may want to know.
Update: 6/27/14
In the above case, please advice if I could manually create and build the view when the restored view returns null during postback, using custom ViewHandler.
I have checked the answer to question, Can you POST to JSF2 page with an expired session?. But it is not working in my setup, and it shows the blank white page. Any idea. Is it because I am using MyFaces 2.1.8 and it has different implementation of state manager ?
Thanks very much in advance.
Best Regards,
Kumar.

I had the similar problem before.
I solved it in the following way:
Run Chrome and press F12 to execute Developer tools
Select Resources on the menu bar and then click Cookies
Select your website name and Clear all cookies.
It worked for me.

Just fixed this issue. With multiple forms in a page, each form will have a hidden input javax.faces.viewState. When loading page for a Back navigation, Chrome is loading these state input from cache, if the previous page had some ajax calls. My fix is to auto complete off on all forms, and hidden inputs are now loading fresh instead from cache. I hope this helps someone in need.
<script>
$(function(){
$('form').attr("autocomplete", "off");
});
</script>

Related

Chrome caching page when pressing previous button

i have a page that displays a list with vuejs, the user can do some update on this list (filters). Whenever he go to another page and then click the back button on the browser, there are still the old parameters (filters), he needs tu press refresh to get it right.
These information are sent from the PHP controller, and are corrects.
Is there a way to prevent browser caching ? i found other topics on the same problem, but no answer was really fine (mostly force page reload, which is not really fine for UX)
do you know any better solution ?
Try deleting the cookies and local storage objects, should work see here:
Clearing localStorage in javascript?

Chrome - type=file drag and drop

I have a weird situation. One of my users is using functionality of Chrome (current version, 49, 50), that he drags and drops a file from his folder on local computer to normal input type=file button in a form on the webpage. Once again, let me stress it even more, its normal html input, no fancy javascript, no drag&drop events and handlers, nothing like this. It just takes the name of the dragged file and puts it into the input field, as like he selected it via "normal" way, opening the file select window, locating file on harddrive, selecting the file and confirming.
In some specific situation, this stops working (while doing some edits in the page via javascript / ajax), and I need to "reenable" it.
But, and that is my question, I haven't found any documentation of this "feature" in Google Chrome (or maybe some other browsers as well, I don't know). Why it works, how it works, how it should work and what to do if it stops working :) Does anyone has any experience with this ? The only way how to "fix" it now is to reload the page. I'd love to solve it ... :)
EDIT 1 : I just did a quick test, it works and bugs the same way in Firefox on Win. It doesn't show any error in dev console or any message, it just doesn't add the file as expected.
I've found it. The previous discussion with deceze pointed me to test the javascripts I have on the page, that do not "interfere" with the input type=file ... they weren't any such scripts, but I've found that after doubleclick on the table (that I'm using for editing) this script is being called
$(document).bind('drop dragover', function (e) {
e.preventDefault();
});
and there wasn't any unbind action when table is saved ... this caused the drag and drop everywhere on the page to stop working after the edit.

Chrome: waiting for www.site.com, how to know which resource is delaying the page load?

When a site gets stuck in chrome with the 'loading www.site.com' status, Is there anyway to know which of the elements on the DOM is delaying the load? for example, it can be an external js file or image that is taking long time to load. I tried using the network tab in the DeveloperTools, but it only shows the elements already loaded and the time they took. I couldn't find a way to see which element is stuck.
I found a way that I'm not sure it works in all cases, but it did for me. I used the Timeline tab (now shown in the Performance tab), it's one of the tabs in Chrome Dev Tools.
Open Chrome Developer tools (F12 or CMD + Alt + I in Mac) and click the Performance tab
Make sure you drag the grey timeline bar all the way to the right, you want to see the most recent section of events so you can find what's getting stuck:
Check just down below the records sidebar. If you don't see this like in the capture below, try toggling the icons, there are different view modes. Now, going all the way down I found these. It doesn't look like that's going well. Obviously some kind of infinite loop in some random code:
I couldn't find out if it was an extension itself or some other bit of code. Clicking through I only could find // Copyright 2014 The Chromium Authors. All rights reserved..
Checking in Incognito mode clear of extensions, the website loads just fine.
I'd also advise to check the Console tab to see if there are were any errors that might cause the infinite loading thing. You'll often find clues there.

'Back' button and 'history.go(-1)' not working with Chrome

Got an odd problem, only persistent in Chrome browser. Can't imagine what would be the problem. Chrome's "Back" button doesn't work, nor does history.go(-1), but works fine on all other browsers. To see the problem simply click this link, which will asynchronously initiate searches on two separate services, or sites if you will. Upon click on any search result list item, we traverse to another page, but "Back" doesn't work for Chrome.
http://vps-net.com/MSSMine/?search=some
Any suggestions or ideas are welcome.
I found the problem with the page you have linked, I don't believe it to be an issue with Chrome.
When you load the page, it also loads two iFrames as the request to the site finishes. Chrome takes a somewhat different approach to history, allowing you to navigate not simply from changes in the URL displayed, but through every new individual browser-initiated request. When the iFrames load, Chrome adds history for each step of the page loading process, creating 4 separate history items. When you go back 1 "page load", it takes you back to the site you linked to, at a different step in the process. You aren't seeing anything change because as soon as that page loads, any unloaded iFrame now loads again.
If you do history.go(-8) or some other large number, you should see the page at that many pageloads ago. However, if the link is opened "in a new tab" then the history begins for that tab at the URL you told it to open, effectively limiting the history to the pages that occurred during that tab's lifespan.
This was tested on Chrome 34.0.1847.116 running under Ubuntu 13.10.
My back button was not working as well, but it would not work with any browser. I went into my add/delete software and deleted what software was added the night before - BOOM! All is fine now.

Blank time between resource loading under network inspector

I've been working on a new website and practicing my JS/jQuery/AJaxy skills. Last night I wanted to take a look at how long the page was taking to render and see if there were any areas I could clean up to increase speed. While the page loads in about 200 - 300 ms every time, I'm seeing a large amount of blank space between resource loads under the network inspector.
http://i.imgur.com/7ng6m.jpg
Has anyone else seen this or know what I can do to minimize that time (talking about the blank space between like the html and the first css file)?
Quite possibly it is caused by the extensions you have installed. AdBlock, LastPass and Google quick scroll took altogether about 200 ms on my machine.
Unfortunately, these extensions are invoked on every site and block loading the additional resources.
Try it with out of the box browser setup, the loading time will increase tremendously.
You've got a bunch of images loaded just after the page has been loaded (the load and DOMContentLoaded events have fired - the blue and red vertical lines across the Timeline). I can see that the images are loaded by the JQuery library (the Initiator column), perhaps to build a gallery or something.
So, the case is that JQuery loads the images after the page load, presumably in the onload handler (this can look like $(document).ready(handler) in your code, but other options are possible, too).
The delay between the initial page load and requesting the first resources is almost certainly caused by Chrome extensions. To find the culprit: Record a timeline in the Timeline tab in Chrome Developer Tools; Identify the scripts that are running during the Parse HTML phase; Work out which extensions they're from.
To record a timeline:
Open the timeline tab and click record.
Reload the page and then stop the recording. (A couple of seconds should be enough.)
To find the culprit:
Find the first main Parse HTML block on the timeline. On the row below you will probably see one or more Evaluate Script blocks. These are the culprits.
Click on one of the Evaluate Script blocks and find the script name in the bottom pane. Mouse-over the script name. The tooltip will have the URL of the script, which should be of the form chrome-extension://{long_identifier}/{path}
Memorise the first few letters of the identifier and search for it in the chrome://extensions/ page. This tells you which extension is causing the problem. Try disabling it - you should see a difference.
Repeat for the other Evaluate Script blocks.
In my case, I have 20 extensions installed but only two were causing a delay: LastPass and Fauxbar. I've chosen to leave them enabled because for me the productivity benefit of these extensions outweighs the downside of the added latency.