Question

I need to know how to display a particular div (not a page, just a div) on page load in jQuery Mobile. Here’s the HTML:

    <div data-role="page">
    <div data-role="navbar">
    <ul>
        <li><a href="#" data-href="sun">Sun</a></li>
        <li><a href="#" data-href="mon">Mon</a></li>
        <li><a href="#" data-href="tue">Tue</a></li>
        <li><a href="#" data-href="wed">Wed</a></li>
        <li><a href="#" data-href="thu">Thu</a></li>
        <li><a href="#" data-href="fri">Fri</a></li>
        <li><a href="#" data-href="sat">Sat</a></li>
    </ul>
    </div><!-- /navbar -->
    <div id="sun" class="content_div">Sunday</div>
    <div id="mon" class="content_div">Monday</div>
    <div id="tue" class="content_div">Tuesday</div>
    <div id="wed" class="content_div">Wednesday</div>
    <div id="thu" class="content_div">Thursday</div>
    <div id="fri" class="content_div">Friday</div>
    <div id="sat" class="content_div">Saturday</div>

</div>

I’m using jQuery to negotiate the tabs, so my JS is above the jQuery Mobile source call. Here’s that code:

    function getHandler(handler) {
        var days =  ['sun','mon','tue','wed','thu','fri','sat'],
            d = new Date(),
            today = d.getDay();

        for (x=0; x<days.length; x++) {
            if ( x === today ) { handler = days[x]; }
        }
    }

    $(document).delegate('[data-role="navbar"] a', 'click', function () {
        $(this).addClass('ui-btn-active');
        $('.content_div').hide();
        $('#' + $(this).attr('data-href')).show();
    });

My goal here is that when the doc initially loads, the div that corresponds to the current day of the week will be displayed

Answer 1

Try this:

function getHandler() {
    var days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
        d = new Date(),
        today = d.getDay();
    return days[today];
}

$(document).delegate('[data-role="navbar"] a', 'click', function() {
    $(this).addClass('ui-btn-active');
    $('.content_div').hide();
    $('#' + $(this).attr('data-href')).show();
});

$(document).ready(function(){
    $('[data-href="' + getHandler() + '"]').trigger('click');
})
​