リンクをクリックすると、ページ変更機能は機能しますが、そのページにはデータが表示されません。そのページは動的です。この問題を知っている人はいますか？
以下は私の最初のページです。
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#idLogout').click(function(){
//alert(' button clicked ');
$.ajax({
type: "POST",
url: SITE_URL+"logout.php",
data: "&action=logout",
success: function(msg){
//alert('Response = '+msg);
var obj = $.parseJSON(msg);
var rs = obj.result;
//alert( rs[0] );
if(rs[0] == 1)
{
//alert('logged out success');
window.localStorage.removeItem("cookie_user_id");
window.localStorage.removeItem("cookie_profile_id");
window.localStorage.clear();
window.location.href = "login.html";
}
else
{
alert('Could not logout!');
}
}
});
return false;
});
$.ajax({
type: "POST",
url: SITE_URL+"logout.php",
data: "&action=get_username",
success: function(msg){
//alert('Response = '+msg);
var obj = $.parseJSON(msg);
var rs = obj.result;
//alert( rs[0] );
if(rs[0] != 0)
{
$('#idspanUsername').html('Logged in as '+rs[0]);
}
}
});
});
function change_page()
{
$.mobile.changePage( "faq_categories.html", { transition: "slideup",reloadPage:true,changeHash:true,type: "post" } );
$("#list_categories").trigger("pagecreate");
}
</script>
<div data-role="page" id="more_page">
<div data-theme="a" data-role="header">
<h3>
More...
</h3>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="c">
<a onclick="change_page();" href="#"><!-- faq_categories.html -->
FAQs
</a>
</li>
<li data-theme="c">
<a href="about.html">
About
</a>
</li>
</ul>
<div style="margin-top: 80px;">
<p style="text-align: center; ">
<span style="font-size: small; " id="idspanUsername">
Logged in as...
</span>
</p>
</div>
<a data-role="button" data-theme="b" href="javascript:;" id="idLogout">
Log Out
</a>
</div>
<div data-theme="e" data-role="footer" data-position="fixed" class="nav-bar">
<div data-role="navbar" data-iconpos="top" class="nav-bar">
<ul>
<li>
<a href="track_dash.html" data-theme="e" data-icon="track" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">Track</span>
</a>
</li>
<li>
<a href="calendar.html" data-theme="e" data-icon="cal" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">Calendar</span>
</a>
</li>
<li>
<a href="shopping_list_type.html" data-theme="e" data-icon="shop" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">Shopping</span>
</a>
</li>
<li>
<a href="profile.html" data-theme="e" data-icon="profile" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">Profile</span>
</a>
</li>
<li>
<a href="more.html" data-theme="e" data-icon="more" data-corners="false" data-iconshow="true" data-wrapperels="span" class="ui-btn-active">
<span class="foot_font">More</span>
</a>
</li>
</ul>
</div>
</div>
</div>
2 番目のページの下にある Faq をクリックすると。
<script>
$(document).ready(function() {
var datastring;
$.ajax({
type:'POST',
url:SITE_URL+'faq_categories.php',
data:datastring,
success:function(msg)
{
var data = $.parseJSON(msg);
var rs = data.result;
var i=0;
for(i=0;i<rs.length;i++){
var category = rs[i].Name;
var category_id = rs[i].ID;
$('#list_categories').append('<li data-theme="c"><a href="faq_listing.html?c_id='+category_id+'">'+category+'</a></li>');
};
$('#list_categories').listview('refresh');
}
});
});
</script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
<div data-role="page" id="faq_categories">
<div data-theme="a" data-role="header" data-position="fixed">
<h3>
FAQ Categories
</h3>
<a data-role="button" rel="external" id="back_history" data-rel="back" data-theme="b" data-icon="arrow-l" data-iconpos="left">
Back
</a>
</div>
<div data-role="content">
<p style="margin-left: 15px;">
I have a question about...
</p>
<ul data-role="listview" id="list_categories" data-divider-theme="b" data-inset="true">
</ul>
</div>
</div>
このページは表示されますが、データは表示されません。