jQuery object unsupported methods errors

I'm having a nasty problem with jQuery. I made a collapsable treeview using this: http://docs.jquery.com/Plugins/Treeview The problem was it had to be used with a generated HTML. So I made another jQuery-script too edit the HTML to be compatible with the treeview script. The HTML has to have li's and ul's with certain classes, but the generated HTML was just an empty UL with LI's. You can see my script here: (it's quite well documented and thus understandable I guess)

$(document).ready( function () {
    loadPage();
});

function loadPage() {

    //Loop through all wanted li-elements
    $('div.treeContent ul li').each(function(index) {

        //If the li doesn't have an ul-element, we replace it's content with a span around the original content
        $(this).not($(this).has('ul')).wrapInner('<span class="file" />');

        //If there are ul-elements available
        if($(this).has('ul').length > 0) {
            var el = null;
            for(var i=0; i<$(this).contents().size() && el==null; i++) {
                el = $(this).contents().eq(i); //We take the i-element
                var text = el.text(); //We take the textnode out of it.
                if(text.length < 1 || text.match(/^\s+$/)) {
                    //The text doesn't contain anything, or only whitespaces. Let's take the next element!
                    el = null;
                }
            }
            if(el.is('a')) {
                el.wrap('<span class="folder"/>');
            }
            else {
                //If the el-var is filled with something NOT empty and NOT only containing spaces:
                text = '<span class="folder">' + text + '</span>'; //We change the textnode.
                el.replaceWith(text); //We put the textnode back into it.
            }
        }
    });

    /*
     * Since the scripts were loading at the same time and this is unwanted
     * I open the other one when document is ready
     */
    $(document).ready(function(){
        $("#treeMenu").treeview();
    });
}

function openPathMenu() {
    //First we get the current URL to look for
    var pathname = window.location.href;
    var splittedPath = pathname.split("xenit.eu");
    //Now the first element of splittedPath will contain the part BEFORE xenit.eu, the second one will contain the part we are looking for!
    var URL = splittedPath[1];

    //Next we are going to try to find this URL in our tree
    $('ul.treeview').find('a').each(function() { //Look for the a-elements in the tree
        if($(this).attr('href') == URL) { //Check whether the href-attribute is equal to the URL we're looking for
            $(this).addClass('selected');
            $(this).parents('li.expandable').each(function() { //Look for li.expandable parents and put them on expanded.
                $(this).children("div.hitarea")开发者_C百科.click(); //By clicking on them.
            })
        }
    })
}

This works great in Firefox. When I checked it in IE8 and Chrome it appeared that they give errors. IE8 gives me "Object doesn't support this property or method Collaps.js, line 14 character 9" and Chrome gives me "Uncaught TypeError: Object # has no method 'has'" So it seems they are not recognizing the jQuery object or something like that.

I had a suspicion it had to do something with the way things were loaded. As you can see I had a problem with the treeview script loading before my Collaps.js, which ofcourse doesn't work, since the html has to be formatted with Collaps.js, otherwise the treeview script won't work.

In the treeview-script I changed a few things: I wanted my script to close the entire tree when loading the page, so I added a function to close a li and a .each() to close all li's in the "treeview"-function.

At the end of that "function" I put another $(document).ready() to call a function in Collaps.js: openPathMenu(). (To open the tree at the current URL) I was thinking this might cause the problem, but when I comment this out, it still isn't working.

You can see those functions, that I added in the treeview.js (at the end of the "treeview: function(settings)" ) here:

//Close all the collapsable li's in the ul.treeview
            $("ul.treeview").children("li.collapsable").each(function() {
                closeElement($(this), true);
            })

            /*
             * @Author: Trinorae
             * A function to close a certain li.collapsable element (and all it's children)
             * parameters:
             *      el: li.collapsable element to close
             *      childrenToo: close all children too?
             */
            function closeElement(el, childrenToo) {
                if(childrenToo) {
                    //Search all "ul li.collapsable"-children of our element
                    var liCollapsers = el.children("ul").children("li.collapsable");
                    if(liCollapsers.length > 0) { //If there are "ul li.collapsable"-children
                        liCollapsers.each(function() {
                            closeElement($(this)); //Close them too
                        })
                    }
                }
                el.children("div." + CLASSES.hitarea).click(); //Close the element!
            }

            //Do something after everything is loaded:
            $(document).ready(function(){
                openPathMenu();
            });

If it would be important: I'm using jQuery 1.5.1 I am running this on a Drupal 6 website. I tried my scipt (partly) locally with this short HTML

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
            <title>A Collapsible test</title>
            <script src="files/js/jQuery.js"></script>
            <script src="files/js/Collaps.js"></script>
            <script src="files/js/treeview.js"></script>
            <link href="files/css/treeview.css" rel="stylesheet" />
        </head>
        <body>
            <div class="treeContent">
                <ul id="treeMenu">
                    <li>
                        <a title="About document models and metadata" href="/nl/?q=fred/1.3/manual/About%20document%20models%20and%20metadata.html">About document models and metadata</a>
                    </li>
                    <li>
                        <a title="Google" href="http://www.google.be" target="main">About Fred</a>
                    </li>
                    <li>
                        <a title="Advanced user functions" href="/nl/?q=fred/1.3/manual/Advanced%20user%20functions.html">Advanced user functions</a>
                        <ul>
                            <li>
                                <a title="Browse as user" href="/nl/?q=fred/1.3/manual/Browse%20as%20user.html">Browse as user</a>
                            </li>
                            <li>
                                <a title="Data dictionary" href="/nl/?q=fred/1.3/manual/Data%20dictionary.html">Data dictionary</a>
                            </li>
                        </ul>
                    </li>
//And so on..

And it runs perfectly. I can't really test whether the "openPathMenu()" is working, but I suppose that doesn't matter. The point is that this is loading in the first place and is editing the HTML with my script making the treeview work!

So I'm afraid it could be a Drupal issue too..

I hope someone sees something I did wrong and can help. (It's perfectly possible it's something stupid, since I never used jQuery before) Excuse me for the ridiculous long explanation, but I didn't know how to explain it shorter.

The problem is solved by upgrading the jQuery to a new version. I thought I already did this, but it seems Drupal managed to use another file (/location) in IE, Chrome and Safari than in Firefox.. Drupal seems to make a big problem of this. When I manually overwrite the file, it suddenly works!

Overwriting the jQuery-file in Drupal can be tricky, since some other modules can rely on old jQuery versions. For example: my views-module is totally screwed, since it uses jQuery to make it more comfortable to use, but I can live with that (since it's fixed by disabling javascript)