SP2013 JavaScript on custom master page sometimes not working

Question

I'm trying to implement accordion menu for quick launch ( as in http://borderingdotnet.blogspot.com/2013/04/accordion-left-navigation-for.html ), but it behaves very weird. Sometimes it works correctly, but sometimes after closing the browser and starting it again it does not. I can open the console and debug it (IE) and it seems to work fine... except that there are no results on the page, nothing changes. I've tried replicating this in FF, and the problem initially started in a similar way, but after debugging it somehow started to work... and now it is working, even after refreshing page or restarting browser. The weirdest thing is that when I add alert with whatever in the beginning of the script, it's always working, as if alert would somehow force the quick launch to apply changes.

Any ideas? This is a modified standard master page, put into module and on-premise package.

EDIT: Relevant script

   <script type="text/javascript">
    $(function () {
        /*set dynamic css logic*/


        var em = document.location.pathname.split('/')[1]
        if ( em != 'EmployeeManual') {
            return false;
        }
        var table = document.getElementById('scriptWPQ2');
        if (table != null) {
            table.setAttribute('style', 'position: absolute; top: 210px; left: 410px; margin: -100px 0 0 -200px;');
        }
        var a = $('#sideNavBox .menu-item.selected');

        //alert(document.location.pathname.split('/')[1]);
        if (a.length) {
            //propagates the selected class, up the three.
            $('li.static').removeClass('selected');
            $('#sideNavBox .menu-item.selected').parents('li.static').addClass('selected');

            //collapses top siblings of selected branch
            $('#sideNavBox .menu-item.selected').parents('li.static').last().siblings()
             .find('> ul').hide();
        }
        else {
            $('#sideNavBox .root.static > li.static > ul').hide();
        }
        var b = $('#sideNavBox .root.static > li.static');
        //alert(b);
        /*set accordion effect*/
        b.each(function () {
            if ($(this).find('ul').length) {
                $(this).addClass('father').click(function () {
                    //if ($(this).children('ul').css('display') != 'none') {
                    //    $(this).removeClass('selected').children('ul').slideUp();
                    //}
                    //else {
                    /*collapse-siblings*/
                    $(this).siblings().removeClass('selected').children('ul').slideUp();

                    /*expand*/
                    $(this).addClass('selected').children('ul').slideDown();
                    //}

                    /*added: stop event propagation to link nodes*/
                    $('a.static').click(function (event) {
                        event.stopPropagation();
                    });

                    /*added*/
                    return false;
                });
            }
        });
    });
</script>

I have also tried to wrap the code in ExecuteOrDelayUntilScriptLoaded but the result was the same.

Answer 1

Is Minimal Download Strategy turned on? If so you have to do all sorts of evil typename registration. Read Hugh Woods recent blogs on using JavaScript with MDS.

Answer 2

SharePoint often loads things asynchronous. When your code runs, the content of the page may be not there. This explains why sometimes it works and sometimes nothing happens.

Please use the provided array _spBodyOnLoadFunctionNames:

function onloadScript() {
    // Place the content of your anonymous function here
}

// Run the function if SharePoint DOM and Object Model is ready
_spBodyOnLoadFunctionNames.push('onloadScript');

When the DOM is ready, SharePoint itself will run each function, whoose names are in the array. It's the SharePoint equivalent of something like $(document).ready().