CODEWITHSUNDEEP
javascriptjquery-mobile
outlookrperson
outlookrperson

Reputation: 2821

How to bind the event "pageshow" for an external HTML file with JQuery Mobile

I´m developing a web app using JQuery Mobile (ver 1.3.0). If a have only one HTML file, I can bind the "pageshow" event to the page div:

<!DOCTYPE HTML>
<html>
<head>
    <title>Funil de Vendas</title>
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script src="lib/jquery-1.8.2.min.js"></script>
    <script src="lib/jquery.mobile-1.3.0.min.js"></script>

    <script>
        var nice = false;
        $(document).ready( function(){
            $("#other_page").bind('pageshow',function() {
                alert('The page was called!');
            });     
        });
    </script>       
</head>
<body>
        <div data-role="page" class="Page" id="home_page">
            <div data-role="content">
                <a data-role="button"  href="#other_page" data-inline="true" style="width:300px;">Iniciar</a>
            </div>
        </div>
    </div>  

    <div data-role="page" class="Page" id="other_page">
        <div data-role="content">
            ...
        </div>
        ...
        ...
        ...
    </div>
</body></html>

How can I do the same using multiples HTML files. I cannot bind to the page the because this div is in another HTML file.

<div data-role="page" class="Page" id="home_page">
    <div data-role="content">
        <a data-role="button"  href="other_page.html" data-inline="true" style="width:300px;">Iniciar</a>
    </div>
</div>

Thanks in advance!

Upvotes: 0

Views: 2725

Answers (1)

Gajotres
Gajotres

Reputation: 57309

There are 2 possible ways here:

First solution. In case you are using multiple HTML files and all of them are loaded with an ajax (this is a standard jQuery Mobile way of page loading). In this case all of javascript must be loaded into the first html file, because jQM will load only BODY content of other html files.

Example :

index.html :

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
                $(document).on('pagebeforeshow', '#index', function(){       
                        alert('This is a first page!');
                    });

                    $(document).on('pagebeforeshow', '#second', function(){       
                        alert('This is a second page!');                
                    }); 
        </script>
    </head>
    <body>
        <div data-role="page" id="index" data-theme="b">
            <div data-role="header" data-theme="a">
                <h3>First page</h3>
            </div>

            <div data-role="content">
                        <a data-role="button" id="some-btn" href="second.html">Open next page</a>                        
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div>
    </body>
    </html>

second.html :

    <div data-role="page" id="second" data-theme="b">
        <div data-role="header" data-theme="a">
            <h3>Second page</h3>
        </div>

        <div data-role="content">
                This is a second page
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>

Second solution. In case you have multiple HTML files but all your pages are linked wit links having rel="external" attribute or ajax is turned of on app level. In this case every html page must have its own HEAD and BODY. And every page must have it own javascript.

Example :

index.html :

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
                $(document).on('pagebeforeshow', '#index', function(){       
                        alert('This is a first page!');
                    });
        </script>
    </head>
    <body>
        <div data-role="page" id="index" data-theme="b">
            <div data-role="header" data-theme="a">
                <h3>First page</h3>
            </div>

            <div data-role="content">
                        <a data-role="button" id="some-btn" href="second.html" rel="external">Open next page</a>                         
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div>
    </body>
    </html>

second.html :

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
                    $(document).on('pagebeforeshow', '#second', function(){       
                        alert('This is a second page!');                
                    }); 
        </script>
    </head>
    <body>
        <div data-role="page" id="second" data-theme="b">
            <div data-role="header" data-theme="a">
                <h3>Second page</h3>
            </div>

            <div data-role="content">
                    This is a second page
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div>
    </body>
    </html>

Upvotes: 2

Related Questions