1 (edited by symbiot 2008-01-23 10:02:40 PM)

Topic: Add Js and Css files on the fly (javascript)

hi, since i'm still using xajax 0.2.4 but stil want to add new js and css files on the fly, i've created a Javascript file that wil do that, simply call upon the functions using xajaxResponse->addScript(.....); to call them with xajax...

addRemoveCSSJSFiles.js:

/*     this piece of code is written by Symbiot.eu!! -=- the goal of this piece of code is to add,replace and remove JS and CSS files on the fly!
    everyone can use this code freely, adjust it and distribute this, please dont remove or alter this text!
*/

/*    HELP: You may remove this piece:
    --------------------------------------------------------------------------------------------------------
    USAGE: ONLY USE THE FUNCTION DESCIBES AS BELOW, THE OTHER ARE 'HELP' FUNCTIONS FOR THESE FUNCTIONS:
    --------------------------------------------------------------------------------------------------------
        window.addRemoveCSSJSFiles.addFile(filename,type,force)                ADD AN JS OR CSS FILE
        -------------------------------------------------------
        parameter    type            example/explanation
        -----------------------------------------------------------
        filename:     string            path/file.ext
        type:         js or css        set the type of how this element must be added (so an php file can be added as css/js)
        force:         boolean(fale,true)    if the added file exists, it won't be added unless force is true
        =============================================================
        window.addRemoveCSSJSFiles.replaceFile(replaceFile,replaceWith,type,force)    REPLACE JS OR CSS FILE
        -------------------------------------------------------
        parameter    type            example/explanation
        -----------------------------------------------------------
        replaceFile:     string            path/file.ext of the file which has to be replaced
        replaceWith:    string            path/file.ext of the file which has to replace the first file
        type:         js or css        set the methode for adding the element (so an php file can be added as css/js)
        force:         boolean(fale,true)    if the replaceFile does not exist, the second file will be added to the document.
        =============================================================
        window.addRemoveCSSJSFiles.removeFile(filename,type)                REMOVE JS OR CSS FILE
        -------------------------------------------------------
        parameter    type            example/explanation
        -----------------------------------------------------------
        filename:     string            path/file.ext
        type:         js or css        set the type of the element that has to be removed
*/

window.addRemoveCSSJSFiles = {
    objHead : document.getElementsByTagName("head")[0],

    addFile : function(filename,type,force) {
        type = type.toLowerCase();
        if (this.isDuplicate(filename,type)) { 
                if (force == true) { this.removeFile(filename,type); } 
                else { return; }
            }

        if (type == 'js') { var fileRef = document.createElement('script'); fileRef.setAttribute("type","text/javascript"); fileRef.setAttribute("src", filename); }
        else if (type == 'css') { var fileRef = document.createElement("link"); fileRef.setAttribute("rel", "stylesheet"); fileRef.setAttribute("type", "text/css"); fileRef.setAttribute("href", filename); }

        if (typeof(fileRef) != "undefined") { document.getElementsByTagName("head")[0].appendChild(fileRef);}
    },

    isDuplicate:function(filename,type){
        type = type.toLowerCase();
        var isDup = false;    var targetTypeName = this.getTypeAndName(type);    var headElchilds = this.objHead.childNodes;
        for (var i=0;i<headElchilds.length;i++)
            {
                if ((headElchilds[i].type == targetTypeName[0]) && (headElchilds[i].getAttribute(targetTypeName[1]) == filename))
                    { isDup = true;break;}
            }
        return isDup;
    },

    removeFile:function(filename,type){
        type = type.toLowerCase();
        var targetTypeName = this.getTypeAndName(type);    var headElchilds = this.objHead.childNodes;
        for (var i=0;i<headElchilds.length;i++)
            {
                if ((headElchilds[i].type == targetTypeName[0]) && (headElchilds[i].getAttribute(targetTypeName[1]) == filename))
                    { this.objHead.removeChild(headElchilds[i]); break;}
            }
    },

    replaceFile:function(replaceFile,replaceWith,type,force){
        type = type.toLowerCase();
        if (replaceFile == replaceWith)
            return;
        if (this.isDuplicate(replaceFile,type)) { this.addFile(replaceWith,type,force); this.removeFile(replaceFile,type); }
        else { if (force == true) { this.addFile(replaceWith,type,force);} }
    },

    getTypeAndName : function(type) {type = type.toLowerCase(); return new Array((type == "js") ? "text/javascript" : (type == "css") ? "text/css" : "none",(type == "js") ? "src" : (type == "css") ? "href" : "none"); }
};

and the file that holds the action:

<html>
    <head>
        <title>test page</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="addRemoveCSSJSFiles.js"></script>
    </head>
    <body>
        <input type="button" onClick="javascript:window.addRemoveCSSJSFiles.addFile('style2.css', 'css',true);" value="another css file!"/>
        <br>
        <input type="button" onClick="javascript:window.addRemoveCSSJSFiles.removeFile('style2.css','css');" value="REMOVE css file!"/>
        <br>
        <input type="button" onClick="javascript:window.addRemoveCSSJSFiles.replaceFile('style2.css','style3.css','css',false);" value="REPLACE style 2 with 3!"/>
        <br/><br/>
        some content over here!!!
    <body>
</html>

i wont place the stylesheets over here, that part seems obvious to me
if you want to see this code in action, please take a look at: http://www.symbiot.eu/addRemoveCSSJSFiles

[xajax 0.5 RC 2 Minimal]
Sometimes, the sound of goodby is louder than any drumbeat

Re: Add Js and Css files on the fly (javascript)

Hi symbiot,

why you don

Re: Add Js and Css files on the fly (javascript)

Hi M[e]ntor,

this script was written for the 0.2.4 version of xajax, therefore none of your mentioned code are available... (only the addIncludeScript function)

i'm glad to now that these functions you've mentioned are available in newer version of xajax!

[xajax 0.5 RC 2 Minimal]
Sometimes, the sound of goodby is louder than any drumbeat

Re: Add Js and Css files on the fly (javascript)

oh i see, sorry my fault