jquery mobile - incluir Js y .html

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

  •  09-10-2019
  •  | 
  •  

Pregunta

En mi solicitud, estoy usando más de página HTML para mostrar el contenido y cada página tiene propio archivo .js. Cuando llamo a la página HTML a continuación, Js también se incluye. En los js, estoy usando $('div').live('pageshow',function(){}). Estoy llamando el archivo html desde el .js(using $.mobile.changePage("htmlpage")).

Mi problema: tener en cuenta, tengo dos archivos html. second.html archivo se llama con el one.js. cuando muestro la second.html, que one.js vez que se recarga de nuevo. Me estoy haciendo la alerta "one.js" y luego "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: Cuando muestro forth.html ese momento los siguientes archivos son de recarga (. One.js, second.js, tercero, JS y fourth.js Pero necesito fourth.js solo). He intentado utilizar el (function () {}) $ .document.ready; pero que Js tiempo no llamaron.

¿Fue útil?

Solución

El evento pageshow une las funciones de JavaScript que el fuego cada vez que se carga la página. Cuando se carga la segunda página, va a crear otra función pageshow que en realidad no es necesario crear.

Esto debería ayudar a resolver su problema, si y sólo si se define una vez: 

 $('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);
 });

Cuando las páginas de transición, esto va a alertar con lo que se acaba de página se muestra, y lo que la página estaba oculto.

Gran recurso:
http://jquerymobile.com/demos/1.0a2/#docs/api /events.html

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

Otros consejos

Editado por Oers comentario (Lo sentimos, SO novato aquí):

Este es un enfoque alternativo a la carga JS archivos basándose en la página HTML actual

Tener un fichero único que se incluye en cada página de su aplicación, sino que actúa como nada más que un archivo ‘programa previo’ que detecta la página actual y luego inserta el archivo JavaScript (s) en el DOM.

Esta función insertará el código JavaScript: 

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

Y el código detecta la página actual 

// 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);
}

});

Reference Enlace

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top