After I click on specific anchor on some html page (with usual browser), a new appears on the page, what I can see with Chrome's instrumental tool. No reload of the page occur, it's just new at the end of the page. But when I click on the anchor using HtmlUnit ( HtmlPage page = anchor.click() ) it starts to reload the whole page.
So the main question is how to click on the anchor without provoking a page reload. The second question is how to obtain an updated, not reloaded page, cos' the construciton itself "HtmlPage page = ... " looks like we're about to get a new, reloaded page.
There is no way to 'click on the anchor without provoking a page reload'. There is no way in a real browser so there is also no way to do this in HtmlUnit.
If you are facing this kind of problems you can try to get this solved:
use the latest snapshot version of HtmlUnit.
use some proxy to monitor the real traffic (like Charles WebProxy). Do it for both, the real browser and HtmlUnit.
check for differences in the traffic
if you see some differences try to figure out why this happens. Usually there is a javascript function that does not work the same way as in the real browser.
if you can point to a single js problem open an issue (see Submitting Javascript bugs for more details)
(optional) provide a patch
The time to fix your issue usually depends on the amount of details you provide.
Related
Recently I've been trying to run an experiment on my onepage checkout with optimizely (secure page) and I can't seem to get it to load my cookie data.
I followed optimizely's guide to make session specific information load but have had no luck.
Open your site in a browser tab and navigate to the page you wish to edit. This may entail logging in, adding an item to your cart, or completing a portion of a form. Take the exact steps that get you to the page into the form you want to edit.
Next, open Optimizely in an adjacent tab within the same browser and create an experiment using the URL of the page you’d like to test.
Why? The editor will load the page as it would appear if you went directly to the URL in another tab; once you can repeatedly load the page into a separate tab, then Optimizely should be able to load the page within the editor.
Please help.
You have probably forgotten to allow the Javascript to be run, certainly in Chrome you have to click the little silver shield in the browser address bar to enable Optimizely to load in from the other browser tab;
I am developing a web app/message board in AJAX. Ive come to the part where I need to decide how to display threads.
Should I refresh a completely new page for each thread? Or load it via AJAX. Obviously, I want each thread to be crawlable, linkable, and saveable as a favorite in your browser.
Then I saw USAToday's website (www.usatoday.com/news). Its very interesting how they load the page through a popup window, change the URI, and keep the data in the background.
This is exactly what I want, but I don't know what they are doing.
Can anyone else decipher this or lead me down the right path?
My impeccable googling skills has led me to believe that the answer lies in pushState.
http://www.seomoz.org/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate
Essentially, it appears they are...
using the HREF of the provided link to change the URI via pushState.
using AJAX to load the contents of the page accessed via the link.
on close, they most likely use data from the newly loaded page to figure out what section its was under(sports, entertainment, etc), and reload that page.
I am coding a website for a client and they requested that because they have so many sidebar pages under one parent, that when the page link is clicked, it loads in the same area every time without the page reloading. They also requested that the URL changes on reload and that you can visit each page by going to that specific url. Unfortunately, I don't know how to do this. I have found a lot of tutorials and snippets that are half way there but they don't offer the exact functionality.
For example, if you go here: http://lookseewatch.com/independentinsurance/commercial-insurance/
You'll see a long sidebar of different types of commercial insurance they offer. When you click on "Automobile," or any link for that matter, the page should be loaded into the div area on the right of the sidebar. The url then should change to reflect this change to http://lookseewatch.com/independentinsurance/commercial-insurance/automobile/. All of these pages are separate and dynamic in Wordpress.
Can anyone offer me some assistance? This is currently how the sidebar is being generated:
wp_list_pages('title_li=&child_of='.$post->ID.'');
Let me know if you need any other code from me or have any questions about the functionality.
Thank you!
This is kinda complicated. There are a lot of ways of catching user events, stopping default behavior and running custom code over it. For exemple, you can listen to anchor clicks and return 0 to not load their links.
But if you change URL in browser address bar, as long as I know, a JS can't control it, because it's outside of a webpage domain, and controling browser components from an external webpage would open a lot of security flaws.
This looks like they wanna avoid banners loading to count less hits :P If performance is the issue, first of all you can use a cache plugin, that will store in HD all DB queries, and use those files in future pageloads instead of making new queries.
You can also build a full sidebar into a PHP variable, cache it in HD and read from there, instead of building the whole code everytime. It will be like adding static HTML snippet.
This can be done with a technique called pushstate combined with AJAX. There's a great jQuery plugin that's called PJAX that implements this. http://pjax.heroku.com/
I have just published a plugin called WP-PJAX that makes to whole wordpress site PJAX driven. I'm not sure if this solves your problem, but it might be something for you.
https://github.com/pelmered/wp-pjax
The problem is this:
When I change the content on a page via AJAX and then use the browsers back and forward button to go to the same page, then I will be presented with the content of the page before the AJAX was executed.
This seems to be specific to IE (confirmed on version 8), as Firefox will render the last version of the page.
Just to clarify, I don't need (nor want for usability reasons) to replay the AJAX calls when clicking back/forward.
We were thinking about firing the last AJAX call on page load (if that event is even triggered), but we would like not to force everyone to wait through the additional AJAX call when going to the page the second time, also this would cause the first real load of the page to be slower as well.
Maybe someone has a good solution for this?
I think it will be useful : http://www.ibm.com/developerworks/library/os-php-rad2/ ;)
I am trying to implement content browsing like it is done on Facebook when user is browsing the photos. I guess everyone is familiar with that photo browsing where you can click "next" and "previous" and immediately get the next or previous photo (you can also navigate using arrow keys).
When you click "next" for example you notice that the page does not refresh - only the content. At first I thought it is done using plain ajax calls which refresh only the "content" in this case the image, description and comments. But then I noticed that also URL in the "Location" toolbar of my browser is changed!
I tried to inspect this using Firebug and discovered that when you click "next" only the next photo is downloaded and I still don't know from where the comments & image meta data (description, time, tags,...) are loaded.
Can someone please explain how this technique is done - page URL changes without page refresh (or even without page "blinking" if it refreshes from cache).
I know how to change page content using ajax but URL of that page stays the same all the time. If I click on "refresh" button I get the first page again. But not on Facebook since even the "window.location" is changed every time without actual redirect.
The other thing I noticed is that the bottom toolbar (applications, chat, ...) is "always on top". Even if you change the page, this toolbar is not refreshed and always stays on top - it doesn't even "blink" like other pages that are refreshed (either from webserver or from local cache). I guess this is the same technique as above - some kind of "fake" redirects or something?
The Answer is pushState
if (window.history.pushState)
window.history.pushState([object or string], [title], [new link]);
You will smile :)
I've tried to change through facebook images, and this is what I saw:
In Firefox:
The page URL is not changing. Only the hash is changing. This is a technique used to allow crawlers to index the content. What happens is this:
User clicks on "next"
JS loads the next image with tags, comments, etc and replaces the old content with them.
JS changes the hash to correspond the new image
urls look like this:
http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121 (notice the hash)
As for the second question, this is just a benefit of the technique above. When you are on facebook, the page rarely gets actually refreshed. Only the hash is changed so that you can send links to other people and crawlers can index the content.
In Google Chrome:
It seems that chrome hassome way to change urls without refreshing the page. It does that by using window.history.pushState. Read about it here.
urls look like this: http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121 (notice that there is no hash here, but still the url is changing along with images)
In Epiphany:
Epiphany doesn't change the URL when the image changes.
urls look like this: http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121 (there is no hash, and the URL stays the same when changing the image)
(don't have other browsers to verify right now)
The one technique not mentioned here is the window.onhashchange() method (supported in ie8+ and most others) which they might have used
You may noticed that the page url remain the same. What is changed, however, is page hash (the part after # in the url).
You need something like this: http://code.google.com/p/reallysimplehistory/