无法在DOM中导航动态创建的页面

时间:2013-03-01 18:07:56

标签: php ajax json jquery-mobile

经过这么多试验,我终于设法使用PHP,JSON和AJAX动态创建页面并将它们加载到DOM中。但现在的问题是我无法动态调用/浏览这些页面,而是手动调用gallery.html#page1 ...etc

我在寻求指导而不是给你带来负担,因为我在这里学习。

** PHP - photos.php **

$photos = array();
$i=0;
while ($row = mysqli_fetch_array($query)){
 $img = $row["fn"];
 $photos[] = $img;
 $i++;
}

$count = count($photos);
echo json_encode(array('status' => 'success', 'count' => $count, 'items' => $photos));

JSON数组

{
"status":"success",
"count":3,
"items":
 [
"img1.jpg",
"img2.jpg",
"img3.jpg"
 ]
}

我使用以下方法来获取和存储所需图库的ID,

<input type="hidden" value="<?php echo $id; ?>" id="displayid" />

然后我回调它在AJAX中使用它。

var ID = $('#displayid').val();

AJAX和JQM

$.ajax({
Type: "GET",
url: 'photos.php',
data: { display: ID }, // = $('#displayid').val();
dataType: "json",
contentType: "application/json",
success: function(data) {
 var count = data.count;
 var number = 0;
 $.each(data.items, function(i,item) {
  var newPage = $("<div data-role=page data-url=page" + number + "><div data-role=header><h1>Photo " + number + "</h1></div><div data-role=content><img src=" + item + " /></div></div");
  newPage.appendTo( $.mobile.pageContainer );
  number++;
  if (number == count) { $.mobile.changePage( newPage ); }; // it goes to last page

我从here获得此代码,感谢Gajotres在页面之间动态导航。它在同一个代码中。

$(document).on('pagebeforeshow', '[data-role="page"]', function(){       
 var nextpage = $(this).next('div[data-role="page"]');
 if (nextpage.length > 0) {    
  $.mobile.activePage.find('[data-role="header"]').append($('<a>').attr({'href':'#'+nextpage.attr('id'),'data-theme':'b'}).addClass('ui-btn-right').html('Next').button());
 }  
}); // next button 
}); // each loop 
} // success
}); //ajax

1 个答案:

答案 0 :(得分:1)

我找到了你的问题。

这部分代码不能像这样使用:

$(document).on('pagebeforeshow', '[data-role="page"]', function(){       
    var nextpage = $(this).next('div[data-role="page"]');
    if (nextpage.length > 0) {    
        $.mobile.activePage.find('[data-role="header"]').append($('<a>').attr({'href':'#'+nextpage.attr('id'),'data-theme':'b'}).addClass('ui-btn-right').html('Next').button());
    }  
});

这就是问题所在。首先删除pagebeforeshow事件绑定,这里不能使用它。其余的代码不会做任何事情,因为目前有任何下一页(下一页将在下一次循环迭代期间生成),所以删除整个块。

现在,在每个块结束并生成所有页面之后(这是主要的,此时所有页面都应该存在),添加以下代码:

$('[data-role="page"]').each(function(){
    var nextpage = $(this).next('div[data-role="page"]');
    if (nextpage.length > 0) {    
        $(this).find('[data-role="header"]').append($('<a>').attr({'href':'#'+nextpage.attr('id'),'data-theme':'a'}).addClass('ui-btn-right').html('Next').button());
    }         
});

这将会发生。每个循环将循环遍历每个可用页面(我们现在都已经完成),如果不是最后一个,它将添加下一个按钮。

以下是一个实例:http://jsfiddle.net/Gajotres/Xjkvq/

好的,在这个示例页面已经存在,但点是相同的。它们需要存在(无论是否动态添加它们或者它们是否已存在),然后才能添加下一个按钮。

我希望这会有所帮助。