I'm writing a survey designer asp.net mvc. It has buttons to move questions up and down. The buttons post the whole form back and the affected questions are swapped on the server. When the form returns the only thing that is changed are the values for each survey question. Both firefox and IE seem to ignore this change.
Nothing is persisted to the database (until save) and url doesn't change so the post just returns the same view but I've stepped through my code to ensure the sequence of values being rendered in the view reflects the swap which is ok. However "view - source" doesn't show the change suggesting caching issue (maybe auto complete).
I've tried autocomplete="off" in my form.
Response.Cache.SetNoStore(); in my global.asax
[System.Web.Mvc.OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")] before my controller
and the following in my page header
<meta http-equiv=="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv=="PRAGMA" content="NO-CACHE" />
<META HTTP-EQUIV="EXPIRES" CONTENT="0" />
I also tried putting a random query value in my url.
NOTHING!!! This must be real common.
Anyone got a clue?
Redirect to GET seems to fix it using TEMPDATA to pass the model that was posted from the client to the [HttpGet] view.
I don't know why browsers favor their cached input field values over what is returned from the POST yet give an honest representation of what is retrieved from a GET.
I just hope my users never hit refresh on a survey they are working as they will loose it as the TEMPDATA is blown away. This might actually be what they'd expect though and I generally like "POST then redirect to GET" as it prevents potentially damaging re-posting.
Related
Why is this happening?
HTML shows:
<meta content='http://www.costumingdiary.com/2015/05/freddie-mercury-robe-francaise.html' itemprop='mainEntityOfPage' itemscope='itemscope'/>
Structured Data Testing Tool output shows:
http://www.costumingdiary.com/2015/05/freddie-mercury-robe-francaise.html#__sid=md3
Update: It looks like it has to do with my breadcrumb list. But still, why is it happening, and is it wrong?
If the URL you want to provide is unique you can use the itemid property.
I was confronted with mainEntityOfPage by the tool after the latest update. And using Google's example I used the following code
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://blog.hompus.nl/2015/12/04/json-on-a-diet-how-to-shrink-your-dtos-part-2-skip-empty-collections/" />
And this show up correctly in the Structured Data Testing Tool results for my blog
I don’t know where the fragment #__sid=md3 is coming from, but as the SDTT had some quirks with BreadcrumbList in the past, it might also be a side effect of this.
But note that if you want to provide a URL as value for the mainEntityOfPage property, you must use a link element instead of a meta element:
<link itemprop="mainEntityOfPage" href="http://www.costumingdiary.com/2015/05/freddie-mercury-robe-francaise.html" />
(See examples for Microdata markup that creates an item value, instead of a URL value, for mainEntityOfPage.)
I have an MVC 4 project with a layout page that I have setup with images that are links like this
<img id="logoImage" src="~/Content/siteImages/myLogo.png" alt="My logo" title="Welcome to my site" />
I have also tried this:
<img id="logoImage" src="../Content/siteImages/myLogo.png" alt="My logo" title="Welcome to my site" />
And this:
<img id="logoImage" src="#Url.Content("~/Content/siteImages/myLogo.png")" alt="My logo" title="Welcome to my site" />
These all work fine as long as the controller is the home controller. I use an Actionlink #Html.ActionLink("Northwind Demo", "Northwind", "Northwind", null, new { #class="links"}) to get to another controller.
As soon as the ActionLink is clicked, my images disappear. I examined the rendered link text in the browser and it is the same as it was before.
src="Content/siteImages/myLogo.png"
However, when examining the request in the network tab of the browser the url for the image is now
Northwind/Content/siteImages/myLogo.png
which does not resolve. For some reason the browser is adding the name of the controller to the beginning of the request for the image. I am sure that I am missing something really dumb but...
How do I fix this?
Edit
I wonder if this is an issue that only happens when running locally and may disappear when deployed to a server? I am still unable to fix this.
Edit
I am really struggling with the fact that no one else has encountered this before. I was under the impression that _layout.cshtml was like a master page in WebFroms. I need some suggestions here.
EDIT
So I had a moment of success. I changed the name of the entry method into the Northwind controller to Index and the images displayed properly in the index view. However, if I call another view, then the images disappear again.
I use radion buttons to select a different view based on which one is selected like this:
public ActionResult Search()
{
int id = Convert.ToInt32(Request.Form["radio"]);
switch (id)
{
case 1:
return View("Customer");
case 2:
return View("Orders");
case 3:
return View("Employees");
default:
ViewBag.Error = "Search parameter not found";
return View("Index");
}
}
I am still not able to fix this but I think that I am closer to a solution with someone's help.
Thanks in advance
Don't use relative addressing in MVC, since as you can tell you run into problems because views can be accessed from multiple routes (ie, /, /Home, /Home/Index, etc.. are all the same view, but different paths, if you use ../whatever then /Home/Index becomes /Home/whatever, / and /Home become /whatever)
Always use either #Url.Content to generate urls if you're not in a Razor 2+ view. If you're in Razor 2 or greater, then you can use src="~/Content/images/whatever"
If these methods are not working, then you need to look at your Application root, web.config, etc.. because MVC is becoming confused about where the root of the site is.
Well I have figured this out and I feel like an idiot! I have a script file that I use to change the images when it becomes small enough so that they continue to fit on the screen as it gets smaller for a responsive design. Like this:
$("#logoImage").attr("src", "Content/siteImages/logoSmall.png");
Well, the missing / at the very beginning is what was causing the issue. Adding the / fixed all my issues. Like this:
$("#logoImage").attr("src", "/Content/siteImages/logoSmall.png");
Even though I feel very silly at this moment, I am posting my answer in case someone else comes along and has a similar issue. Don't forget your script files and don't leave anything out when trying to fix a weird issue. Thanks to everyone that looked at this and tried to help.
I am having trouble with only firefox. My page shows a tree structure that is loaded via ajax as the user clicks on the nodes they want to expand. The problem I'm having with firefox, and only firefox, is that it will expand the nodes on the first page load. But after that firefox caches it weird and the node header, not children, of the ajax request gets carried over to the new page. This is an issue because the node's header that is carried over contains information that determines if the node has retrieved it's children.
<div class="node topbar"
<input type="hidden" id="foo" name="hasretrievedchildren" value="1"/>
...
</div>
It should be as it is on the first page load.
<div class="node topbar"
<input type="hidden" id="foo" name="hasretrievedchildren" value="0"/>
...
</div>
My Javascript checks for a nonzero value on that input to do the AJAX call.
Is this a bfcache issue?
I'm lead to believe it's not because I added
window.onunload = function();
to the js file and in a script tag and neither fixed it which this article
https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
says should invalidate the bfcache.
I'm using asp.net MVC 4 and I tried using the MVCdonutcaching to set this page and partial views to not cache. But that didn't work either.
Maybe it's the bfcache, maybe it's not.
I had to face the same problem some time ago. The browser caches were causing some strange behaviour on our forms, and it was affecting the expected results of the page.
Someway to solve itSomething you can do in order to make the program load always the correct value (assuming you are loading it from ) is to initialize the value through your Javascript.
If you use JQuery, you should use:
<script type="text/javascript">
$(document).ready(){
//Assign your items values here
}
<script>
You can also use the onload handler in JS.
Hope this helps.
I was able to solve the problem. Firefox caches all form data even hidden inputs. Since I was using a hidden field to store the flag that enabled the AJAX request it would reload the form data with the flag set. I moved it to a custom attribute and it works exactly as it should.
I am using modal box plugin with grails. The problem is that the link that it creates does not always call the server side code.
here is the link on the page
<modalbox:createLink
controller="company"
action="setChangeCompanyAdmin"
absolute="true"
mapping="changeAdmin"
id="${companyInstance.id}"
title="Change Primary Admin"
width="600"
linkname="Change Primary Admin" />
The action in the controller is preparing a list in the certain way to be displayed in the popup that the modal box opens. But the problem is that the server side is not being called every time, only in IE.
I have tried absolute and specifying a mapping as well but to no avail.
Also i have set the page attributes in the gsp page to not cache the data at all.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
But even this does not seem to work.
Any help is much appreciated.
Adhir
The browser is still caching your request. You can add a parameter of the current time stamp to the request.
<modalbox:createLink
controller="company"
action="setChangeCompanyAdmin"
absolute="true"
params="${cacheKiller: new Date().time}"
mapping="changeAdmin"
id="${companyInstance.id}"
title="Change Primary Admin"
width="600"
linkname="Change Primary Admin" />
It is probably IE caching the response. If you want to disable caching via the controller's response object, the following code should work:
response.setHeader("Pragma", "no-cache")
response.setHeader("Cache-Control", "no-cache, no-store")
Is there a way to get struts 2 (using tiles) to build the whole page before sending it to the browser? I don't want the page to be build "progressively" in the browser one part at a time.
The main problem I'm trying to solve is that internet explorer 7 flashes/blinks the page even if only some of the content changes (firefox does this much more smoothly).
So that if I have a page with:
HEADER
some content
FOOTER
And the "some content" area only changes between page loads, the FOOTER part still flashes the white background before filling it with the background color of the footer. I tought that maybe by getting struts to send the complete page it would load fast enough to eliminate the "blinking".
Now the FOOTER comes from the server a little bit later than the parts before it and so it flashes (in internet explorer, firefox displays the page smoothly).
NB: this is an important requirement for the site, and using ajax to load the middle content is out (as are frames or other "hacks"). The site is built using CSS and not a table layout, maybe I will have to use a table layout to get it to work...
About using tiles flush parameter:
I tried that and it doesn't work as I need. I would need a flush-parameter for the whole page. I have tried the normal jsp page directive "autoFlush=false" but it didn't work. I set this directive on my main template page (and not in the tiles).
Here is an example from the main template, which uses header, body and footer templates. With the Thread.sleep() I added the problem is easy to spot. The footer renders 2 secs later than the rest of the page.
<body>
<div id="container">
<t:insertAttribute name="header" flush="false" />
<div id="content"><t:insertAttribute name="body" flush="false"/></div>
<div class="clear"></div>
<% Thread.sleep(2000); %>
<t:insertAttribute name="footer" flush="false" />
</div>
</body>
UPDATE
Thanks for the comments. The requirement is actually almost reasonable as this isn't a normal web page, think embedded.
But apparently there is no way of configuring IE to start rendering after some delay (like firefox has a configurable delay of some 100ms)?
I tried to intercept the TilesResult but the method doExecute is run before the whole content is apparently evaluated, so the method has already exited before the jsp is evaluated (my Thread.sleep() test). I was wondering how I could render the whole response to a string and then output that all at once to the browser.
I know that this isn't foolproof and network delays etc may factor in this, but if I could get the response to output all at once and maybe use a table based layout (IE possibly renders the table only after the table closes) this could work reasonably.
Or then try to get this switched to firefox or maybe forget all about this little glitch...
UPDATE 2
This started to bother me so I did some investigation.
If I had a plain jsp page (no tiles) the buffering works (with the buffer attribute), so that if I had my Thread.sleep() there the whole page rendered after two seconds if the page size was below the buffer size.
But if I used tiles in the page (as in the example above) I couldn't get the page to render at the same time (I even included the page directive in all my tiles-templates/"components", no help). So tiles probably flushes the response somewhere?
Furthermore, the "problematic tiles" was my body-part, which contained a struts:form tag. I replaced it with a normal form-tag and it worked as I wanted...
UPDATE 3
Ok, nobody seems to know the inner workings of tiles or struts tags...
No big problem as this is a very specific case and requirement.
I worked around it by using apache as a proxt in front of the application, and using apache's proxy configuration options to specify a large buffer.
I'll mark this as answered.
You can send page data all at once at the server end if you like (and many frameworks do that anyway for convenience) but the reality of networking is that it won't all arrive at once and the browser will render it as packets arrive. And this is a good thing for responsiveness, even if you* aesthetically would like the page to display all at once.
You can reduce the lag as much as possible by simplifying markup and using deflate compression to keep the payload size down, and that's a worthwhile thing to do in general. Plus you can make sure you're not hitting a Flash Of Unstyled Content. But you can't control when the browser chooses to render, short of doing it all in JavaScript with all the downsides that entails (and even then, the browser might redraw slowly).
(* - or your client/boss, if that's who has come up with this "important requirement" that your site somehow work differently to every other page on the web.)
Can you use the "flush" attribute on the tiles components?
<tiles:insertAttribute name="body" flush="false"/>
In addition if the output buffer gets too big, it will flush anyway. Try increasing the buffer size?
<%# page language="java" buffer="500kb" autoFlush="false" %>