Ajax Requests Saved on Browser's History - javascript

Is there an easy way to save ajax requests into a browser's history so that when you use the back button it will preserve the last state of the DOM?
Websites like twitter and digg that use an ajax pager have a usability flaw where if you click next page several times then click away from the site and then return using the back button, you lose your place in the viewport since the DOM is restored to the first initial request.
I noticed safari actually preserves the dom after a few ajax requests on some sites.
Here is an example, Goto http://13gb.com, Click next a few times then click on an image and then click your back button. On webkit it preserved the last DOM state, but on gecko and ie it does not.
What would be the easiest way to replicate this functionality on other browsers?

I'm not the first person to tackle
this type of problem. I've drawn
inspiration and know-how from several
places to get this up and running:
The original bookmark/back button fix,
as used by Flash developers for a
little while now:
http://robertpenner.com/experiments/backbutton/flashpage.html
I've not actually looked at how they
implemented their solution but this is
where I got the idea for replacing
Robert Penner's frames with iframes:
http://dojotoolkit.org/intro_to_dojo_io.html#so-about-that-thorny-back-button
Rich Rutter's use of the hash for
bookmarking:
http://clagnut.com/sandbox/slideshow.html#5
For this little experiment I've used Harry Fuecks' JPSpan
It's a fantastic framework that makes the methods you define in your server-side PHP classes available to your Javascript via XmlHttpRequest.
It's the simplest way I've come across
to get started with AJAX. I had the
guts of my demo up and running in
about 10 minutes! I'm using
Algorithm's Timer object:
http://codingforums.com/archive/index.php/t-10531.html
And Scott Andrew's cross-browser event
handler:
http://scottandrew.com/weblog/articles/cbs-events
Source: http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps
For jQuery:
https://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin

You may be interested in the jQuery History plugin:
http://tkyk.github.com/jquery-history-plugin/

Related

Improving IE8 Performance with select2 v3.4.8 Library

I am trying to improve performance of the select2 v3.4.8 library in IE8.
Essentially, I have narrowed the problem down to the call from the SingleSelect2's opening method to the parent AbstractSelect2's opening method. The method call I am speaking of is this one:
this.parent.opening.apply(this, arguments);
I have seen this call take upwards of 5 seconds to complete. In some instances, it has taken up to 10 seconds to open the dropdown in IE8.
I've made some performance improvements already. For example, rather than constantly adding the:
<div id="select2-drop-mask" class="select2-drop-mask"></div>
to the DOM programmatically, I just added it directly to the markup and set it's display:none. This saves quite a number of cycles because apparently, adding elements to the DOM in IE8 is expensive to do from Javascript.
But I still want to get more performance improvements than this. We have only increased performance by about 10-20% by making this change.
Does anyone have any suggestions for me?
We've already cached the data to display in the dropdown on the client on page load. So, there are zero server calls being made when the dropdown is opening. The performance bottleneck is entirely inside the select2 library itself.
Unfortunately, we are unable to upgrade our select2 library. Doing so would be at least an 8-Point User Story, so it's prohibitive at this time for us to undertake an upgrade.
Thanks to anyone who's able to help!
-classTemplateT

Auto-refresh HTML tab in internet explorer

I made a nice website that does a lot of DOM manipulation. Works very nicely in chrome and firefox. Though the client has requested now that it also works in Internet Explorer. The latest version is good enough to start with (that would be 10.0.9200.16721 in my case).
So the adventure starts, i press F12 and see a set of pretty familiar developer tools (coming from chrome and firebug). As i'm tracking the JS code i notice that the HTML tab (with the DOM) doesn't actually update.
According to the manual here http://msdn.microsoft.com/en-us/library/ie/gg589512(v=vs.85).aspx it's "a good idea to refresh the HTML tab to get the current DOM, especially when you use dynamic elements." (d0h ??) problem is .. i can't find a button to enable automatic update of the HTML tab. So i would have to click the refresh button everytime i step into a new line of JS (never mind of real-time DOM view).
But that's not all ... every time i click the refresh button the whole DOM tree view collapses. And i have to click a bunch of pluses to view the node i'm interested in.
Does anyone have a solution for this? Because what would take days will take weeks this way...
Duplicate of How to inspect elements on dynamically created DOM by using IE developers tools
From doing a little digging aroung, it seems like this is an issue other people have reported too. This thread might be of some interest to you.
The most relevant part of it:
The problem is when you modify the dom (with or without jquery) from a callback which is called by a timeout, which is in a callback bound to an event, IE freaks out and doesn't update the dom tree in the development tool. Subsequent modifications to the changed tag in the dev tool won't have any effect.
According to my tests, it's the combination of that sequence of calls that make this happen. If the dom is modified from a settimeout callback but without being inside of an event callback, it works. If instead of settimeout you directly call a function that modifies the dom, it works.
Here's a working example of what you're saying to compound the issue.
Basically, this is an issue with IE. There is no fix available at the moment. The accepted answer on the other thread seems like a very poor workaround.

