jquery UI dialog - data does not refresh - jquery-ui

I am using jquery UI dialog with Grails. I have some input text boxes on the dialog box. I enter some data, click on save, everything works fine (the data gets saved properly) and closes itself. But on the parent page when I open the dialog box again, the old data is only displayed. This is happening in IE8. I have to refresh the server to enable the dialog box to show the updated values. I am using something like
$("#divid").load(${createLink....}).dialog('open');
The data gets refreshed properly in FF. Why is this happening? Also I am using modal:true..
Thanks a lot

The data gets reloaded using Ajax? Make sure you got an expire header in your server page. Browsers cache pages, and if you don't specify the period, they will make up an expiration time of their own. This default time is longer in IE than in FireFox.
PHP example. Don't know how to do that in Grails, but you'll get the point. ;)
<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>

You have to use jQuery.ajax with cache:false option or some other trick to prevent IE from caching request. Take a look at Stop jQuery .load response from being cached

Related

JSP Page Cache in Internet Explorer

In one of my Jquery plugin application, I have one window which opens a JSP page displays rows from database.
In Internet Explorer, except when I run application after I start for first time, all the time this page doesn't display all the rows from database till I Clear Cache in Fiddler plugin. After doing this, all rows are displayed properly and after some this problem happens again.
In this JSP page I have the following but it doesn't help.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
There is a call to servlet, however doGet method is not called from JSP.
How can I resolve this issue? This problem happens only in Internet Explorer
You can try instead of doing it in HTML markup, do it in JSP:
response.setHeader("Cache-Control", "no-cache");
Try other methods like:
response.setHeader("Cache-Control", "must-revalidate, post-check=0, pre-check=0");
And if this is just a problem for you as a user, make sure to set IE to pull a new version of the page "Every Visit to the Page" rather than the default setting of "Automatic" which doesn't work very well. (In IE8, Tools->Internet Options->Browsing history section, Settings button.)
Also when calling a page via Ajax or opening a window with Javascript you can add an extra parameter to the URL that is just a timestamp or random number to trick IE into dealing with the request as a new one.

Using pushState/replaceState to change the url in jQuery-Mobile

I'd like to change my jQM page's URL dynamically (when the user does some action) in order to modify the query string. Using history.pushState works fine, but when jQM tries to add a hash to the URL, for example when navigating to a dialog, things don't work as expected: the URL reverts to its original value, and jQM appends the hash to that (not to mention that an error occurs when I try to dismiss the dialog).
I looked into the jQuery Mobile docs and, from what I understood, the original URL of a page is stored in the data-url attribute of the data-role="page" element. So I tried modifying that as well whenever I need to change my URL, but it still reverts back to the original one when a dialog is opened.
Check this JS Bin for an example: http://jsbin.com/egunif/5/edit
When clicking the "Dialog" button, the URL is changed (along with the data-url attribute) and then the dialog is opened. You can see that the url briefly changes to egunif/hashtest before jQM changes it to egunif/5#&ui-state=dialog.
So it seems that the original URL is being stored somewhere else, the question is where? And is it possible to change this URL so that there are no conflicts when jQM makes hash changes to it?
Thanks!
What I wound up doing was just setting the url back to its original value whenever I change page to a dialog (in a pagebeforechange handler), then re-replacing it with the new value when coming back to the page (in a pagechange handler).
I still get an error in the browser's debug console due to an empty hash value (possibly something to do with this issue), but it's not affecting the functionality of the site, so I'll leave it for now. I'm still open to better suggestions though!
Update:
In the 1.2.0 Final version of jQM, popups were introduced, along with the option to disable hash changing by setting data-history="false" on the popups. By replacing all my dialogs with popups, I am able to manipulate the url without having to worry about conflicting with
jQM.

OutputCache has no effect

I'm back on a MVC app where I thought that output caching was working as expected. However, while revisiting it, I see that the OutputCache attribute I use has no effect (Duration is set to a high value). Whether I add it or not, the breakpoint in my action is always hit and Firebug shows me a 200 OK on the requested page in each case.
In a more complex action where I use VaryByCustom, the GetVaryByCustomString method in global.asax is never called. I know that it was called in the past since I was able to debug there but now it's not.
I wonder what I did to break this... Any idea?
(in order to not only test localhost, I use a dyndns.org address so that it's a valid external URL. I also use IIS).
Update: when I use the localhost URL, targetting the same url does not enter the action code again. Hitting F5 does. When using the internet URL it always visits the action code.
Update 2: Fiddler is showing this in the response headers:
200 OK
Cache:
Cache-Control: public, no-cache="Set-Cookie", max-age=86400
Date: Mon, 16 Jul 2012 19:38:46 GMT
Expires: Tue, 17 Jul 2012 19:38:46 GMT
Vary: *
Expires = Date + 24h each time I request the same url, which shows that a new page is served each time. Also I should get 200 the first time and 304 thereafter.
Just discovered the culprit, which is contextual to my application:
If I remove the 51degrees.mobi nuget package from my app, it just works again. Put it back (even without using its features) and caching is dead. Well, in fact there are 2 cases:
If you just add the package, GetVaryByCustomString is never called. The action method is called once correctly and then is served from the cache.
If you add the package AND you also use a CompressFilter attribute, then GetVaryByCustomString is never called AND the action method is always called (no page served from the cache).
I posted to their forums to report this issue.
Update: these issues appear starting with 51degrees version 2.1.4.9. I notice that this is the first version using Microsoft.Web.Infrastructure, in case this is relevant...
Update 2: they found the cause of this issue and it will be fixed.

grails - how to view resulting page source javascript, when it is updated via Ajax via rendering of a template, for example

If one uses remoteFunction or one of the the Grails Ajax capabilities, rendering a template to update a portion of a page, how does one see any additions made to the Javascript functions associated with the resulting page in Chrome or Firefox?
In Chrome, one is able to see the updated page/DOM via going to their Tools -> Developer Tools menu item, then selecting "Elements". There, I'm able to use the magnifying glass to select a portion of the updated page that I want to see. But, how do I also see the additional Javascript functions added to the page.
NOTE: Originally this question requested to see both html element content and Javascript content. Karthick AK's answer handles both.
In Chrome->Developer tool-> Network tab,
For each request being sent the response obtained can be seen in the Response tab. The rendered content can be seen in here.
Similiar option exists for firefox/firebug.
Another ajax gotcha i have experienced is, sometimes the ajax requests are cached and hence onclick the content is served from the cache and not an actual requests hits the server. This is more prominant in Old IE browsers

Post/Redirect/Get in Webkit causes a full page reload

It seems that in Webkit-based browsers (Chrome and Safari) when a Post/Redirect/Get is performed on the server, the entire page (html + images + css, etc.) is redownloaded. It appears the same as if you reloaded the page.
There's been a question (and somewhat of a solution) posted in the Google Chrome Help: http://www.google.com/support/forum/p/Chrome/thread?tid=72bf3773f7e66d68&hl=en
Does anyone have a more elegant way of doing this? I'm working with ASP.NET MVC and would prefer to not write a custom Redirect result that returns Javascript or the actual page based on the UserAgent.
Should I just hope and wait that Webkit will change its behavior?
This is a bug. The only "workaround" I've seen untill now is to use a Refresh header instead of a Location header to do the redirecting. This is far from ideal.
Bug 38690 - Submitting a POST that leads to a server redirect causes all cached items to redownload
Also, this question is a duplicate of "Full page reload on Post/Redirect/Get ignoring cache control".
Try setting Cache-Control: public header.

Resources