除非刷新，否则jQuery Mobile页面呈现不正确

时间：2013-07-11 22:50:26

标签： ajax html5 jquery jquery-mobile

我正在使用jQuery Mobile 1.3.1和Ajax构建照片库页面，以JSON格式从我的PHP服务器中检索照片。当我第一次导航到该页面时，显示#album_loader div并且#album_message div中没有​​任何内容（是，填充了本地存储变量）。根据我的代码，＃album_mesage div应包含内容，而#album_loader div应仅在发送Ajax请求时显示。我知道jQM有一些棘手的方法可以在每次查看页面时呈现内容，但同样的方法适用于我的其他页面。有任何想法吗？以下是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wedding</title>
    <link href="css/jquery-mobile.css" rel="stylesheet" />
    <link href="css/application.css" rel="stylesheet" />
    <script src="js/jquery.js"></script>
    <script src="js/global.js"></script>
    <script src="js/jquery-mobile.js"></script>
    <script src="phonegap.js"></script>
    <script src="js/connection.js"></script>
</head>
<body>
    <div data-role="page" id="album">
        <div id="header" data-role="header"><p align="center">Wedding</p></div>
        <div id="content" data-role="content">
            <div id="album_message" class="message" style="margin-bottom:20px;"></div>
            <div id="album_loader" class="message"><p align="center"><strong>Please Wait, Loading Album Data...</strong><br /><img src="images/loading.gif" /></p></div>
            <div id="album_photos"></div>
        </div>
        <div id="footer" data-role="footer" data-position="fixed">
            <nav data-role="navbar">
                <ul>
                    <li><a href="index.html" data-icon="home">Home</a></li>
                    <li><a href="instructions.html" data-icon="info">Instructions</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <script scr="js/fancybox.js"></script>
    <script>
    $(document).on('pagebeforeshow', '#album', function() {
        $('#album_loader').hide();
        var album_id = localStorage.getItem('album_id');
        var album_title = localStorage.getItem('album_title');
        var album_bride = localStorage.getItem('album_bride');
        var album_groom = localStorage.getItem('album_groom');
        var album_user = localStorage.getItem('album_user');
        $('#album_message').html('<p align="center"><strong>Album:</strong> ' + album_title + ' <br /><strong>By:</strong> ' + album_bride + ' & ' + album_groom + '</p>');
        $.ajax({
            url: server_url + "get-photos", 
            type: "post", 
            data: 'album_id=' + album_id, 
            dataType: 'json', 
            crossDomain: true,
            beforeSend : function (){
                $('#album_loader').show();
            },
            error: function() {
                $("#album_loader").hide();
                $('#album_message').removeClass("message").html('<p align="center">Server communication error while trying to retrieve album photos.</p>').addClass("errorm");
            },
            success: function(data) {
                $("#album_loader").hide();
                if (data.response === "true") {
                    $("#album_photos").append('<div id="grid" class="ui-grid-b"></div>');
                    var photos = data.photos.length;
                    $.each(data.photos, function(i, object) {
                            $("#grid").append('<div class="ui-block-b"><img src="' + photo_url + album_user + '/thumbnail/' + object.photo_thumbnail + '" class="img-border" /></div>');
                    });
                } else {
                    $('#album_message').removeClass("message").html('<p align="center">Error retrieving photos.</p>').addClass("errorm");
                }
            }
        });
    });
    </script>
</body>
</html>

此外，刷新图像后最终会显示，当我离开页面然后返回到图像时，图像会显示两次。这是为什么？是因为我要附加到div吗？我该如何解决这个问题？

2 个答案:

答案 0 :(得分：0)

（键盘发疯但我真的想帮忙。不要注意大写字母。）

前一段时间我遇到了同样的问题。这些元素不会在init或load上初始化。

但是你可以使用jQuery解决方案。

$("your element holder selector here").Trigger ("create");

请注意，当我在不同页面中的元素上使用两次时，有一个jq手机错误。

