$.mobile.loadPage() not Working

Question

$.mobile.loadPage('view-video'); is not working, and i have sample code bellow. Please help me to resolve this issue.

I am getting the Alert "Function Triggered"

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="index">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>I Am Now A Mobile Developer!!</p>
    <a href="javascript:void(0)" class="loadVideo">Load Video</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

<div data-role="page" id="view-video">
  <div data-role="main" class="ui-content">
    Your Video Will be Here.
  </div>
</div> 

<script type="text/javascript">
    $(document).on('click', '.loadVideo', function(e){
        alert('Function Triggered');
        $.mobile.loadPage('view-video');
    });
</script>
</body>
</html>

Michael · Accepted Answer · 2017-03-05T18:45:15.513

1

First the documentation says

Note: jQuery.mobile.loadPage is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Use the pagecontainer widget's load() method instead.

Got it working in this Fiddle with JavaScript. Instead of $(':mobile-pagecontainer').pagecontainer('load', "view-video); it have to be $(':mobile-pagecontainer').pagecontainer('change', "#view-video");! (change instead of load and with # cause it's an id)

See jQuery Mobile Demos for detail instructions. Important is that each page has it data-role="page" attribute => jQuery Mobile Tutorial

edited Mar 05 '17 at 18:45

answered Mar 05 '17 at 15:04

Michael

189
1
17

Now i have changed the code to $(":mobile-pagecontainer").pagecontainer("load", "view-video.php"); still its not working – rkaartikeyan Mar 05 '17 at 15:10
**view-video.php** is wrong, it have to be the id of the "page" so without **.php** => edited my answer – Michael Mar 05 '17 at 15:17
https://jsfiddle.net/bnkb0fuk/2/ please have a look – rkaartikeyan Mar 05 '17 at 15:32
See my updated answer with full working example – Michael Mar 05 '17 at 15:37
The problem is i want to load view-video page via javascript, not with View-Video – rkaartikeyan Mar 05 '17 at 15:42
1

You didn't specify this in your question but anyway now updated again my answer with working solution to do with javascript. – Michael Mar 05 '17 at 16:13
my question was $.mobile.loadPage('view-video'); this is not working, because i want to load the page with javascript, not with tag. – rkaartikeyan Mar 05 '17 at 17:57

$.mobile.loadPage() not Working

1 Answers1