Page events are not triggered while navigating between pages in multipage html web files

StackOverflow https://stackoverflow.com/questions/23302148

  •  09-07-2023
  •  | 
  •  

Domanda

I am trying to understand jquery mobile page events in multi page html web page.

when I am trying to navigate to window2 within the index1.html , the page events are being triggered and transition is happening.

However if I try to navigate between index1.html to index3.html the page events of index3.html are not being triggered and page transition is happening.

when I tried with adding data-ajax ="false" to index3.html href, the page events of page3.html are being fired. However , the transition is not happening.

can someone pls help me understand 1)why the events are not getting fired? 2)issues in using data-ajax="false"

Below are the pages I am trying to navigate between

index1.html:

<!DOCTYPE html> 
<html> 
<head> 
  <meta name=viewport content="user-scalable=no,width=device-width" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head> 
<body> 
<div data-role="page" id="home">
  <div data-role="header">
    <h1>Home</h1>
  </div>
  <div data-role="content">
    <p> Window content 1 </p>  
    <a href="#win2"> Window 2 (into the DOM) </a>
    <br /><br />

    <a href="index3.html" data-transition="pop" > 
          Window 3 in index3.html (data-dom-cache=false) </a>
    <br /><br />


    <br /><br />
  </div>
</div>
<div data-role="page" id="win2" data-add-back-btn="true">
  <div data-role="header">
    <h1>Window 2</h1>
  </div>

  <div data-role="content">
    <p> Window content 2 </p>
  </div>
</div>
</body>
</html>

    $(document).bind ("pagebeforeload", function (event, data)
{
  alert ("pagebeforeload data.url = " + data.url);
});

$(document).bind ("pageload", function (event, data)
{
  alert ("pageload data.url = ");
});

$(document).bind ("pageloadfailed", function (event, data)
{
  alert ("pageloadfailed data.url = " + data.url);
});


$("#home").on ("pagebeforecreate", function (event)
{
  alert ("pagebeforecreate id=" + this.id);
});

$("div:jqmData(role=page)").on ("pagecreate", function (event)
{
  alert ("pagecreate id=" + this.id);
});

$("div:jqmData(role=page)").on ("pageinit", function (event)
{
  alert ("pageinit id=" + this.id);
});


$("div:jqmData(role=page)").bind ("pagebeforeshow", function (event, ui)
{
  alert("pagebefore show");

});

$("div:jqmData(role=page)").bind ("pageshow", function (event, ui)
{
    alert("pageshow");

});

$("div:jqmData(role=page)").bind ("pagebeforehide", function (event, ui)
{
        alert("pagebeforehide");
});

$("div:jqmData(role=page)").bind ("pagehide", function (event, ui)
{
        alert("pagehide");
});



**index3.html**

<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head> 

<body> 

<div data-role="page" id="win3" data-add-back-btn="true">
  <div data-role="header">
    <h1>Window 3</h1>
  </div>

  <div data-role="content">
    <p> Window content 3 </p>
  </div>
</div>

</body>
</html>
<script>
$("div:jqmData(role=page)").bind ("pagebeforeshow", function (event, ui)
{
  alert("pagebefore show3");

});

$("div:jqmData(role=page)").bind ("pageshow", function (event, ui)
{
    alert("pageshow3");

});

$("div:jqmData(role=page)").bind ("pagebeforehide", function (event, ui)
{
        alert("pagebeforehide3");
});

$("div:jqmData(role=page)").bind ("pagehide", function (event, ui)
{
        alert("pagehide3");
});



</script>
È stato utile?

Soluzione

This is called Single Page Model, not Multi-Page.

As JQM uses Ajax Navigation to switch between pages, when you call an external page e.g. Index2.html, it loads first data-role=page in that page and it neglects all other tags.

Hence, to solve you first problem, you need to place JS code of that page inside data-role=page to get loaded within the page.

When you use data-ajax=false or rel=external, you prevent JQM from loading page via Ajac and instead it is load via HTTP as a fresh page with all tags loaded. That's why il event works.

Altri suggerimenti

So some simple explanation.....

1) The events most likely are firing and you just aren't seeing the output. This is quite common, you should try using different events to ensure you are using the correct one. Post some code via a jsfiddle and we can help you debug it.

2) If you turn ajax off for a link you are effectively turning off the ajax transitions and you just load the page as if it were accessed directly. If when you load the page like this, you do see the expected results, it proves that the page events are firing.

Take a look here for some explanation of the order in which events fire;

http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top