有一个jQuery移动方法，但它的列表，我没有让它在动态创建的html元素上正常工作：

$('your element holder selector here').Listview('refresh');

出于某种原因，仅适用于pageinit。

有关在jq mobile中创建动态对象的详细信息，请参阅http://jsfiddle.Net/elenj/101/

上的示例

或者，如果你不用蛮力弯曲和制动东西。

您可以随时添加jq mobile的类和span元素。

也许创建这样的修复功能并将其添加为插件？

哦，对于“为什么要发生这种情况”，你在jq mobile在init上做了魔术之后动态地向页面添加元素，并在分页加载时添加所有类和跨度。

你所做的就是在那之后添加它，并希望它们有一个每毫秒更新所有元素的功能。

如前所述，他们有一个处理刷新列表的函数。尝试我的解决方案，如果它不能工作，找到另一种解决方案。

答案 1 :(得分：0)

经过仔细检查后，我发现我的代码没有执行的原因是因为我在身体标签之外有JS。这是我页面的工作版本。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wedding</title>
<link href="css/jquery-mobile.css" rel="stylesheet" />
<link href="css/application.css" rel="stylesheet" />
        <link href="css/fancybox.css" rel="stylesheet" />
<script src="js/jquery.js"></script>
<script src="js/global.js"></script>
<script src="js/jquery-mobile.js"></script>
<script src="phonegap.js"></script>
<script src="js/connection.js"></script>
</head>
<body>
<div data-role="page" id="album">
<div id="header" data-role="header"><p align="center">Wedding</p></div>
<div id="content" data-role="content">
<div id="album_message" class="message" style="margin-bottom:20px;"></div>
<div id="album_loader" class="message">
<p align="center">
<strong>Please Wait, Loading Photos...</strong><br /><img src="images/loading.gif" />
</p>
</div>
<div id="album_photos"></div>
</div>
<div id="footer" data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home">Home</a></li>
<li><a href="instructions.html" data-icon="info">Instructions</a></li>
</ul>
</nav>
</div>
<script>
$(document).on('pagebeforeshow', '#album', function() {
var album_id = localStorage.getItem('album_id');
var album_title = localStorage.getItem('album_title');
var album_bride = localStorage.getItem('album_bride');
var album_groom = localStorage.getItem('album_groom');
var album_user = localStorage.getItem('album_user');
$('#album_message').html('<p align="center"><strong>Album:</strong> ' + album_title + ' <br /><strong>By:</strong> ' + album_bride + ' & ' + album_groom + '</p>');
$.ajax({
url: server_url + "get-photos",
type: "post",
data: 'album_id=' + album_id,
dataType: 'json',
crossDomain: true,
beforeSend : function (){
                 $('#album_loader').show();
             },
error: function() {
$("#album_loader").hide();
$('#album_message').removeClass("message").html('<p align="center">Server communication error while trying to retrieve album photos.</p>').addClass("errorm");
},
success: function(data) {
$("#album_loader").hide();
if (data.response === "true") {
$('#album_photos').empty();
$("#album_photos").append('<div id="grid" class="ui-grid-a"></div>');
var html = '';
for (i = 0; i < data.photos.length; i++) {
html += '<div class="ui-block-b"><a class="fancybox" rel="gallery" href="' + photo_url + album_user + '/resized/' + data.photos[i].photo_resized + '"><img src="' + photo_url + album_user + '/thumbnail/' + data.photos[i].photo_thumbnail + '" class="img-border" /></a></div>';  
}
$("#grid").append(html);
$('#album_photos').trigger('create');
} else {
$('#album_message').removeClass("message").html('<p align="center">Error retrieving photos.</p>').addClass("errorm");
}
}
});
});
</script>
     <script src="js/fancybox.js"></script>
            <script>
$('.fancybox').fancybox({

});
</script>
</div>
</body>
</html>
相关问题
最新问题