"Stop running this script" error in IE7 and IE8 while trying to navigate to another page

I have created a Drupal website that uses Openlayers to display maps. In one of these maps there are some "Filters" which the user can use to dynamically change the data shown in the map. The data are related to countries are shown as bubbles over the countries. The bubbles are drawn using Openlayers' API. A good amount of calculations go behind the scene while filters are selected. I have used setTimeout to avoid long running loops. The filters work fine. However, after a number of filters are clicked (e.g. if 12 filters are clicked), if the user tries to move to another page by clicking a link, in IE7 and IE8 the following error shows -
"Stop running this script?
A script on this page is causing your web browser to run slowly.
If it continues to run, your computer might become unresponsive."
This error does not show in any other browser and does not show in IE7, 8 until a link is clicked. Any pointer in this regard will be highly appreciated.
UPDATE : The problem was in OpenLayers' event cache. OpenLayers's clears the event cache in the window unload event and this was getting stuck in IE7 and IE8 (I am not sure why). So far I have been able to solve the issue when user clicks another link, by calling OpenLayers.Event.unloadCache() on click of normal links.
jQuery can be very resource expensive. The articles linked bellow gives you 10 good advices to perform better your jQuery applications. The most useful for me (I had the same problem a month ago) was to replace $.each() with traditional for lops and to replace extensive DOM construction with jquery templates. Also the use of ID instead of classes and to give a context for the selectors, selector caching, and so on.
This list is ordered using my own criteria of "usefulness" in the advices.
10 ways to instantly increase your jquery performance
improve your jquery 25 excellent tips
10 advanced jquery performance tuning tips from paul irish
8 jquery performance tips
You need to optimize your client script. Please refer to answers here.

Listen to HTML/CSS events of web page

I'm looking for a way to listen for an event in the HTML/CSS of a webpage. Basically, a website I use at work lists queues and appointments, which flag as yellow/red based on the amount of time late on taking said appointment. Other than this visual aide, there is no alert of any kind, which is a failing point if one is juggling multiple windows and doesn't notice.
What I would like to do is put together a simple way to watch for the tag ID or perhaps the flag hex color, and then alert me in a way of my choosing.
The work environment is on OS X, so I presume I'm looking at an Objective-C centric solution unless Applescript is capable of doing this.
Any help would be greatly appreciated.
I know you didn't tag jQuery, or JavaScript, but a custom bookmarklet may be the solution.
As it so happens I created a bookmarklet utility a while back so that you can keep your bookmarklet in an external script file.
You could then have alert or confirm called automatically for some event on the page.
Are you able to specify the browser your users use? If so, Chrome has support for HTML5's out of browser notifications, ala: http://slides.html5rocks.com/#notifications-api
You could get a reference to the dom elements you want to monitor, and use setInterval() to poll the data you are looking for on some interval, alerting when it changes.
See this fiddle for an example.

Fading effect on Google homepage? Is it AJAX? [duplicate]

This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
How does Google achieve the fading effect on the home page?
Hi All,
If you visit Google, notice that when the page loads it is very sterile. Upon moving the mouse many elements of the web page now appear in front of you.
How is this done? I think that it is pretty neat.
Is it AJAX?
No it's not AJAX. It is regular JavaScript.
You may want to check the following post:
How does Google achieve the fading effect on the home page?
Technically, no, it's not AJAX.
AJAX officially stands for Asynchronous Javascript And XML, and colloquially refers to any communication between the browser and the web server without a full page load. Those elements are already on the page from the initial page load, and are simply revealed via Javascript (not retrieved from the server).
Any major Javascript effects library can achieve the effect you describe. See e.g. jQuery and Scriptaculous.
It's not AJAX. Ajax is this.
What you're seeing is probably a mix of CSS/Javascript animation techniques. One example can be found on this CSS Animation page from the webkit site
Have a look at jQuery, they have a function called fadeIn.
That is not what Google is using, but it is (probably) the simplest way you can recreate it.
Also, AJAX stands for Asynchronous JavaScript And XML, which is just another (friendlier) name for XMLHttpRequest. XMLHttpRequest is a way of sending data to and from the server without refreshing the entire page. When you view images in an album on Facebook and click on it, it loads the new image witohut refreshing the page. That is AJAX. Google (and jQuery's fadeIn) are what used to be called DHTML (Dynamic HTML), that is, clever JavaScript programming.
This is done using regular Javascript.
Google uses the mousemove event to find out when the mouse moves, and the setTimeout function to create a timer that gradually fades in the content.
This can be done by using CSS+Javascript, changing the value of opacity (for non-IE browsers) or the opacity level of the DXImageTransform.Alpha filter (IE only), through a setInterval().
Please try to understand what AJAX is before making questions like this!
If you knew what ajax was you would know that the fade in of the options in google has nothing to do with AJAX

Categories