jquerymobile - includere .js e .html

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

  •  09-10-2019
  •  | 
  •  

Domanda

Nella mia domanda, sto usando più di pagina html per la visualizzazione del contenuto di ogni pagina e hanno file .js. Quando chiamo la pagina html quindi il file .js anche incluso. Negli .js, sto usando $('div').live('pageshow',function(){}). Sto chiamando il file HTML dal .js(using $.mobile.changePage("htmlpage")).

Il mio problema: prendere in considerazione, ho due file html. file di second.html viene chiamato con in one.js. quando mostro il second.html, che one.js tempo è ricarica di nuovo. Sto ottenendo l'avviso "one.js" poi "second.js"

uno.html 

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
    <script src="jquery-1.4.3.min.js"></script>
    <script src="jquery.mobile-1.0a2.min.js"></script> 
    <script src="Scripts/one.js"></script>
  </head> 
  <body>         
    <div data-role="page">
    </div>
  </body>
</html>

second.html 

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Sample </title> 
    <link rel="stylesheet" href="../jquery.mobile-1.0a2.min.css" />
    <script src="../jquery-1.4.3.min.js"></script>
    <script src="../jquery.mobile-1.0a2.min.js"></script>
    <script type="text/javascript" src="Scripts/second.js"></script>
  </head> 
  <body>
    <div data-role="page">   
      <div data-role="button" id="link" >Second</div>
    </div><!-- /page -->
  </body>
</html>

one.js 

$('div').live('pageshow',function()
{     
   alert("one.js");
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("second.html");                   
});

second.js 

$('div').live('pageshow',function(){
{     
   alert('second.js');  
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("third.html");                   
});

Nota: Quando mostro forth.html quel tempo i seguenti file sono di ricarica (. One.js, second.js, terzo, js e fourth.js Ma ho bisogno fourth.js da solo). Ho cercato di usare la (function () {}) $ .document.ready; ma che js tempo non ha chiamato.

È stato utile?

Soluzione

L'evento si lega pageshow funzioni JavaScript che il fuoco ogni volta che la pagina viene caricata. Quando si carica la seconda pagina, si sta creando un'altra funzione pageshow che in realtà non c'è bisogno di creare.

Questo dovrebbe aiutare a risolvere il problema, se e solo se si definisce una volta: 

 $('div').live('pageshow',function(event, ui){
    alert('This page was just hidden: '+ ui.prevPage);
 });

 $('div').live('pagehide',function(event, ui){
    alert('This page was just shown: '+ ui.nextPage);
 });

Quando le pagine di transizione, questo vi avviserà con quello che pagina è stato appena mostrato, e che cosa pagina è stata solo nascosto.

Grande risorsa:
http://jquerymobile.com/demos/1.0a2/#docs/api /events.html

http://forum.jquery.com/topic/mobile-events-documentation

Altri suggerimenti

A cura per Oers commento (Siamo spiacenti, SO newbie qui):

Ecco un approccio alternativo al carico JS file in base alla pagina HTML corrente

avere un unico file di script che è incluso in ogni pagina della vostra applicazione, ma agisce come niente di più di un file ‘bootstrapper’ che rileva la pagina corrente e quindi inserisce il file JavaScript (s) nel DOM.

Questa funzione inserirà il codice Javascript: 

function insertScript(script, container) {
    var elem = document.createElement('script');
    elem.type = 'text/javascript';
    elem.src = 'Assets/Scripts/' + script + '.js';
    container.appendChild(elem);
}

E questo codice rileva la pagina corrente 

// The 'pagechange' event is triggered after the changePage() request has finished loading the page into the DOM 
// and all page transition animations have completed.
// See: https://gist.github.com/1336327 for some other page events
$(document).bind('pagechange', function(event){

// grab a list of all the divs's found in the page that have the attribute "role" with a value of "page"
    var pages = $('div[data-role="page"]'),
    // the current page is always the last div in the Array, so we store it in a variable
    currentPage = pages[pages.length-1],
    // grab the url of the page the  was loaded from (e.g. what page have we just ajax'ed into view)
    attr = currentPage.getAttribute('data-url');

// basic conditional checks for the url we're expecting
if (attr.indexOf('home.html') !== -1) {
    // now we know what page we're on we can insert the required scripts.
    // In this case i'm inserting a 'script.js' file.
    // I do this by passing through the name of the file and the 'currentPage' variable
    insertScript('search', currentPage);
}

// rinse and repeat...
if (attr.indexOf('profile.html') !== -1) {
    insertScript('profile', currentPage);
}

});

riferimento di collegamento

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