I have the following scenario while programming a shop using asp.net core 1.0 (mvc):
I add 3 products to my shop basket.
on the shop basket I delete one of the 3 products using an AJAX request. after the product has been deleted, I move on to the next step and become redirected to the page with the delivery & payment settings
on the page with the delivery & payment settings I choose to navigate back to the shop basket. I expect to see 2 products, but I see 3 since the page hasn’t been reloaded from the server.
when I inspect fiddler, I notice that no requests to the various resources of the shop basket are performed.
in my BaseController class I’ve already set the following code which should disable the cache:
[NonAction]
public override async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
{
context.HttpContext.Response.Headers.Add("Cache-Control", "no-store, must-revalidate");
context.HttpContext.Response.Headers.Add("Expires", "0");
context.HttpContext.Response.Headers.Add("Pragma", "no-cache");
await next();
}
does anybody have an idea about how we could navigate back and see the up-to-date shopping basket containing only 2 products?
you can use this simply piece of code:
<head data-page-key="#string.Concat(this.ViewContext.RouteData.Values["controller"], #"_", this.ViewContext.RouteData.Values["action"])"
data-page-token="#DateTime.Now.Ticks.ToString()">
<script type="text/javascript">
var pageKey = document.getElementsByTagName('head')[0].getAttribute("data-page-key");
var pageToken = document.getElementsByTagName('head')[0].getAttribute("data-page-token");
var pageTokenCached = sessionStorage[pageKey];
if (!pageTokenCached || pageTokenCached !== pageToken) sessionStorage.setItem(pageKey, pageToken);
else location.reload();
</script>
The browser's sessionStorage stores the data for only one session. The data is deleted when the user closes the specific browser tab.
Here every time the page comes from server, a new data-page-token value is generated, stored in the tag and saved in browser's sessionStorage.
When the user click on browser BACK botton, the html page is retrieved from the browser cache, and executed. So, the cached token is retrieved from sessionStorage, compared with what we have in the page, that is data-page-token.
If the values are equal it means that the page comes from browser cache otherwise it is a page coming from server.
When data-page-token is equals to sessionStorage's token, it means that we have a stale page and so it is reload, otherwise is processed.
session Storage is compatible with all browser and also supported by IE 8.0
Related
I want to exclude page-1 from the browser history, so that when I navigate away from it, (let's say to page-2) and then press the back button, it won't show page-1.
Or else, if going from 1 -> 2 disables the back button on 2.
Is there any way this can be accomplished? (Not using javascript)
I've a form on page-1, on successful submission of which page 2 is shown.
However, I don't want page-1 to be shown when I click on back button on page-2.
Either it should be disabled or it should revert form submission (deleting all the session variables) and then show page 1.
How can this be done?
I'm using Spring MVC and JSP views in my project.
You could write a session parameter when displaying the page to enforce the user to visit page1 before they visit page2.
#RequestMapping("/page1.html")
public String page1(HttpSession session){
session.setAttribute("seen_page_1", "true");
return "page1";
}
#RequestMapping("/page2.html")
public String page2(HttpSession session){
if(!"true".equals(session.getAttribute("seen_page_1").toString())){
return "redirect:/page1.html";
}
return "page2";
}
If you want to display page2 to users who have already visited page1 (even when they return to the page), you could use a cookie value instead.
Depending on how long you want this behavior to last you can store the form status from page 1 in a session var or cookie. Session vars will last as long as the user has their browser open. You can set the expiration for a cookie to last a few minutes or to never expire.
You can set up a filter between requests for page 1 and page 2. In the filter check for either the session var or cookie. If the value is for a submitted form then redirect to page 2. If the value is not set or set to something else (depending on your implementation) then redirect to page 1.
I'm confused as to how to accomplish this. I have a page which, has a popup filter, which has some input elements and an "Apply" button (not a submit). When the button is clicked, two jquery .get() calls are made, which load a graph, a DataTables grid, photos, and miscellaneous info into four separate tabs. Inside the graph, if one clicks on a particular element, the user is taken to another page where the data is drilled down to a finer level. All this works well.
The problem is if the user decides to go back to the original page, but with the ajax generated graph/grid/photos etc. Originally I thought that I would store a session variable with the filter variables used to form the original query, and on returning to the page, if the session var was found, the original ajax call would be made again, re-populating the tabs.
The problem that I find with this method is that Coldfusion doesn't recognize that the session variable has been set when returning to the page using the browser's back button. If I dump out the session var at both the original and the second page, I can see the newly set var at the second page, and I can see it if I go to the original page through the navigation menu, but NOT if I use the back button.
SO.... from reading posts on here about ajax browser history plugins, it seems that there are various jquery plugins which help with this, including BBQ. The problem that I see with this approach is that it requires the use of anchor elements to trigger it, and then modifies the query string using the anchors' href attributes. I suppose that I could modify the page to include a hidden anchor.
My question, at long last is: is an ajax history plugin like BBQ the best way to accomplish this, or is there a way to make Coldfusion see the newly created session var when returning to the page via the back button? Or, should I consider re-architecting the page so that the ajax calls are replaced by a form submission back to the page instead?
Thanks in advance, as always.
EDIT: some code to help clarify things:
Here's the button that makes the original ajax calls:
<button id="applyFilter">APPLY</button>
and part of the js called on #applyFilter, wrapped in $(document).ready():
$('#applyFilter').click(function(){
// fill in the Photos tab
$.get('tracking/listPhotos.cfm',
{
id: id,
randParam: Math.random()
},
function(response){
$('#tabs-photos').html(response);
}
);
});
Finally, when the user calls the drill-down on the ajax generated graph, it uses the MaintAction form which has been populated with the needed variables:
function DrillDown() {
//get the necessary variables and populate the form inputs
document.MaintAction.action = "index.cfm?file=somepage.cfm&Config=someConfig";
document.MaintAction.submit();
}
and that takes us to the new page, from which we'd like to return to the first page but with the ajax-loaded photos.
The best bet is to use the BBQ method. For this, you don't have to actually include the anchor tags in your page; in fact, doing so would cause problems. This page: http://ajaxpatterns.org/Unique_URLs explains how the underlying process works. I'm sure a jQuery plugin would make the actual implementation much easier.
Regarding your other question, about how this could be done with session variables - I've actually done something similar to that, prior to learning about the BBQ method. This was specifically to save the state of a jqGrid component, but it could be easily changed to support any particular Ajax state. Basically, what I did was keep a session variable around for each instance of each component that stored the last parameters passed to the server via AJAX requests. Then, on the client side, the first thing I did was run a synchronous XHR request back to the server to fetch the state from that session variable. Using the callback method for that synchronous request, I then set up the components on my page using those saved parameters. This worked for me, but if I had to do it again I would definitely go with the BBQ method because it is much simpler to deal with and also allows more than one level of history.
Some example code based on your update:
$('#applyFilter').click(function(){
var id = $("#filterid").val(); // assumes the below id value is stored in some input on the page with the id "filterid"
// fill in the Photos tab
$.get('tracking/listPhotos.cfm',
{
id: id // I'm assuming this is what you need to remember when the page is returned to via a back-button...
//randParam: Math.random() - I assume this is to prevent caching? See below
},
function(response){
$('#tabs-photos').html(response);
}
);
});
/* fixes stupid caching behavior, primarily in IE */
$.ajaxSetup({ cache: false });
$.ajax({
async: false,
url: 'tracking/listPhotosSessionKeeper.cfm',
success: function (data, textStatus, XMLHttpRequest)
{
if (data.length)
{
$("#filterid").val(data);
$('#applyFilter').trigger('click');
}
}
});
This is what you need on the client-side to fetch the state of the photo list. On the server side, you'll need to add this modification to tracking/listPhotos.cfm:
<cfset session.lastUsedPhotoFilterID = URL.id>
And add this new one-line file, tracking/listPhotosSessionKeeper.cfm:
<cfif IsDefined("session.lastUsedPhotoFilterID")><cfoutput>#session.lastUsedPhotoFilterID#</cfoutput></cfif>
Together these changes will keep track of the last ID used by the user, and will load it up each time the page is rendered (whether via a back button, or simply by the user revisiting the page).
I have a mobile site which completely runs using AJAX, and hash code, basically each page click is a link, such as
<a href='http://some-domain.com/my-page-122.php" hash-id='122'>linkage</a>
Meaning that the page itself exists and it has ON IT google analytics page, HOWEVER, on the ajax request, I only ask to load a certein <div> on said page using jQuery's load(), so my question is:
because the page is called for in it's entirety with the google analytics code and everything, will it still record it as a page view even though only a portion is injected to the page?
The reason why I'm asking is because this site is getting around 500 uniques per day, and we want to change it to this new AJAXy form, so not recording analytics is a big no-no.
If you use jQuery you can bind to the global AjaxComplete event to fire a Pageview everytime an Ajax call completes:
jQuery(document).ajaxComplete(function(e, xhr, settings){
var d = document.location.pathname + document.location.search + document.location.hash;
_gaq.push(['_trackPageview', d]);
});
If you update the Anchor every time you do an Ajax call this will fire the full path including the anchor part of the url.
Note that if you load content using .load that has the Google Analytics Tracking code in it, it will run that code and fire a second pageview. So you want to make sure you don;t include the GATC on the ajax content to avoid double pageviews.
Analytics won't record it automatically. Assuming you're using the asynchronous code you can record as many pageviews as you want by writing to the gaq array using an explicitly set URL:
_gaq.push(['_setAccount', 'UA-12345-1']);
_gaq.push(['_trackPageview', '/home/landingPage']);
In this case you can build whatever URL you want where they have '/home/landingPage'. Note that if _gaq was already properly instantiated and _setAccount was already pushed then you only need to push the _trackPageview.
Also, the event can be in code returned by your AJAX, or it can be in the click event of your button or whatever is launching the AJAX request.
See http://code.google.com/apis/analytics/docs/gaJS/gaJSApiBasicConfiguration.html#_gat.GA_Tracker_._trackPageview
Is there a way to refresh coldfusion session on the page without reloading the page? Let's say I had 3 items in my shopping cart. Now I want to remove one of the items by clicking "remove" link next to a product. I created delete_item.cfm that removes a particular item from cart using jquery ajax. Now I want my shopping cart to display only 2 items without reloading the page. Here is my code.
<CFIF ISDEFINED("ProductID")>
<!--- Find where in the basket it is --->
<CFSET ItemPosition = ListFind(session.StoreItems,ProductID)>
<CFSET session.StoreItems = ListDeleteAt(session.StoreItems, ItemPosition, ",")>
<CFSET session.StoreItemsQty = ListDeleteAt(session.StoreItemsQty, ItemPosition, ",")>
This has little to do with ColdFusion specifically, and more to do with a very common Ajax design pattern. You've got most of it right; here's the general idea:
User clicks [delete].
A JavaScript handler function sends the ID of the item to be deleted to your delete_item.cfm handler on the server. Example:
$('a.deletelink').click( function(e){
e.preventDefault();
$.ajax({
url : '/handlers/delete_item.cfm',
data : $(this).data('id'),
type : 'post',
success : /* see below */
});
});
On the server, another function retrieves an updated view of the region of the page affected by the change -- now without the deleted item. delete_item.cfm calls this function and returns the updated view information to the Ajax requester. This could take the form of:
The raw data, perhaps in the form of a JSON string, or...
A fully rendered HTML version of the region to be re-drawn.
In the success handler of the Ajax call, the updated view information is received. You then:
Loop over the JSON data and build the appropriate HTML in JavaScript, then drop it into your container area (perhaps using a templating engine), or...
Drop in the fully rendered HTML as supplied from delete_item.cfm, replacing the older version that originally contained the item you're deleting.
Example:
/* success handler from above */
function(data){ // data is what's returned from delete_item.cfm
// Assuming it's fully rendered HTML post-deletion:
$('#container_of_your_list')
.html( data ) // drop in new data
.effect('highlight',{},2000); // visual feedback to user
}
Absolutely. When you make an AJAX request, you're making the request as the user... so if you make any changes to session, it will make those changes on the user's session. That being said, if you want to redraw the cart page, you'll need to do all of that with client-side javascript, just like you're making the AJAX call.
This is probably going to get a resounding no, but I am wondering if it possible to have the URl change dynamically with using hashing, and without invoking a http request from the browser?
My client is keen on using AJAX for main navigation. This is fine, when the end user goes to the front page first, but when they want to use the deep linking, despite it working, it forces an extra load time as the page loads the front page, then invokes the AJAX from the hash.
UPDATE: Could it be possible, given that what I want to avoid is the page reload (the reason is that it looks bad) to stem the reload by catching the hash with PHP before the headers are sent, and redirecting before the page load. This way only one page loads, and the redirect is all but invisible to the user. Not sure how to do this, but seems like it is possible?
Yes, this is possible. I often do this to store state in the hash part of the URL. The result is that the page doesn't reload, but if the user does reload, they're taken to the right page.
Using this method, the URL will look like: "/index#page=home" or "/index#page=about"
You'll need to write a JavaScript function that handles navigation, and you'll need a containing div that gets rewritten with the contents fetched from AJAX.
Home
About
Questions
<div id="content"></div>
<script type="text/javascript">
function link(page) {
location.hash = "page="+page;
loadPage(page);
}
// NOTE: This is using MooTools. Use the AJAX method in whatever
// JavaScript framework you're using.
function loadPage(page) {
new Request.HTML({
url: "/ajax/"+page+".html",
onSuccess: function(tree, elements, html) {
document.id('content').setProperty('html', html);
}
}).get();
}
</script>
Now, you'll also need to have something that checks the hash on page load to load the right content initially. Again, this is using MooTools, but use whatever onLoad method your JavaScript framework provides.
<script type="text/javascript">
document.addEvent('domready', function() {
parts = location.hash.split('=');
loadPage(parts[1]);
}
</script>
Ok, the problem is that opening an AJAX link of the form http://example.com/#xyz results in a full page being downloaded to the browser, and then the AJAX-altered content is changed once the page has loaded and checked the hash part of its URL. The user has a diconcerting experience.
You can hugely improve this by making a page that just contains the static elements - menus, etc. - and a loading GIF in the content area. This page checks its URL upon loading and dynamically fetches the content specified by the hash part. The page can have any URL you want; we'll use http://example.com/a. Links to this page (http://example.com/a#xyz) now provide a good user experience for users with scripting enabled.
However, new users won't come to the site by fetching http://example.com/a; they'll fetch http://example.com. This is fine - serve the full page, including the home page content and links that don't require scripting to work (e.g., http://example.com/xyz). A script run on loading this page should alter the href of AJAXable links to their AJAX form (http://example.com/a#xyz); thus the first link a user clicks on will result in a full page load but subsequent ones won't.
The only remaining problem is is a no-script user gets sent an AJAX link. You can add a noscript block to the AJAX page that contains a message explaining the problem and provides a link back to the homepage; you could include instructions on how to enable scripting or even how to modify the link by removing a# and pressing enter.
It's not a great answer, but you can offer a different link in the page itself; e.g., if the address bar shows /#xyz you include a link to /xyz somewhere in the page. You could also add a link or button that uses script to bookmark the page, which would again use the non-AJAX form of the link.