A common way to load additional HTML content is through asynchronous connections, commonly called AJAX (Asynchronous JavaScript and XML), but it is common to use AJAX to refer to all asynchronous JavaScript. Let's take a look at having Fancybox load content from our server asynchronously.
Up until this point all of the examples can work without a web server. If you have not been running examples on a web server, you will need to use one for this example. It does not matter which one you use, though I would recommend using a package that includes Apache such as WAMP if you are on Windows, MAMP if you are on Mac OS X, or XAMPP for Linux. A web server is required because JavaScript has a security feature that prevents communication with any server besides the one the original file was served from. If we do not use a server, it cannot determine the origin of any connections it attempts to make. If it cannot match the origin of the original connection, it cannot ensure that connections are being made to the same server, so it will prevent any connections from being made. For more information regarding the same-origin policy, see the Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript.
The first thing we need to do is to create a file to load asynchronously. Let's call the
async.htmlfile. This file should be created at the same directory level as theindex.htmlfile.Next, we'll add some content to the file, so we can see that it is being loaded by Fancybox as follows:
<style type="text/css"> .special { color: lightblue; background: black; padding: 5px; } </style> <div class="special">This content has been loaded asynchronously!</div>Here, we have a
styleblock with some inline styles to make the content stand out more, and adivtag with some text in it.Now we need to create our link on the
index.htmlpage as follows:<a class="show-popup" data-fancybox-type="ajax" href="async.html">Load Asynchronously</a>
The link has a
show-popupclass and uses thedata-fancybox-typeattribute to tell Fancybox what type of data is being loaded.Clicking on the link will make the HTML from
async.htmlbe displayed in Fancybox. You may briefly see the loading animation while the file is being loaded from your server, but since this is such a small amount of data, the loader will only display for a brief duration.
Fancybox is actually doing quite a bit of work for us behind the scenes here. It relies on the jQuery ajax function to make the actual asynchronous request. Fancybox also provides us with a loading animation, which it displays and hides at the appropriate times, and provides a generic error message that will be displayed if the content we attempt to load doesn't exist. Fancybox then takes the ajax response (in this case, our HTML) and appends it into the Fancybox pop up.
The example we loaded just contains some simple HTML content and CSS. However, you can make a request to any kind of file. This means that you can request any file just like you would load it in the browser by entering the URL in the URL bar.
Fancybox provides us with a lot of flexibility with its AJAX functionality. We can make a handful of customizations to the jQuery XHR object and change the HTML that is used for the error message.
The generic error message used by Fancybox doesn't do much to tell the user what happened. Let's change the error message to make it easier for the user to know what they should do or try in case of an error. The error message that Fancybox provides is as follows:
The requested content cannot be loaded. Please try again later.
We can change the error message by leveraging the tpl (short for template) setting. In the tpl object, we can provide an error message to use, which can be any HTML. Let's change the error message to something different. In the scripts.js file, change the call to Fancybox to include the error template:
$('.show-popup').fancybox({
tpl: {
error: "<p>This is a different error message</p>"
}
});In the given code, we are passing an object to Fancybox with a tpl property. The tpl property is also an object and has a single property of error. The error property has our new error message. To see the error message load in Fancybox, simply change the href attribute of the link in the index.html file to point to a file that doesn't exist, shown as follows:
<a class="show-popup" data-fancybox-type="ajax" href="async-missing.html">Load Asynchronously</a>
Because the async-missing.html file doesn't exist on the web server, Fancybox will display our new error message.
Fancybox allows us to provide additional settings to the jQuery AJAX request. Fancybox provides some default settings for AJAX requests, but we can override them. The ajax property of the settings object can contain any of the settings exposed in the jQuery ajax function, except for the few settings that Fancybox overrides. Fancybox overrides these ajax settings: error, url, and success.
The jQuery API provides exhaustive details on the functionality of the jQuery AJAX functionality. The API can be found at http://api.jquery.com/jQuery.ajax/. In the following example, we are simply going to log a message to the console before the AJAX request is made to our server:
$('.show-popup').fancybox({
ajax: {
beforeSend: function(xhr) {
console.log("About to send a request with XHR object: ", xhr);
}
}
});The given code will log a message to the console and the jQuery XHR object that represents the request. For more details on the jQuery XHR object, see the jQuery AJAX API page's link mentioned previously.
Now, anytime Fancybox is about to make our AJAX request, the function set in the beforeSend property will run. This is one of the many properties that can be set in the AJAX object; the full list is provided in the jQuery API at the link mentioned previously.