Javascript Tooltip / Posts /

How to use ajax cache in javasrcipt tooltip

20
How to use ajax cache in javasrcipt tooltip so that tooltip need not to hit server again and again if data is not changing.
Piyush Goyal  11 years ago   viewed: 8230    

2 Answers

1
It seems it is also related to how the client sets his browsers.

For example, if I use my Chrome browser to hover the last Example link in the "3 Ways to Set Tooltip Content" section under the "How to Use" tab on page http://www.menucool.com/tooltip/javascript-tooltip#view2, I can always see the spinning image that means it always hit the server. I did another test similar to the post http://www.menucool.com/2129/AJAX-not-refreshing-the-tooltip-content, I can see the tooltip content will change whenever the test.txt content is changed. But with my IE 10 that has set "Automatically check for newer versions of stored pages", I found I can only see the spinning image for the first hit in the first test, and for the second text, the tooltip content is still the same even if the test.txt content has been changed.

I just read Milo's post in this thread and did his test. Sure it keeps the same number after "Hello" every time within the 20 seconds, with either my IE or Chrome.

Then I removed the line <%@ OutputCache Duration="20" VaryByParam="none" %> from the test.aspx page, but it still always get the same number after Hello if testing with my IE. But with my Chrome, the number is always updated.

So my current understanding is:
1. Browser setting will determine if to fetch page from the temporary browsing history in my local machine, or from the server.
2. The page caching setting configured by developer will determine if to give out the content from the cached repository on the server at the moment, or give out the fresh content. 

Correct me if I am wrong. Some of my testings are under my localhost server. I am not sure if that is accurate. 

BTW, I don't know how to set Chrome browser to get page from browsing history(or cache) instead of the fresh copy form the server.
Dong Li   11 years ago
0

You need to cache the page that the Ajax call will visit. 

For example if you page is ASP.NET, you can add this declaration to your aspx page:

<%@ OutputCache Duration="20" VaryByParam="none" %>

Below is the code I write for the testing:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="menucool.tooltip.test" %> <%@ OutputCache Duration="20" VaryByParam="none" %> <!DOCTYPE html> <html> <head><title></title></head> <body> <form id="form1" runat="server"> <div>Hello "<%= myCOUNTER %>"</div> </form> </body> </html> And its codebehind: using System; namespace menucool.tooltip { public partial class test : System.Web.UI.Page { protected static int myCOUNTER = 0; protected void Page_Load(object sender, EventArgs e) { myCOUNTER++; } } }

And below is the testing link in another page:

<a class="tooltip" onmouseover="tooltip.ajax(this, 'test.aspx',null, {position:0});">cached content</a>

or in a SEO friendly way:

<a class="tooltip" href="test.aspx" onclick="return false;" onmouseover="tooltip.ajax(this, 'test.aspx',null, {position:0});">Hijax way</a>

Testing result:

Mouse over the testing link many times, and the number after "Hello" did not change within 20 seconds.

Milo   11 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