Ajax Content

1. Overview

  • Ajax loading is only useful for updating content area without reloading the whole page.
  • If your application data and sections depend a lot on dynamic loading via ajax, you may need more advanced solutions such as AngularJS which requires some work to integrate with the template.
  • In demo ajax pages some pages are not included such as horizontal menu page and jQuery UI page.
    This is because for horizontal menu, layout changes as well.
    And for jQuery UI when loading jQuery UI library, tooltip and datepicker override Bootstrap's.
    This wouldn't be a problem, since in your app you either use jQuery UI datepicker or Bootstrap datepicker, but not both. Same is true for tooltips.
  • To enable ajax loading the link element should have data-url attribute which will be used to retrieve content:
      
    
  • Inside .page-content, you should have a .page-content-area element which will be updated with new content.
  • And the new content should be something like this:
     New Title
     
     
     
     
     
  • Before loading content, you should have a basic empty layout.
    For an example you can see html/ajax/ajax.html file.

2. Options

  • You should call ace.enable_ajax_content function and provide the following options:
    • content_url: a function that returns a url to retrieve
    • default_url: default url to load
    • loading_icon: the icon to show when loading new content. Default is "fa-spinner fa-2x orange"
    • loading_text: the text to show when loading new content. Default is ""
    • update_active: whether to update "active" state of newly selected link and its parents. Default is true
    • update_breadcrumbs: whether to update breadcrumbs. Default is true
    • update_title: whether to update window title. Default is true
    • close_active: whether to close submenu of previously active items or not. Default is true
  • If your new page content has title tag and update_title option is true (which is the default), window title will be updated.
  • An example would be something like this:
    ace.enable_ajax_content(jQuery, {
      content_url: function(url) {
    	//this is for Ace demo only, you should change it
    	//url is the value from document url hash
    
    	//take "url" param and return the relevant url to load
    	return "content/"+url+".html";
      },
      default_url: 'homepage.html'//default url
      ,
      loading_icon: "fa-cog fa-2x blue"
    });
    

3. Loading JS & CSS Files

  • To add new styles to a page, you can simply insert "link" and "style" tags:
     New Title
     
     
     
    
  • To add new scripts to a page, you can insert "script" tags or use "ace.load_ajax_scripts" function which loads and runs scripts and caches them which prevents scripts from running more than once:
     
    
  • Please note that, scripts loaded via "ace.load_ajax_scripts" function, will be loaded and executed only once.
    But sometimes, some scripts are related to a page and should be run everytime the page is loaded.
    In that case you can load the script using jQuery's getScript function:
     
    

4. Events

  • There are some events triggered when loading page content:
    1. ajaxloadstart triggered when new content is requested.
      If you call "preventDefault()" on event object, loading will be cancelled
    2. ajaxloaddone is triggered when ajax content is loaded
    3. ajaxloadcomplete is triggered when ajax content is loaded and inserted into dom
    4. ajaxloaderror is triggered when loading ajax content has failed
    5. ajaxscriptsloaded is triggered when loading scripts is finished
  •  jQuery(document)
     .on('ajaxloadstart', function(e, params) {
        //params.url and params.hash are available
        if(params.url == 'something') e.preventDefault();
        if(params.hash == 'something') e.preventDefault();
        //you can also return "false" from "content_url" function to prevent loading
     })
    

5. Notes

  • Please note that, inserting large pieces of content and running javascript code in ajax mode may be somewhat slow on mobile devices.
  • For better results, you should make sure you don't insert many scripts that contain long pieces of code when new ajax content is loaded.
  • It would also be faster to keep most of your application login inside one file which is inserted into document once and used by different ajax pages.