Only one JavaScript function loading on page load.

Question

I have a webpage with a few JavaScript functions set to load on document.ready.

However, if I have 4 of these, only the final one seems to load.

Here is the code I have.

$(document).ready(function ()
{
    var nation = "ireland";
    var irelandMatches = [];
    var matchOrderReversed = false;

    loadDoc();
    showRSS("Irish Times");
    loadWeather();
    loadTwitter();

The loadDoc() and loadTwitter() methods load, but weather and showRSS do not. If I comment out loadTwitter(), then the weather loads fine.

If it makes any difference, all of these methods make use of an XMLHttpRequest, each of which is defined within each method, like so.

function loadYouTube()
    {
        var html = "";

        if (window.XMLHttpRequest)
        {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }

        else
        {  // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function ()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                var ret = xmlhttp.responseText;
                var spl1 = ret.split("~");

                for (i = 0; i <= 10; i++)
                {
                    var spl2 = spl1[i].split("*");
                    var current = "<a href='" + spl2[1] + "'><img src='" + spl2[2] + "' width='50' height='50'>" + "<a href='" + spl2[1] + "'>" + spl2[0] + "</a> <br/>";
                    html += current;
                }

                $("#yt").html(html);
            }
        }

        xmlhttp.open("GET", "getyoutube.php?", true);
        xmlhttp.send();
    }

Thanks guys :)

So are you sure you're not erasing one function html with the other ($("#yt").html(html);) or are you using a different element with a different ID in each of the functions? — Alon Eitan
– Alon Eitan, Commented May 5, 2016 at 21:48
It is most likely a run time error. You can simply check that by opening the dev tools in your browser (Firefox and chrome :ctrl + shit + i) and switching to Console. Then, simply reload your page. It is hard or impossible to find the error from the code above because it is impossible to predict what the return of the Ajax response would be. — LoreV
– LoreV, Commented May 5, 2016 at 21:49
@user3102785 For what it's worth, that fixed it because you accidentally created a global variable called xmlhttp. This means that each of your other functions were overwriting that value so you could only see the result of the last function that used it. — Mike Cluck
– Mike Cluck, Commented May 5, 2016 at 21:57

Cristina Shaver · Accepted Answer · 2016-05-05 21:58:31Z

3

It looks like when you define xmlhttp in your loadYouTube() example, you are doing so on the global scope due to the lack of var. So loadDoc() sets window.xmlhttp, then loadWeather() overwrites it shortly after, followed by loadTwitter().

Try something like this in your loading functions:

function loadYouTube()
    {
        var html = "";

        // define xmlhttp in block scope
        var xmlhttp;

        // rest of function...
    }

answered May 5, 2016 at 21:58

Cristina Shaver

463 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Only one JavaScript function loading on page load.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related