pagina - llamar javascript desde html
Los contenidos dinámicos de jQuery Mobile no se actualizan (1)
Tengo una ventana emergente común de JQM en varias páginas. Desde cada página, los contenidos de la ventana emergente se actualizan usando los datos de la página. En la primera carga de la página, puedo ver el contenido actualizado en la ventana emergente. Sin embargo, cuando cargo datos nuevos en popup div, aún obtengo los datos más antiguos en el widget emergente.
Si examino el HTML interno de la ventana emergente, me da nuevos contenidos pero no los puedo ver en la ventana emergente.
Aquí está mi código de ejemplo:
<body>
<div id="common-popup">
<div id="data-popup" data-role="popup">'';
<p>Name: N/A<p>
<p>DOB: N/A <p>
</div> <!--Popup div ends -->
</div>
<div data-role="page" id="page1">
<input type=''text'' id=''p1_name'' value=''''>Name: </input>
<input type=''text'' id=''p1_dob'' value=''''>DOB: </input>
<button class="update-data" id="b1"/>
<a href="#data-popup"> Watch Data </a>
</div>
<div data-role="page" id="page2">
<input type=''text'' id=''p2_name''>Name: </input>
<input type=''text'' id=''p2_dob''>DOB: </input>
<button class="update-data" id="b2"/>
<a href="#data-popup"> Watch Data </a>
</div>
</body>
<script type="text/javascript">
$(''.update-data'').on(''vclick'', function(){
var id = $(this).id;
id = id.split('''');
var htm = ''<div id="data-popup" data-role="popup">'';
htm += ''<p>Name: '' + $(''#p'' + id[1] + ''_name'').val() +''<p>'';
htm += ''<p>Name: '' + $(''#p'' + id[1] + ''_name'').val() +''<p>'';
$(''#common-popup'').html(htm).trigger(''create'');
});
</script>
En el código anterior si examino el innerHTML usando:
console.log ("Common Inner Html:" + document.getElementById (''common-popup''). innerHTML);
Puedo ver los contenidos actualizados, sin embargo, cuando abro el pupup, aún veo los contenidos anteriores. Por favor, hágame saber cómo actualizar los contenidos en emergente
JS Fiddle: http://jsfiddle.net/bhavik89/49QwL/1/
En Fiddle solo puedo ver los contenidos iniciales, no se actualizan con la actualización
En lugar de poner la ventana emergente en un DIV, simplemente déjalo debajo del cuerpo. Luego, cuando lo vuelva a crear, deje el nivel superior DIV allí y simplemente reemplace los contenidos:
<div id="data-popup" data-role="popup" data-theme="a" >
<div >
<p>Name: N/A</p>
<p>DOB: N/A </p>
</div>
</div>
Asegúrese de que su enlace tenga data-rel = "popup":
<a href="#data-popup" data-rel="popup"> Watch Data </a>
Dele a su botón de actualización un texto para que podamos ver el botón:
<button class="update-data" id="b1" >Update</button>
Con esto en su lugar inicialice la ventana emergente en el documento listo y luego, en el botón de actualización, haga clic en, reemplace el HTML emergente, llame a enhanceWithin () y, finalmente, llame a la ventana emergente ("actualizar") para actualizar el widget emergente:
$(function(){
$("#data-popup").enhanceWithin().popup();
});
$(document).on("pagecreate", "#page1", function(){
$(''.update-data'').on(''vclick'', function(){
var id = $(this).prop("id");
id = id.split('''');
var htm = ''<div>'';
htm += ''<p>Name: '' + $(''#p'' + id[1] + ''_name'').val() +''<p>'';
htm += ''<p>DOB: '' + $(''#p'' + id[1] + ''_dob'').val() +''<p>'';
htm += ''</div>'';
$("#data-popup").html(htm).enhanceWithin().popup("refresh");
});
});
Aquí hay una DEMO en funcionamiento