JQuery pagecontainer Änderung auf der gleichen Seite sperrt

Ich verwende Cordova 6.1.1, JQuery 2.1.4 und JQueryMobile 1.4.5. Wenn ich bereits auf main.html bin und die Seiten in main.html ändere, stürzt die Seite ab und nichts wird anklickbar. Kann mir jemand sagen, warum das so ist? Ich verwende den folgenden Code, um die Seiten zu wechseln.JQuery pagecontainer Änderung auf der gleichen Seite sperrt

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title>My App</title> 
     <meta name="description" content="My App" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
     <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> 
    </head> 

    <body> 
     <div id="mainPage" data-role="page"> 
      <div data-role="header" data-theme="c"> 
       <button id="logout" data-role="button" data-inline="true" data-mini="true">Logout</button>    
       <h1>Header 1</h1> 
      </div><!-- /header --> 
      <div role="main" class="ui-content"> 
       <div id="current"></div>     
       <button id="button1" class="ui-btn ui-btn-b ui-corner-all top-margin-1-5">Button 1</button> 
       <button id="button2" class="ui-btn ui-btn-b ui-corner-all top-margin-1-5">Button 2</button> 
       <button id="button3" class="ui-btn ui-btn-b ui-corner-all top-margin-1-5">Button 3</button> 
      </div><!-- /content --> 
     </div><!-- /page -->  
    </body> 
</html>

Javascript

$(document).on("pagebeforeshow", "#mainPage", function() { 
    var $mainPage = $("#mainPage"); 
    var $button1 = $("#button1", $mainPage);   
    var $button2 = $("#button2", $mainPage); 
    var $button3 = $("#button3", $mainPage); 
    var $logout = $("#logout", $mainPage); 

    $logout.off("click").on("click", function(e) { 
     e.preventDefault(); 
     // do something 
    }); 

    $button1.off("click").on("click", function(e) { 
     e.preventDefault(); 
     $("body").pagecontainer("change", "main.html", {reload: true}); // locks up page    
    }); 

    $button2.off("click").on("click", function(e) { 
     e.preventDefault(); 
     $("body").pagecontainer("change", "main.html", {allowSamePageTransition: true}); // doesn't lock up page 
    }); 

    $button3.off("click").on("click", function(e) { 
     e.preventDefault(); 
     // do something 
    }); 
});

CSS

h1,h2,h3,h4,h5 { 
    color:#0071bc; 
} 
/* Change border radius of icon buttons */ 
.ui-btn-icon-notext.ui-corner-all { 
    -webkit-border-radius: .3125em; 
    border-radius: .3125em; 
} 
/* Change color of JQuery Mobile page headers */ 
.ui-title { 
    color:#fff; 
} 
/* Center-aligned text */ 
.text-center { 
    text-align:center; 
} 
/* Top margin for some elements */ 
.top-margin-1-5 { 
    margin-top:1.5em; 
} 
h2.text-danger, 
h3.text-danger { 
    color:red; 
}

Quelle

2016-04-06 Kal

Der Code, den Sie gepostet haben, sollte funktionieren. Ich habe eine Mini-Demonstration zum Seitencontainer [hier] gemacht (https://www.elitesystemer.no/demo/test/36459671/index.html), die hilfreich sein könnte. Andernfalls müssen Sie mehr Code posten. –

Ist die Einstellung allowSamePageTransition: true help? – ezanker

Die Verwendung von allowSamePageTransition hat geholfen. Es hat die Seite geladen, ohne sie zu sperren, aber als ich wieder Reload verwendet habe, habe ich es gesperrt. Es ist auch erwähnenswert, dass das Neuladen nicht auf jeder Seite gesperrt wird. Ich werde mehr Quellcode einfügen, in der Hoffnung, dass mir jemand helfen kann, herauszufinden, was falsch ist. – Kal

ich alle reload liquidiert Wechsel ruft allowSamePageTransition anstatt zu sein.

Quelle

2016-04-18 13:24:28 Kal

JQuery pagecontainer Änderung auf der gleichen Seite sperrt

Antwort

Verwandte Themen