Raxan JavaScript Object Quick Reference

The Raxan JavaScript Object provides a reference to the methods and properties used by the Raxan Framework.

<script src="raxan/startup.js" type="text/javascript">
    Raxan.include('jquery');

    Raxan.ready(function(){
        alert('The page is now ready for DOM manipulation');
    });
</script>

Dynamic loading of Style Sheets and Javascript Libraries

At times, you only want to load a portion of your scripts and/or style sheets when the user completes a specific task. This makes it easier on the loading time required at startup and gives you the option of breaking up your very large scripts into smaller and more manageable script files.

Raxan provides two API functions to dynamic load of Javascript and CSS files from the within "ui/javascript" and "ui/css" folders or from any other folder location.

To use the include() function, simply pass the name and path to the script file without the .js extension if the file is located inside the plugins folder. For example:

<script type="text/javascript">
    Raxan.include('jquery');
    Raxan.include('namespace/myscript');
    // where namespace is a sub-folder within the plugins folder
</script>

For script files that are not located inside the ui/javascript folder, use the following syntax:

<script type="text/javascript">
    Raxan.include('path/to/folder/myscript.js', true);
</script>

Note here that the extension of the file must be included and the second parameter set to true.

To receive notification after the file has been loaded you can pass a callback function as the third parameter:

<script type="text/javascript">
    Raxan.include('path/to/folder/myscript.js', true, function(){
        alert('File loaded successfully');
    });
</script>

When you want to dynamically load a stylesheet, the css() function must be used. The concept is similar to that of the include() function with the exception that stylesheets are loaded from the "ui/css" folder and there is no support for a callback function:

<script type="text/javascript">
    Raxan.css('master');
    Raxan.css('name-of-theme/theme');

    // for other stylesheets
    Raxan.css('path/to/folder/stylesheet.css', true);
</script>

RJO Methods & Properties

Methods/Events Description Notes
version Return the version number of the framework alert(html.version);
path Path to framework files. This will be detected by default.

To manually set the library path use:

html.path = './raxan-changes';
csspath Path to Raxan sylesheets. This will be detected by default.

To manually set the css path use:

html.csspath = './mystyles';
pluginpath Path to Raxan plugins. This will be detected by default.

To manually set the plugins path path use:

html.pluginpath = './myplugins';
mainScript Returns the name of the main startup or code-behind script. If multiple startup scripts were specified then this property will return an array. alert(html.mainScript)
Methods
bind(css,evt,fn)

Bind the event of an html element to a function.

  • css - Element selector
  • evt - Name of event
  • fn - Callback function
 

                Raxan.bind("#btnsave", "click", function(){
                    alert("You have clicked me");
                });
css(src,extrn)

Dynamically load a stylesheet from the server.

  • src - Stylesheet URL.
  • extrn - Set to true when loadig styles that are not located inside styles folder.
 

                Raxan.include("master");
                Raxan.include("name-of-theme/theme");
                // for other stylesheets

                Raxan.include("path/to/folder/stylesheet.css", true);
include(src,extrn,fn)

Dynamically load a Javascript from the server.

  • src - Javscript URL.
  • extrn - Set to true when loadig styles that are not located inside plugins folder.
  • fn - Calback function to receive notification after the file has loaded.
 

                Raxan.include("myplugin");
                Raxan.include("namespace/myplugin");
                Raxan.include("path/to/folder/myscript.js", true);
                Raxan.include("path/to/folder/myscript.js", true, function(){
                    alert("File loaded successfully");
                });
urlparams() Returns an array containing url parameters passed to the page. var url = Raxan.urlparams();
alert(url['name']);
filename() Returns the web page file
 alert(Raxan.filename());
post(url, data) Post data to the server.
  • url - URL to post data.
  • data - hash array containing data to be sent to the web server.
 

                var data = {
                    name:"value1",
                    name2: "value2"
                }
                // send data to server
                Raxan.post("save.php",data);
log(txt) Log text to window.console or display in status bar. The window.console is used if Firebug is enabled.
Client-Server Methods
createConduit(name, option) See Asynchronous Data Conduits for more information.
dispatchEvent(type,value,fn) See Client-Server Introduction for more information.
getVar(name) See Client-Server Introduction for more information.
Events & Callbacks
ready(fn) Bind a function to the ready event. This event is triggered when the DOM has been loaded and can be manipulated.

 

                Raxan.ready(function(){
                    alert("The DOM is ready");
                });
load(fn) Bind a function to the browser's onload event.
unload(fn) Bind a function to the browser's unload event.
togglePreloader(fn) Bind a function to Raxan's preloader event. This event is triggered before and after a client-server request. 

                Raxan.togglePreloader(function(e,mode){
                    if (mode=='on') $('#loader').show();
                    else if (mode=='off') {
                        $('#loader').hide();
                        if (e.serverResult) alert(e.serverResult); // result returned from server
                    }
                });
error(fn) Bind a function to Raxan's error event. This event is only triggered whenever an unhandled client/server error occurs. 

                Raxan.error(function(errText,httpCode){
                    if (httpCode==404) alert('File not found: ' + errText);
                    else alert('Error: ' + errText);
                    return true; // let the library know that the error was handled
                });