Estoy añadiendo dinámicamente marcado a mi solicitud un código de ejemplo a continuación ..aplicación Muestra sin estilo HTML antes de que presta jQuery Mobile
$(document).bind("pagechange", function (event, ui) {
var header = '<h3>' + appNames[i] + '</h3>';
var ulHeader = '<ul data-role="listview" id="myAppsGridTable" data-inset="true">';
..
$('.myBodyContent', ui.toPage).append(collapse + header + ulHeader + entire_list + '</ul>' + '</div>');
$('#NicksPage').trigger('create');
});
que tienen una referencia a esta página en mi página Default.aspx y una referencia a jquery mobile en la página maestra Cuando navega a Predeterminado, el usuario ve html sin pintar agregado en la página, luego aparece un parpadeo y aparecen los estilos de dispositivo móvil de jquery. ¿De todos modos puedo deshacerme de mostrar el html no visto al usuario antes de agregar los estilos de móvil de jquery?
Aquí es una copia de mi página maestra:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="UserMobile.master.cs" Inherits="User.Mobile.UserMobile" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Css/jquery.mobile.custom.structure.min.css" rel="stylesheet" type="text/css" />
<link href="Css/jquery.mobile.custom.theme.min.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div data-role="page" data-theme="b" id="NicksPage">
<div data-role="header" data-position="fixed" data-theme="b">
<asp:ContentPlaceHolder ID="TopHeaderContent" runat="server"></asp:ContentPlaceHolder>
</div><!-- /header -->
<div data-role="content" class="myBodyContent">
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="b">
<asp:ContentPlaceHolder ID="FooterContent" runat="server"></asp:ContentPlaceHolder>
<input type="hidden" id="collapse_value" value="false" />
</div><!-- /footer -->
</div><!-- /page -->
//Combined jquery 1.8 and jquery mobile files in one
<script src="Js/JQ_JQM_combined.js" type="text/javascript"></script>
//Makes ajax calls to get data
<script src="Js/UserMobile.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// disable page transitions
$.mobile.ajaxEnabled = false;
$.mobile.defaultPageTransition = 'none';
});
</script>
<asp:ContentPlaceHolder ID="ScriptContent" runat="server"></asp:ContentPlaceHolder>
</body>
</html>
Incluso la página de inicio tiene el problema de parpadeo, donde se hace sin estilo y después de un período de tiempo de manera adecuada al estilo jQuery Mobile ..
<%@ Page Title="" Language="C#" MasterPageFile="~/Mobile/UserMobile.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="User.Mobile.Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TopHeaderContent" runat="server">
<h1>
Applications</h1>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div data-role="controlgroup">
<a href="MyStuff.aspx?name=nick&id=1234" data-role="button">My Stuff</a>
<a href="Employees.aspx?name=nick&id=1234" data-role="button">Employees</a>
<a href="list.aspx?name=nick&id=1234" data-role="button">List</a>
</div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="FooterContent" runat="server">
<div class="lines">
<div class="footerCopyrightContainer">
<div class="footerCopyright">
©2012 NICK ALL RIGHTS RESERVED.</div>
</div>
</div>
</asp:Content>
He cambiado mi código para reflejar su ejemplo de violín, pero sigo recibiendo el parpadeo. Pero el "período de tiempo en el que el parpadeo de la sin estilo de labrado es más corto que el usuario sigue viendo la página sin estilo en el navegador móvil. Se puede echar un vistazo fo forma en que lo configuré Me estoy perdiendo algo?
$(document).bind("pagecreate", function (event, ui) {
//gets params needed from querystring
arrQrStr = getQueryStringParams();
name = arrQrStr["name"];
id = arrQrStr["id"];
});
$(document).delegate('div[data-role=page]', 'pagebeforeshow', function (e, data) {
var employees = null;
//returns string of html needed
employees = getData(name, id);
$('.myBodyContent', this).html(employees);
$(this).trigger('create');
});
getData llamada AJAX ..
$.ajax({
type: "POST",
url: "MobileService.svc/REST/GetData",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ id: id}),
dataType: "json",
async: false,
success: function (msg) {
el problema tiene viene de esto:
<script type="text/javascript">
$(document).ready(function() {
// disable page transitions
$.mobile.ajaxEnabled = false;
$.mobile.defaultPageTransition = 'none';
});
</script>
Si tomo esto de la página maestra el parpadeo desaparece, se navega una página bien, pero lo hará de los datos no mostrar. Al sacar este script se rompen las llamadas ajax y los eventos móviles de jquery no se activan (no estoy seguro por qué)
¿La función 'getData' usa un proceso asincrónico como AJAX? – Jasper
usa ajax pero async está configurado como falso –
Existe la posibilidad de que el uso de una solicitud síncrona cree su parpadeo. En lugar de utilizar una solicitud de AJAX para obtener los datos, ¿por qué no vincular a un documento externo que utiliza un lenguaje del lado del servidor para obtener los datos y crear la página necesaria? Parece que estás complicando el problema ... – Jasper