How do I get jQuery to fire every time the page is loaded, even from the cache?
The site I am developing has a page that lists all users on the site (and some other information) in a table. This page is identical to everyone who logs in (at any given time, at least), with one difference - their own row is highlighted. So it seemed to me that this would be a perfect candidate for caching - we don't need every user that lands on this page to recalculate and display data on the page when only one thing changes.
I tried to handle this by adding output caching to the page and moving the table row selection to JavaScript (jQuery call) - I hope this page will be cached, but JavaScript will run every time someone hits it, causing their row to be highlighted ... However, this does not seem to be the case. If I hit the site first, my line gets highlighted. Then, if someone else clicks on the page during the cache's lifetime (on a different machine, so it's not the browser's cache), they see the page with their allocated row, not their own, as long as the cache will not expire - and then everyone sees the line allocated to those who got to the next page, and so on. It looks like it is serving the cached version of the page after the JavaScript has been executed, instead of serving the cached version of the page.and then run JavaScript.
Is there a way to do what I'm trying to do - cache the page so that I don't have to make ASP.NET calls every time someone hits the page, but every time the page is loaded a different row is highlighted? Or, if not with JavaScript, is there a way to do this? I was thinking about using setInterval to check the selection (and re-allocate the correct line) at regular intervals, but this seems like an overkill since it only needs to be done once after the page has loaded and never done until the page is reloaded.
Here are the relevant parts of my aspx file:
<%@ OutputCache Duration="60" VaryByParam="none" %>
<script type="text/javascript">
jQuery(document).ready(function($) {
var isAuthenticated = ('<%= Context.User.Identity.IsAuthenticated %>' == 'True');
if (isAuthenticated) {
var owner = '<%= Context.User.Identity.Name %>';
$('#' + owner).css("background-color", "#bdf");
}
});
</script>
<table>
<tr>
<th>
Owner
</th>
...
</tr>
<% foreach (var item in Model.Items) { %>
<%= String.Format("<tr id=\"{0}\">", item.Owner) %>
<td>
<%= Html.Encode(item.Owner) %>
</td>
...
</tr>
<% } %>
</table>
source to share
The page is cached after evaluating values such as Context.User.Identity.IsAuthenticated
. Therefore, although JavaScript is executed on the client, it already contains the specific values (your values) from the cache.
To do it right, you can either
- remove these values completely from the script and execute an AJAX request to see who is logged in. But remember that highlighting won't work at all if JavaScript is disabled in the browser.
- cache the page for each user
source to share
I have no experience with ASP.NET, but it seems to me that the caching engine just executes the code on the first hit, generates HTML, caches it, and provides that generated HTML to everyone who navigates to this page until the cache expires.
This means: JS is executed correctly - the line is highlighted, but the variable owner
always contains the username of the first person to get to this page. You can easily check if this is the case by doing "view source".
Say I don't think you can use this caching mechanism for your scenario.
source to share
You can try to use the Substitution element to insert a dynamic logged in username into your cached page (that's for).
To use it, you first need to create a static method for your page class that is called by the Substitution control and returns a string containing the javascript you want to insert.
public static string GetCurrentUserInfo(HttpContext context)
{
bool isAuthenticated = context.User.Identity.IsAuthenticated;
string owner = "";
if (isAuthenticated) owner = context.User.Identity.Name;
return string.Format("var isAuthenticated = {0}; var owner = '{1}';", isAuthenticated, owner);
}
Then you add the control to your script tag:
<script type="text/javascript">
<asp:Substitution ID="ownerInfo" runat="server" MethodName="GetCurrentUserInfo" />
</script>
Visual Studio won't like it if you put the control there, but it will still function as expected. Now you can use variables isAuthenticated
and owner
in your jQuery method.
source to share
You can only cache list items, not user authentication. I don't come across asp often, so I can't tell you how to cache only parts of your site. But I will try to either deliver the javascript as a separate page (with the same url for each user) where you can output the current username that is being referenced by a "static" list. Or you can try to make your js static by getting username / authentication from cookies that are stored separately for each user.
source to share