Question

我正在使用jQuery mobile开发一个应用程序，json带来了数据。我在点击按钮时加载内容时出现问题，但如果我直接进入链接，则内容就在那里。

请看，

如果您点击任何图片，则会显示没有内容的网页：http://www.example.com.ar/catalogoar/

但如果您输入http://www.example.com.ar/catalogoar/arma_ampliada.html?id_arma=1，则内容就在那里。

我找不到问题。我已经尝试了

$("#tabla_arma").table('refresh');

Answer 1

请在发布更多相关问题之前了解jQuery Mobile的工作原理。我不是想攻击你，但是这里的人不喜欢这样的问题。

为了能够解决这个问题，你需要了解jQuery Mobile页面处理是如何工作的，你无法解决这个问题。

当jQuery Mobile处理页面时，只有第一个 HTML 文件完全加载到 DOM 中，所有中间文件仅部分加载。当我说部分时，我的意思是 HEAD 将被剥离，只会加载FIRST data-role =“page”。

因此，如果您有2个页面，例如，假设第一个名称为 index.html ，第二个名称为 arma_ampliada.html 。当第二页初始化时，只有data-role =“page”＆lt; div＆gt;内的内容将加载到DOM中，其他所有内容都将被丢弃，包括您需要加载数据的HEAD javascript。

详细了解 here ，您还可以找到解决方案。

您的 arma_ampliada.html 页面应如下所示：

<html>
<head>
    <title>Catálogo de Armas</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <!-- CSS -->
    <link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" />
    <link rel="stylesheet" href="css/listview-grid.css">
    <link rel="stylesheet" href="css/estilos.css">

    <!-- JS -->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).on("mobileinit", function()
        {
            $.mobile.defaultPageTransition = 'slide';
        });
    </script>
    <script src="js/jquery.mobile-1.4.2.min.js"></script>
    <!-- <script src="js/cordova.js"></script> -->
</head>
<body>
<div data-role="page" data-theme="a" id="demo-page" class="my-page">
    <script>
        var armas;

        function obtenerArmaAmpliada(id_arma){
            $.ajax({
                type: 'GET',
                data: {'id_arma' : id_arma},
                dataType : 'jsonp',
                url: 'service/datos.php?jsoncallback=?',
                success:function(data){
                    armas = data.armas;
                    mostrarArmas();
               },
               error: function() {
                 alert("error");
               }
            });
        }


        function mostrarArmas ()
        {
            $("#arma_ampliada").html('');
            $.each(armas, function(indice, receta) 
            {
                $("#arma_ampliada").append('<tr><td><a href="arma_ampliada.html?id_arma='+receta.id+'"><img src="'+receta.foto+'" class="ui-li-thumb" ><h2>'+receta.marca+'</h2><p>'+receta.modelo+'</p></a></td></tr>');
            });
            $("#tabla_arma").table('refresh');
        }

        $(function(){
            var Url = location.href;
            Url = Url.replace(/.*\?(.*?)/,"$1");
            Variables = Url.split ("&");
            for (i = 0; i < Variables.length; i++) 
            {
                Separ = Variables[i].split("=");
                eval ('var '+Separ[0]+'="'+Separ[1]+'"');
            }

            obtenerArmaAmpliada(id_arma);
        });
    </script>
    <div data-role="header" style="overflow:hidden;">
        <h1>Cat&aacute;logo de Armas</h1>
        <a href="index.html" data-icon="back" data-iconpos="notext" class="ui-btn-right">Opciones</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#">Marcas</a></li>
                <li><a href="#">Calibre</a></li>
                <li><a href="#">Tipo</a></li>
            </ul>
        </div>
    </div>

    <div role="main" class="ui-content">
        <div id="tabla_arma">
            <table id="arma_ampliada">

            </table>
        </div>
    </div><!-- /content -->

</div><!-- /page -->
</body>
</html>

内容空载（jquery mobile）

1 个答案: