Initializing AJAX Elements

One of the advantages of working with jQuery is the convenient availability of robust, cross-browser AJAX functionality. In case you're not familiar with the concept of AJAX, it's a way of loading parts of your web page dynamically in response to JavaScript events.

For example, you might want to load a different large image in your gallery preview panel depending on which thumbnail a user clicks. You don't want to load all those images with the rest of the page because you don't know which ones will be needed. So you set them to be loaded using an AJAX call one at a time, depending on which thumbnail a visitor clicks. That way only the images that are actively chosen will be loaded.

Using AJAX, a developer can also make sections of a page load separately. If those page sections contain any elements that rely on Uranium data attributes, they can be initialized by issuing a call to the Uranium() function on the jQuery selector for any element wrapping the content being loaded in.

For example, if you had a page that loaded a new Uranium toggler into a <div>, you would just need to invoke a jQuery selector for the <div>, and call the Uranium() function on it.

Original page contains this <div>:

  <div id="loadHere"></div>
  

A separate file with a snippet of HTML (e.g., new-fragment.html):

  <p data-ur-toggler-component="button" data-ur-id="MyToggler">
    This toggler is loaded dynamically
  </p>
  <ul data-ur-toggler-component="content" data-ur-id="MyToggler">
    <li>This</li>
    <li>Was</li>
    <li>Loaded</li>
    <li>Dynamically</li>
  </ul>
  

Sample jQuery to load the snippet and initialize Uranium on that snippet:

  $(function() {
    $("#loadHere").load("./new-fragment.html").Uranium();
  });