Jquery mobile + plugin: execute javascript code after page transition

Question

I found this plugin for jquery mobile It works fine but I can't manage to execute any code at the load of the second page, I tried any kind of jqmobile event but nothing...

This is the code for page1.htm:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="css/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.mobile.pagination.css" rel="stylesheet" type="text/css" />

    <script type='text/javascript' src='Js/Libs/jquery-1.6.2.min.js'></script>
     <script type='text/javascript' src='Js/Libs/jquery.mobile-1.0b2.min.js'></script>
    <script type='text/javascript' src='Js/Libs/jquery.mobile.pagination.js'></script>
</head>
    <body>
        PAGE1
        <ul data-role="pagination">
            <li class="ui-pagination-prev"><a href="page0.htm">Prev</a></li>
            <li class="ui-pagination-next"><a href="page2.htm">Next</a></li>
        </ul>

    </body>
</html>

And this is the code for page2.htm :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">

    <link href="css/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.mobile.pagination.css" rel="stylesheet" type="text/css" />

    <script type='text/javascript' src='Js/Libs/jquery-1.6.2.min.js'></script>
     <script type='text/javascript' src='Js/Libs/jquery.mobile-1.0b2.min.js'></script>
    <script type='text/javascript' src='Js/Libs/jquery.mobile.pagination.js'></script>

    </head>
    <body onload="">
        <script type="text/javascript">

                        $('div').live('pageshow', function (event, ui) {
                            alert('This page was just hidden: ');
                        });

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

Have you tried to put the JS code into the page1? – Aurelio De Rosa Jan 30 '13 at 09:42 — Aurelio De Rosa, Jan 30 '13 at 09:42

score 2 · Accepted Answer · edited May 23 '17 at 10:29

Page content must be wrapped with data-role="page" DIV, something like this:

<div data-role="page" id="test2">

Here's a working example:

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
            <link href="http://filamentgroup.com/examples/jqm-pagination/jquery.mobile.pagination.css" rel="stylesheet" type="text/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 src="http://filamentgroup.com/examples/jqm-pagination/jquery.mobile.pagination.js"/></script>    
      </head>
      <body>
                <div data-role="page" id="test">        
                    PAGE1
                    <ul data-role="pagination">
                        <li class="ui-pagination-prev"><a href="test1.html">Prev</a></li>
                        <li class="ui-pagination-next"><a href="test2.html">Next</a></li>
                    </ul>    
            </div>   
      </body>
</html>

test2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <link href="http://filamentgroup.com/examples/jqm-pagination/jquery.mobile.pagination.css" rel="stylesheet" type="text/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 src="http://filamentgroup.com/examples/jqm-pagination/jquery.mobile.pagination.js"/></script>       
        </head>
    <body>
          <div data-role="page" id="test2">     
                    PAGE2
                    <ul data-role="pagination" id="second-page-pagination">
                        <li class="ui-pagination-prev"><a href="test.html">Prev</a></li>
                    </ul>            
                <script type="text/javascript">
                                $(document).on('pagebeforeshow', '#test2', function(event){  
                                      if(event.handled !== true) // This will prevent event triggering more then once
                                      {
                                alert('This page was just hidden: ');       
                                            event.handled = true;
                                      }
                                      return false;                                                             
                                });
                </script>
            </div>
    </body>
</html>

If you want to find out more why is this necessary take a look at this ARTICLE, to be transparent it is my personal blog. Or it can be found HERE.

Jquery mobile + plugin: execute javascript code after page transition

1 Answers1

test.html

test2.html