JQuery Support

Description

Alpha Anywhere uses jQuery. The version of jQuery used can be changed from the version that ships with Alpha Anywhere to a specific version hosted on another server or included as part of the project.

Discussion

The version of jQuery and jQueryUI loaded when an application runs can be changed to load a specific version hosted on another site or included as part of the project. The location to load the libraries from is specified in the Web Project Properties. Alpha Anywhere can load the Internal version or download jQuery from either Google Hosted Libraries or the jQuery Content Delivery Network (CDN). If the 'Internal' option is specified, the application will load the version of jQuery shipped with Alpha Anywhere. If loading from Google, the version of jQuery to load must be specified (see Google Hosted Libraries for available versions.) If jQuery is loaded from the jQuery CDN, the latest stable release of jQuery is automatically loaded.

The name of a jQuery UI CSS theme to load can also be specified. All .a5w pages that contain any type of Alpha Anywhere component will automatically load the specified jQuery files and CSS.

Web Project Properties

jQuery themes do not currently define styles appropriate for a Grid or other Alpha Anywhere Components. You may, however, create your own class map to map the component's abstract class names to jQuery class names. All Components allow you to define a custom class map.

To see the abstract class names, run a Grid or another component after turning off the 'resolve abstract class map' setting. If you View Source, you will see class names such as [class.gridPart].

Loading JQuery

If you write your own .a5w pages and you want to load JQuery from the internally stored versions of jQuery, you can use these special 'pseudo' links:

  • Load just jQuery Core:

    <script type="text/javascript" src="javascript/A5jQuery.js"></script>
  • Load jQuery Core and UI

    <script type="text/javascript" src="javascript/A5jQueryWithUI.js"></script>

jQuery.noConflict()

When jQuery is loaded by Alpha Anywhere using the settings defined in the Web Project Properties, jQuery.noConflict() is run automatically. This means that if you want to use jQuery in your own Javascript, you must refer to the jQuery object using 'jQuery' and not '$'. The '$' object is owned by Alpha Anywhere.

If desired, jQuery can be assigned to a variable, such as $j:

$j = jQuery;

Loading 3rd Party Libraries that use jQuery

3rd party libraries that use jQuery can used in Alpha Anywhere applications. Because $ has been assigned to the document.getElementById method, however, 3rd party JavaScript libraries that use jQuery must be modified to avoid collisions with the $ function. The Xbasic a5_make_jquery_safe function can be used to prepare a 3rd party library for use with Alpha Anywhere applications. EG:

a5_make_jquery_safe("C:\path\to\my\javascript\library.js",.t.);

To learn more, see the a5_make_jquery_safe Function.

See Also