Home/ Questions/Q 8265243
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T04:43:52+00:00

-=- THIS CODE FUNCTIONS. I AM LEFT TO ASSUME THERE WAS A PROBLEM WITH

  • 0

-=- THIS CODE FUNCTIONS. I AM LEFT TO ASSUME THERE WAS A PROBLEM WITH THE CACHE AS NOTHING HAS BEEN ALTERED BETWEEN NON-FUNCTION/FUNCTION. THANK YOU ALL FOR YOUR HELP (especially Niko who got the ball rolling and helped me form a richer understanding of jquery syntax) -=-

I’ve written this script by hand, and finally decided to update it to jquery in a bid to get used to that, and streamline the code. This is supposed to render a simple menu (which it did before).

  • Both .js files are in the same directory as the .html file. This is being tested on my pc, not on a server.
  • A previous version of this code worked perfectly just linking to taskMaster.js. At that point my code didn’t use “$” tagged calls.
  • Firebug is displaying an error of “ReferenceError: $ is not defined” when it tries to call $(document).ready(function () {
  • the “net” tab doesn’t display either .js files as being loaded; the net tab is completely empty and shows no activity – I believe this is because I’m testing this off my PC; the net panel is empty when I load the functioning code
  • I’ve reinstalled a fresh version of jquery on the offchance there was something wrong, to no avail

Broken code “taskMaster.js”:

$(document).ready(function () {


//main menu
function Main()
{
    var mainList = ["New List","Show Lists","Delete Lists"];
    //var onClick = [New,Lists,Delete];
    var mainMenu = new Menu("Main Menu","menuMain",mainList/*,null*/);
    mainMenu.contentMenu();
}
$(Main);


//menu class
function Menu(name,divClass,content/*,onclick*/)
{
    $("#interface").html(null);

    //title
    formatDiv("interface",name,divClass,name/*,null*/);

    //return
    if(name != "Main Menu")
    {
        formatDiv(name,null,"return","^ Main Menu","Main()");
    }


    //display options
    this.contentMenu = function()
    {
        for(i=0; i<content.length; i++)
        {
            formatDiv("interface",content+i,"menuContent",content[i]/*,onclick[i]*/);
        }
    }
}


//format divs
function formatDiv(target,divId,divClass,content/*,onclick*/)
{
    $("#"+target).append("<div id=\'" + divId + "\' class=\'" + divClass + "\'>" + content +"</div>");
    /*$("#"+divId).click(function()
    {
        onclick;
    });*/
}

});

I commented out unused lines, but it’s showing “$” as undefined

Here is the HTML:

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="taskMaster.js"></script>
    <link rel="stylesheet" type="text/css" href="taskMaster.css" />
</head>
    <body>
        <div id="interface">
        </div>
    </body>
</html>

As far as I can tell there is nothing wrong with this html – the same format worked perfectly fine before. All that’s changed is that I’ve introduced jquery and changed some commands in taskMaster.js to use “$”.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Okay, I’m now posting this as an answer, because it is easier to provide some examples here.

    First thing is: Whenever you do an operation that accesses the DOM, such as $("#interface").html(null);, you will first need to make sure that the DOM is ready. This is what the “ready” event is for:

    $(document).ready(function() {
    /* The code here is executed when the DOM is ready! */
});

    So if “Main()” is a function that kicks everything off, you can simply list it to be called when the DOM is ready:

    function Main() {
    /* ... */
}

$(document).ready(Main);

    Most the time it is also safe to encapsulate the entire JavaScript code in a “ready” event handler:

    $(document).ready(function() {
    function Main() { /* ... */ }
    function formatDiv(...) { }
    // ...

    // All functions are defined, now let's go:
    Main();
});

    Now the click handlers: jQuery’s “click()” function expects a function that is to be called when the corresponding DOM elements gets clicked on. You’re currently passing strings like “New()” to it, but you should directly pass the functions. To do so, alter the code in “Main()” this way:

    // Old: var onClick = ["New()","Lists()","Delete()"];
var onClick = [New, Lists, Delete]; // New

    This adds the actual functions to the array, not just their names.

    • 0