CODEWITHSUNDEEP
jqueryjquery-mobile
user714852
user714852

Reputation: 2154

How can I hide a div in JQuery mobile - current attempt hides div occasionally

I am using jquery JQuery and want to hide div on page load. To do this I am using the following javascript (in the page)

$( document ).ready(function() {
    $('#some_div').hide();
    $('#some_btn').closest('.ui-btn').hide();
});

When the page is loaded sometimes the div and button are hidden, and sometimes they are not. There doesn't seem to be any consistancy I can see that determines when they are/aren't hidden. This occurs when I navigate to the page using the JQM ajaxy loads for standard links and when I refresh the page. I am using Chrome (latest). Any ideas on what may be going wrong here?

Edit 1

As per request here's the html I'm using (which also includes @Omar suggestion of on pageshow)

<!doctype html>
    <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"  > <![endif]-->
    <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"  > <![endif]-->
    <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"  > <![endif]-->
    <!--[if gt IE 8]> <html class="no-js" lang="en"  > <![endif]-->


    <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="viewport" content="width=device-width,initial-scale=1.0">

        <link rel="stylesheet"  href="/static/jquery-ui-1.10.3.custom.min.css">
        <link rel="stylesheet"  href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css">

        <script src="/static/jquery-1.9.1.min.js"></script>
        <script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"></script>

      <!-- CSS: implied media="all" -->
    </head>

    <body>
        <div data-role="page" id = "main-page">
            <div data-role="header" style="overflow:hidden;">
            </div>
            <div data-role="content">
                <div id = "some_div">
                    Test div
                </div>
                <button id = "some_btn">Test button</button>
            </div>
        </div>

    <script type="text/javascript">
        function hide_things()
        {
            $('#some_div').hide();
            $('#some_btn').closest('.ui-btn').hide();
        }

        $(document).on('pageshow', '#main-page', function () 
        { 
            hide_things();
         });


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

    </script>
    </body>
</html>

Upvotes: 1

Views: 14660

Answers (2)

MartinOnTheNet
MartinOnTheNet

Reputation: 144

Try the following:

<div data-role="page" id = "main-page">
    <div data-role="header" style="overflow:hidden;"></div>
    <div data-role="content">
        <div id = "some_div">
            Test div
        </div>
        <button id = "some_btn">Test button</button>
    </div>
    $(document).on('pageinit', '#main-page', function () 
     {             
        var page = $('[data-role="page"]:last'); 
        page.find('#some_div').hide();
        page.find('#some_btn').closest('.ui-btn').hide();                 
     }); 
</div>

You could also try using pageshow, but for testing try unbinding the event first: [Replace script above with:]

$(document).off('pageshow').on('pageshow', '#main-page', function () 
{
    var page = $('[data-role="page"]:last'); 
    page.find('#some_div').hide();
    page.find('#some_btn').closest('.ui-btn').hide();                 
 });

Cheers,

Upvotes: 4

Mister Epic
Mister Epic

Reputation: 16723

You should indeed be using the pageshow event in JQM, I have this working here: http://www.nextdesigns.ca/jqm/index.html

The code is as follows:

<body> 
    <div data-role="page" id = "main-page">
            <div data-role="header" style="overflow:hidden;">
            </div>
            <div data-role="content">
                <div id = "some_div">
                    Test div
                </div>
                <button id = "some_btn">Test button</button>
            </div>
        </div>

        <script type="text/javascript">
        function hide_things()
        {
            $('#some_div').hide();
            $('#some_btn').closest('.ui-btn').hide();
        }

        $(document).on('pageshow', '#main-page', function () 
        { 
            alert("About to hide your stuff!");
            hide_things();
         });
    </script>
</body>

Upvotes: 0

Related Questions