Jquery Mobile jump to start page by changing screen orientation

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

سؤال

I have built a jQuery Mobile application, but I have one issue I don't understand. I am using the multi-page functionality, but when you are in a page and you change the screen orientation, it jumps back to the start page. I do not understand how to stay on the current page when changing orientation.

I have tried this:

$(window).bind("orientationchange", function (e, ui) 
{ 
    var sPage ="#"+$.mobile.activePage.attr("id"); 
    $.mobile.changePage(sPage); 
    alert(sPage);
});

The alert() showed the correct page where I want to stay.

Below is an example how is made the multipage. If i select the option 'Instellingen', This pages showed. But when i change the smartphone orientation, it jumps back to the menu.

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Mobile</title>
<link rel="stylesheet"  href="../css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet"  href="../css/jquery.dataTables.css" />
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="../js/DataBase.js"></script>
<script type="text/javascript" src="../js/Webservice.js"></script>
<script type="text/javascript" src="../js/Misc.js"></script>
</head> 

<body>
<div id="Menu" data-role="page" data-title="Hoofdmenu">
  <div data-role="header">
    <h1>Menu</h1>
  </div>
  <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
        <li data-role="list-divider">Hoofd Menu</li>
                <li><a href="#Instellingen"><h3>Instellingen</h3>
<p>Algemene programma instellingen</p></a></li>
</ul>
</div>

<div id="Instellingen" data-role="page" data-title="Instellingen">
  <div data-role="header">
    <h1>Programma instellingen</h1>
     <a data-role="button" data-direction="reverse" data-rel="back" href="#Menu" data-icon="arrow-l" data-iconpos="left" data-theme="b">
        Back</a></div>
   <div data-role="content"  data-theme="b">
  <ul data-role="listview" data-inset="true" >
      <li><div><h1>WCF adres<input id="Adress" type="url"/></h1> </div> 
      <div data-role="controlgroup" data-type="horizontal">
        <a id="Test" data-role="button">Test</a>
        <a id="Opslaan" data-role="button">Opslaan</a>
                </div></li>
  </ul>


<script type="text/javascript">
$(document).ready(function () {
    $("#Test").click(function () {
        if ($("#Adress").val().length > 0)
            CheckWebService($("#Adress").val(), function (Check) { alert(Check); })
        else
            alert("Geen adres of error")
    });
    $("#Opslaan").click(function () { saveURL($("#Adress").val()); });
    $("#Dummy").click(function () { alert("dummy"); });
    $("#ResetDatabase").click(function () { $.mobile.showPageLoadingMsg("b", "Sync");  ResetDatabase(); });

});

</script>

</body>
</html>
هل كانت مفيدة؟

المحلول

I had the exact same issue for months, until today I added the screenSize parameter to the android manifest, as follows:

android:configChanges="orientation|screenSize|keyboardHidden"

Hope that helps!

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top