Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

$.mobile.changePage to Page2.html and performing $.mobile.changePage('#', { transition: 'slide', allowSamePageTransition: true) causes 'Uncaught TypeError: Cannot call method '_trigger' of undefined' #6382

Closed
shenlong opened this issue Aug 23, 2013 · 5 comments
Closed

$.mobile.changePage to Page2.html and performing $.mobile.changePage('#', { transition: 'slide', allowSamePageTransition: true) causes 'Uncaught TypeError: Cannot call method '_trigger' of undefined' #6382

shenlong opened this issue Aug 23, 2013 · 5 comments

Comments

@shenlong
Copy link

Hi Guys,

Uncaught TypeError: Cannot call method '_trigger' of undefined is being triggered!!!!

Files as follows:
index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test index</title>
<meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link  rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" type="text/css"/>

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="index">
    <script>
        $(document).on('pageinit','#index', function() {
            $('#linkpage1').click(function() {
                $.mobile.changePage('#', { transition: 'slide', allowSamePageTransition: true, reverse: false});
            });
            $('#linkpage2').click(function() {
                $.mobile.changePage('page2.html', { transition: 'slide'});
            });
        });
    $(document).on('pageshow','#index', function() {
    // Fix the same page transition bug.
    // https://github.com/jquery/jquery-mobile/issues/4078
    $(this).addClass('ui-page-active');
    });
    </script>
    <div data-role="header">
        <h1>Test 1</h1>
    </div>
    <div data-role="content">
        <label>Link: </label>
        <button id="linkpage1">Transit self</button>
        <button id="linkpage2">Transit page 2</button>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
</body>
</html>

page2.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page 2 index</title>
<meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link  rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" type="text/css"/>

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page2">
    <script>
        $(document).on('pageinit','#page2', function() {
            $('#linkself').click(function() {
                $.mobile.changePage('#', { transition: 'slide', allowSamePageTransition: true, reverse: false});
            });
            $('#linkpage1').click(function() {
                $.mobile.changePage('index.html', { transition: 'slide', reverse: true});
            });
        });

        $(document).on('pageshow','#page2', function() {
            // Fix the same page transition bug.
            // https://github.com/jquery/jquery-mobile/issues/4078
            $(this).addClass('ui-page-active');
        });
    </script>
    <div data-role="header">
        <h1>Test Page 2</h1>
    </div>
    <div data-role="content">
        <button id="linkself">Transit self</button>
        <button id="linkpage1">Transit page 1</button>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
</body>
</html>

I've plugged in the workaround :

$(document).on('pageshow','#page2', function() {
    $(this).addClass('ui-page-active');
});

which works for the first page. But after transiting to the page2,html, performing another samePageTransition causes error!!!
@jaspermdegroot
Copy link
Contributor

@shenlong

There are some issues with your markup. The second page is pulled in with AJAX and we don't remove the initial page, so you have same ID for different buttons in DOM. We also strongly recommend to put scripts in the head. If I test with the following markup I don't get an error:

<!DOCTYPE html>
<html>
<head>
  <title>Test index</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!--
  <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"> 
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
  <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
  -->

    <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css">
    <script src="../../js/jquery.js"></script>
    <script src="../../js/"></script>

  <script>
    $(document).on('pagecreate','#index', function() {
      $('#linktopage1').on( "click", function() {
        $.mobile.changePage('#index', { transition: 'slide', allowSamePageTransition: true, reverse: false});
      });
      $('#linktopage2').on( "click", function() {
        $.mobile.changePage('page2.html', { transition: 'slide'});
      });
    });

    $(document).on('pagecreate','#page2', function() {
      $('#linkself').on( "click", function() {
        $.mobile.changePage('#page2', { transition: 'slide', allowSamePageTransition: true, reverse: false});
      });
      $('#linkpage1').on( "click", function() {
        $.mobile.changePage('index.html', { transition: 'slide', reverse: true});
      });
    });
  </script>
</head>
<body>
<div data-role="page" id="index">
    <div data-role="header">
        <h1>Test 1</h1>
    </div>
    <div data-role="content">
        <label>Link: </label>
        <button id="linktopage1">Transit self</button>
        <button id="linktopage2">Transit page 2</button>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Test Page 2 index</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!--
  <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"> 
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
  <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
  -->

    <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css">
    <script src="../../js/jquery.js"></script>
    <script src="../../js/"></script>

  <script>
    $(document).on('pagecreate','#index', function() {
      $('#linktopage1').on( "click", function() {
        $.mobile.changePage('#index', { transition: 'slide', allowSamePageTransition: true, reverse: false});
      });
      $('#linktopage2').on( "click", function() {
        $.mobile.changePage('page2.html', { transition: 'slide'});
      });
    });

    $(document).on('pagecreate','#page2', function() {
      $('#linkself').on( "click", function() {
        $.mobile.changePage('#page2', { transition: 'slide', allowSamePageTransition: true, reverse: false});
      });
      $('#linkpage1').on( "click", function() {
        $.mobile.changePage('index.html', { transition: 'slide', reverse: true});
      });
    });
  </script>
</head>
<body>
<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Test Page 2</h1>
    </div>
    <div data-role="content">
        <button id="linkself">Transit self</button>
        <button id="linkpage1">Transit page 1</button>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
</body>
</html>

Closing as cannot reproduce.

@shenlong
Copy link
Author

Hi @uGoMobi,

Thanks for your reply. You mean that using pagecreate is recommended than using pageinit? The thing is i'm using external script.js, that's why I plug the scripts in the "< body >" section as $mobile.changepage will only load the first data-role="page". correct me if i'm wrong...

It doesn't work. I got a black page.
To reproduce:

  1. Click on "Transit self" --ok
  2. Click on "Transit to Page 2" --ok, goes to page2.html.
  3. Click on "Transit self" --not ok. black page.

@jaspermdegroot
Copy link
Contributor

@shenlong

I noticed that. The page is removed from the DOM if you transition to the same page (unless it's the initial page, because we never remove that from the DOM). That is something to look into as part of this issue #4078. I closed this ticket because I cannot reproduce the Uncaught TypeError.

@jaspermdegroot
Copy link
Contributor

@shenlong

Yes, we deprecate pageinit in 1.4 and you can bind to pagecreate instead.

@jaspermdegroot jaspermdegroot mentioned this issue Aug 28, 2013
Closed
@arschmitz arschmitz reopened this Sep 26, 2013
@arschmitz
Copy link
Contributor

need to look into why new page is not being pulled on same page transition on #4078

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@arschmitz @shenlong @jaspermdegroot