jquery function firing early

Question

In my script, the function in question is at the end of

$(jquery).ready(function(){...});

For some reason it is firing before the DOM is loaded. I'll post the whole script below. I am interested in what happens at lines 246-248.

THIS IS THE BUGGY PART:

alert(listObj.listOffset);
listObj.allLists.offset({ left: listObj.listOffset });
listObj.allLists[listIndex].focus();

A Little More Detail

This particular part of the script is trying to put the focus on today. There is a layout object that should enable this process. It needs to run after the DOM loads, so that it can calculate layout offset variables. When it loads early, the offset ends up being 15000px instead of 400ish.

If you can offer some things to look for, that might help me figure it out, even if you can't pinpoint the solution. I understand this is a lot of code. This is an enterprise app with a lot of hands working on it.

MY SCRIPT SECTION OF DOCUMENT

        // bind listeners to time input fields
$('.timeBlock').on("blur", validateHrs);
$('.timeBlock').keyup(function () {
    var listObj = new LayoutObj();
    listObj.tabNav();
});

// bind listeners to prev/next buttons
$('.previous, .next').on("click", function () {
    var str = $(this).attr('class');
    var obj = new LayoutObj();
    obj.navDates(str);
});

// calculate totals for stored inputs
totalHrs();

// highlight today's date
var today = new Date();
var thisMonth = today.getMonth();
var thisDate = today.getDate();
var dateStr = '';
var splitDates = new Array();
var fullDates = new Array();
var listIndex;
var listObj;

fullDates = $('.dateNum');
fullDates.each(function (index) {
    splitDates[index] = $(this).text().split('/');
});

for (var i = 0; i < splitDates.length; i++) {
    if (thisMonth === (parseInt(splitDates[i][0], 10) - 1) && thisDate === parseInt(splitDates[i][1], 10)) {
        thisMonth += 1;
        thisMonth += '';
        thisDate += '';
        if (thisMonth.length < 2) {
            dateStr = "0" + thisMonth + "/";
        }
        else {
            dateStr = thisMonth + "/";
        }
        if (thisDate.length < 2) {
            dateStr += "0" + thisDate;
        }
        else {
            dateStr += thisDate;
        }
        fullDates[i].parentNode.setAttribute('class', 'date today');
        listIndex = i;
    }

    //The following code will shift the job lists to reveal today's date ///////, if it is not in the view on load.

}
var listObj = new LayoutObj();
listObj.listOffset = listObj.cellWidth * (listIndex + 1);

//alert(listObj.listOffset);
listObj.allLists.offset({ left: listObj.listOffset });
listObj.allLists[listIndex].focus();
});

LayoutObj

Holy code batman. Could you not have cut some of that wall of text out? — psx, Jul 19 '13 at 15:53
Check out the avatar/user name. With so many hands... a lot of code! LOL — emerson.marini, Jul 19 '13 at 15:54
I'm not sure why he's been downvoted, he has posted a complete question in line with the guidelines — NibblyPig, Jul 19 '13 at 15:56
I didn't know how much you would need, since I don't know where the problem is. The .ready() method ends right after the lines in question. — eightArmCode, Jul 19 '13 at 15:58
Everything after the `.ready()` method is irrelevant. And you could start your debugging by removing code from the ready method, to see if the problem still occurs. Then post the minimal version that demonstrates the problem. — Barmar, Jul 19 '13 at 16:00

NibblyPig · Answer 1 · 2013-07-19T16:00:52.367

1

You should be using:

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

When you say it fires before the DOM is loaded, in the script you have put the entirety of your code into the document ready block. Does any of that code affect the sizing?

Are you sure that the code isn't broken? For example, you could pull that block out and bind it to a click event.

edited Jul 19 '13 at 16:00

answered Jul 19 '13 at 15:53

NibblyPig

51,118
72
200
356

1

or just put the code at the bottom of page and not use document.ready :) – David Chase Jul 19 '13 at 15:56
1

@DavidChase just to look nice, let's keep things separated. HTML here, JS there. :) – emerson.marini Jul 19 '13 at 15:57
1

Why do you think this would fix it? His format is perfectly fine, and necessary if you have a `$` conflict (although then his code outside the `.ready()` would be wrong). – Barmar Jul 19 '13 at 15:59
1

I corrected the first line of the question, in the actual code he pasted he is doing it correctly. – NibblyPig Jul 19 '13 at 16:02
The answer is, you're going to have to break it down into bits and test each part one by one, until you can find the source of the problem. In this case because the code is quite vast and there isn't an obvious error, we cannot give you a simple straightforward fix. – NibblyPig Jul 19 '13 at 16:05
1

@MelanciaUK im all about SOC im saying if you put the js into a file called script.js and you put that at the bottom of the page you do not have to worry about document.ready, you definitely do not want javascript blocks of code in your html.... heres a even a SO reference http://goo.gl/dBoRV – David Chase Jul 19 '13 at 17:28
@DavidChase I got it mate. No worries. :) – emerson.marini Jul 19 '13 at 17:30

eightArmCode · Accepted Answer · 2013-11-30T18:46:51.620

0

The issue was a third party script!! STUPID SCRIPT!

edited Nov 30 '13 at 18:46

answered Jul 19 '13 at 16:38

eightArmCode

175
1
4
15

jquery function firing early

2 Answers2