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;
Related
I was reading up on ajax and how it empowers us to exchange data with a server behind the scenes and consequently avoid full page reloads. My confusion lies here, I don't really understand what full-page reloads mean. I think it's probably cause I've been working with ajax/react since the start I guess and have not really seen any webpage of mine fully reload when I access stuff from a database or an api.
It'd be great if someone could explain what they are and why did we need them before ajax?
A full page load is where the entire page is downloaded from the server. A page typically consists of several sections: header, footer, navigation, and content. In a classic web application without AJAX, a user clicks on a link to another page, and has to download the full page, even though only the main content is changing. The header, footer, and navigation all get downloaded again even though they don't change.
With AJAX there is the opportunity to only change the parts of the page that will change. When a user clicks on the link, JavaScript loads just the content for that link and inserts it into the current page. The header, footer, and navigation don't need to reload.
This introduces other problems that need attention.
When AJAX inserts new content into the page, the URL doesn't change. That makes it difficult for users to bookmark or link to specific content. Well written AJAX applications use history.pushState() to update the URL when loading content via AJAX.
There are then two paths to get to every piece of content. Users can either load the URL containing that content directly, or load the content into some other page by following a link. Web developers need to test and ensure both work.
Search engines have trouble crawling AJAX powered sites. For best compatibility, you need to employ server side rendering (SSR) or pre-rendering to serve initial content on a page load that doesn't require JavaScript.
Even for Googlebot (which executes JavaScript) care must be taken to make an AJAX powered site crawlable. Googlebot doesn't simulate user actions like clicking, scrolling, hovering, or moving the mouse.
Content needs to appear on page load without any user interaction
You must use <a href=...> links for navigation so that Googlebot can find other pages by scanning the document object model (DOM). For users, JavaScript can intercept clicks on those links and prevent a full page load by using return false from the onclick handler or event.preventDefault() in the click handler.
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.
I am just curious to know how these websites were made to load only once. If you go to the sites http://fueled.com/ or http://ecap.co.nz/, the browser shows the spinning wheel only the first time the website is loaded. When you navigate to other pages from the navigation menu, like About or Contact or Team, when those pages load, the browser doesn't show the spinning wheel.
How do they make them work like this?
It is because page load is not triggered upon those links. Instead, a post request is triggered and its response will be used. Also, further page loads will be quicker, since scripts, styles and pictures will be cached, that is, saved locally on your computer.
You can check what happens using the browser console's network tab. Click on the last request before you click on such a link. You will see that the request log will not be cleared, but other requests are added. That means there is no page load in the meantime.
If you carefully notice facebook, you will understand that the when you visit one page to another then the whole page is not refreshed or redirected but the URL changes when navigating to new page. It is more clear when chat windows are open, they remains static during page loading. As other website does this by using the # but facebook does not.
There is another example came to me: http://www.davidwalsh.name/. Visit the site and open other pages within their site and you will understand what I mean. Don't forget to notice the URL change.
How they do this?
Added More: I want a way that the page content will be loaded with ajax, change the URL for bookmark feature but when changing URL it should not reload / refresh the page by not using # (hash).
You have two questions:
For the URL change you can put the path instead of the # in the href property of the anchor (e.g /otherlink).
For opening the chat or opening some div does not require to send it in the url, its the onclick event on the div and its expands. Also the chat remains open may be thay set cookie or flag when the chat is first time opened and checking and changing the chat with flag they are setting.
As suggested by #andytuba
For Facebook, Google "hash navigation ajax".
For DavidWalsh, google "history API".
I am trying to implement a search page with 2 tabs: Basic Search Options and Advanced Search Options. The Search button is outside the tab at the bottom of the page.
I am trying to figure out which switchType to use on the rich:tab component. richfaces offers 3 switch types:
ajax
server
client
I don't understand when someone who use one over the other.
Can someone explain succinctly when/how you would use the different switchTypes?
Thanks in advance!
April26
Examples of the three types here.
Ajax - When the tab is clicked on the body of the tab is requested from the server without refreshing the entire page. This makes the initial load time of the page with tabs faster than client switching and allows the user to click between tabs without refreshing the entire page.
Server - When the tab is clicked on the entire page is refreshed to get the body of the tab. Use Server switching when you want to keep the tab page load time down but don't want any ajax code. Clicking between tabs is not very smooth looking.
Client - All tab bodies are loaded when the tab page is loaded. The initial load of the page is slower but switching between tabs is much faster for the user.
I've created several pages that use RichFaces tabs and they all have used client switching. It makes the tabs more usable if the user doesn't have to wait when they click on a tab.