Question

I apologize for the probably confusing title, but I wasn’t quite sure how to label this thread. At any rate, I’m working on a web application that works just fine in IE, but seems to fail in Firefox for some reason. I know this seems to happen with a lot of applications at first, but the errors that the Firefox development console are giving me don’t really make much sense. Here are the errors it’s coming up with:

$("#workNews").text(lines[i++]).hide is not a function
syntax error
data.split is not a function

The first error is claiming that the following line of code is breaking because it thinks that jQuery.hide() is not a function.

$("#workNews").text(lines[i++]).hide().fadeIn(500).delay(4000).fadeOut(500);

Now, this line of code has worked in both IE and Firefox before, but it has suddenly broken. The same with the third error, in that it believes that the “split()” method that breaks a string up by a delimiter is not a function. Again, this line worked before, and now it suddenly doesn’t. The “syntax error” is what’s really weird… I’m opening and reading lines from a text file with the “$.get()” method, which has worked fine and still does in IE. However, the Firefox developer console tells me that there’s a syntax error and proceeds to point to a line of text within the file.

I’m not sure if there’s a simple thing I need to fix elsewhere in my code that is not apparent by these errors, but when encountering problems like this, I was wondering if there was any “usual reason” for this to happen. If you need to see more of my code, simply ask. Thank you.

EDIT #1: Just to be safe, here’s the whole function in which all three “errors” are supposedly occurring. Again, this function has worked just fine in both IE and Firefox until just recently.

function GetWorkNews() {
    var lines = new Array(); var i = 0;
    $.get(textFile, function(data) {
        lines = data.split("\n");
    });

    $("#workNews").text(lines[i++]).hide().fadeIn(500).delay(4000).fadeOut(500);
    setInterval(function() {
        $("#workNews").text(lines[i++]).hide().fadeIn(500).delay(4000).fadeOut(500);

        if(i == lines.length) {
            i = 0;
        }
    }, 5000);
}

EDIT #2: When I was tinkering around, I commented out the first jQuery line in which I call the hide() function:
$(#workNews”).text(lines[i++]).hide().fadeIn(500).delay(4000).fadeOut(500);
Everything seems to work now, though the FF Dev Console still tells me there’s a syntax error within my text file. I suppose I don’t “need” this line which I commented out, for it simply primes my banner with text so that it doesn’t have to wait the five seconds for the first headline to display, but I’d still like it. Any ideas why that line broke, but not the exact same line within the setInterval() function?

Answer 1

As a recap, I’ve found two possible solutions to the problem. The first and less desirable was to just delete the priming line of code. The second was to break up the function calls of the problem line so that this:

$("#workNews").text(lines[i++]).hide().fadeIn(500).delay(4000).fadeOut(500);

becomes this:

$("#workNews").text(lines[i++]);
$("#workNews").hide();
$("#workNews").fadeIn(500);
$("#workNews").delay(4000);
$("#workNews").fadeOut(500);

Apparently FF doesn’t like chaining these function calls together like IE apparently permits. Still, the FF developer’s console still complains about some kind of syntax error within the text file being read from, but it doesn’t seem to cause any major errors.