javascript function ready code not working

Question

I am trying to determine why this script is not working -- It was working until I added the function ready element to make the page load before running - i think that maybe I did not add a correct closure. I am new to JS so if anyone has any ideas, that would be great!

    <script>
//a simple function used to make an ajax call and run a callback with the target page source as an argument when successful
function getSubPageSource(url, successCallback)
{
    var xhr = XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4 && xhr.status == 200)
        {
            //when source returned, run callback with the response text
            successCallback(xhr.responseText);
        }
    };
    xhr.open('GET', url, true);
    xhr.send();
}

function readyFn(jQuery) {
    // Code to run when the document is ready.

//find all categories with sub categories
var categories = document.getElementsByClassName('has-subcategories');
//loop through each category
for (var ii = 0, nn = categories.length; ii < nn; ii++)
{
    //use a closure to pass in a static ii
    (function(ii)
    {
        //get element
        var element = categories.item(ii);
        //find id
        var id = element.getAttribute('data-category');
        //find url
        var href = element.getAttribute('href');
        if (id && href)
        {
            //found
            getSubPageSource(href, function(data)
            {
                //find sub categories
                //trim off everything before where id shows up first
                var substrSource = data.substr(data.indexOf('data-category="'+id+'"'));
                //trim off the remaining of the category title
                substrSource = substrSource.substr(substrSource.indexOf('</a>'));
                //trim off where the next category is found
                substrSource = substrSource.substr(0, substrSource.indexOf('home-categories-main'));
                //trim off where the next category starts, leaving source of all sub categories
                substrSource = substrSource.substring(0, substrSource.lastIndexOf('<a '))

                //insert to main menu after the title
                console.log(id, substrSource);

                //create new node capable of having children
                var newNode = document.createElement("span");
                //insert new source into the new node
                newNode.innerHTML = substrSource;

                //insert new node after element
                element.parentNode.insertBefore(newNode, element.nextSibling);
            });
        }
    })(ii);
}

}
$(document).ready(readyFn);

</script>

`ready` is a jQuery method. You should include the jQuery library for using the method. If you are not using jQuery and just a need a `ready` handler do not include the jQuery library. [Use a helper function.](https://github.com/jfriend00/docReady) — Ram, Jun 20 '15 at 00:01
That and you can run the function right from that document ready line: `$(document).ready(function(){ // Do Work});` This code will run when the document is ready. — CalebB, Jun 20 '15 at 00:03
[How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Ram, Jun 20 '15 at 00:04
It should be `$( document ).ready(readyFn);`, see https://api.jquery.com/ready/. — ttzn, Jun 20 '15 at 00:04

score 0 · Answer 1 · answered Jun 20 '15 at 00:04

0

Instead of

$(document).ready()

try to use

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

or

$(function() {
});

answered Jun 20 '15 at 00:04

SYNCRo

450
5
21

Not passing a function to `ready` method doesn't throw any error so this doesn't solve the issue. It seems there is no jQuery object in that document. This seems to be the _main_ problem. – Ram Jun 20 '15 at 00:06

score 0 · Answer 2 · answered Jun 20 '15 at 00:04

0

You need to pass an argument to $(document).ready():

$(document).ready(readyFn);

answered Jun 20 '15 at 00:04

Barmar

741,623
53
500
612

score 0 · Answer 3 · answered Jun 20 '15 at 00:05

I see a couple things wrong in your code:

First $(document).ready() is a jQuery method. You must load the jQuery library before you can use it.
You don't just insert $(document).ready() into your code. Instead, you pass it a callback as shown below and you place any code that you want to execute after the document is ready within that callback. It does not just halt exeuction until the document is ready like you seem to be using it in your code.

Example:

$(document).ready(function() {
    // put code here that will execute after the DOM is ready
});

Or, the way it looks like you intended to do it in your code:

function readyFn(jQuery) {
    // Code to run when the document is ready.
}
$(document).ready(readyFn);

javascript function ready code not working

3 Answers3