Upgrade to v2.1

In this article

Upgrade to v2.1

The new Ajax Browser v2.1 provides asynchronous loader with progress bar. It detects web browser version and loads files required to create desktop or mobile version of Ajax Browser.

Note that while using this new asynchronous is recommended, the old synchronous approach, used in v2.0 and earlier is also supported.

Follow the steps below to upgrade your code to use the new loader:

  1. Replace reference to ITHitAJAXFileBrowser.js with reference to ITHitAJAXFileBrowserLoader.js:
    <script src="/ITHitService/AjaxFileBrowser/ITHitAJAXFileBrowser.js" type="text/javascript"></script>
    <script src="/ITHitService/AjaxFileBrowser/ITHitAJAXFileBrowserLoader.js" type="text/javascript"></script>
    This will include a loader script to your web page that will detect web browser version and will load mobile or desktop version of Ajax Browser as well as to display progress while loading files required for Ajax Browser.
    You can also force the platform specifying Platform parameter in settings, see below.
  2. Remove links to Ajax Browser CSS files, both theme file and icon file CSS:
    <style type="text/css">
            @import "/ITHitService/AjaxFileBrowser/themes/windows_8/include.css";
            @import "/ITHitService/AjaxFileBrowser/themes/windows_8/icons_24.css";
    </style>
    The CSS files will be loaded automatically you do not need to include any CSS files anymore.
    The toolbar icons size and theme are now specified in settings object via IconsSize and ThemeName parameters.
  3. Add BasePath property to your settings. This property points to the URL where Ajax Browser files are located. (The folder where ITHitAJAXFileBrowserLoader.js resides).
    var settings = {
  ...
  BasePath: '/Browser/',
  ...
}

    Note that Ajax Browser files are loaded using XmlHttpRequest. In case your Ajax Browser files are located on the server that is different from the one on which the page with Ajax Browser is located your server must enable CORS requests on the server.

  4. Remove FileIconsPath property from settings. 
    var settings = {
  ...
  FileIconsPath: ‘/icons/’,
  ...
}
    Now path to icons folder is calculated relatively to BasePath specified above.
  5. Remove PluginsPath property from settings.
    var settings = {
  ...
  PluginsPath: ‘/plugins/’,
  ...
}
    Now Java applet path is calculated relatively to BasePath specified above.
                       
    You still need to specify (absolute) path to MS Office path templates, so keep the MsOfficeTemplatesPath property.
  6. Specify theme via ThemeName settings property (optional): 
    var settings = {
  ...
  ThemeName: 'windows_8',
  ...
}
    This parameter must be the name of the one of the folders under the ‘\themes\’ folder.
  7. Specify icons size via IconsSize setting property  (optional):
    var settings = {
  ...
  IconsSize: 24 // 16, 24, 32, 48, 64, 72,
  ...
}
  8. Specify platform via Platform parameter (optional):
    var settings = {
  ...
  Platform: 'desktop',         // 'desktop', 'mobile', 'auto'
  ...
}

  9. Replace the synchronous constructor with a new asynchronous loader. Replace:

    ajaxFileBrowser = new ITHit.WebDAV.Client.AjaxFileBrowser.Controller(settings);


    with: 

    var loader = new ITHit.WebDAV.Client.AjaxFileBrowserLoader(settings);
loader.oninit = function (ajaxFileBrowser) {
    // This event is fired when control is loaded and created.
    // For example you can set selected folder here...
};
loader.LoadAsync(); // starts loading Ajax Browser files asynchronously

    The Ajax Browser Control object is passed as a parameter to init event. You can manipulate this object the way you were doing in v2.0 and earlier versions.

You can see how the entire page with Ajax Browser code looks like here.

Updating Event Handlers

The Ajax Browser v2.1 provides new asynchronous methods for selecting folder Tree Panel and selecting items in Files Panel: SetSelectedFolderAsync and SetSelectedItemsAsync. You can find here how to use these methods.

While the old synchronous methods, provided with v2.0 and earlier, such as SetSelectedFolder and SetSelectedItems, are functional, it is recommended to update your code to use the new asynchronous methods.

Next Article:

Upgrade to v1.5