jQuery Mobile的AJAX内容加载到div元素将失去它的CSS样式
当我使用AJAX将数据加载到一个div元素,并使用的jQuery
moible
When I'm using ajax to load data into a div element and using jquery
moible
<div data-role="page">
<div data-role="header" style="overflow:hidden;" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" onclick="getAjaxContent('recipe')">recipe</a></li>
<li><a href="#" onclick="getAjaxContent('sprinkel')">sprinkel</a></li>
<li><a href="#" onclick="getAjaxContent('fruit')">fruit</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div role="main" class="ui-content" id="main">
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<a href="#" class="ui-btn ui-icon-shop ui-btn-icon-left checkout">checkout</a>
</div><!-- /footer -->
</div><!-- /page -->
和我写的的JavaScript
code getAjaxContentL
and I wrote the javascript
code getAjaxContentL
function getAjaxContent(type){
var category = type;
console.log("begin to get " + category);
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xmlhttp);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("main").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","index.php?category="+category,true);
xmlhttp.send();
}
</script>
和index.php文件就是象下面这样:
and the index.php file is like below:
<?php
$category = $_GET['category'];
if($category == recipe){
echo '<ul data-role="listview" data-inset="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>';
}
if($category == sprinkel){
echo 'response sprinkel';
}
if($category == fruit){
echo 'response fruit';
}
和它的奇怪的是,当我点击的配方,将EXCUTE功能 getAjaxContent
。
还示出了它在主分区的内容正确地
and it's strange that when I click the recipe it will excute the function getAjaxContent
.
Also it shows the content in the main div correctly
但问题是,在主要的div元素将失去它的风格在jQuery Mobile的。 谁能帮助??
but the problem is that the element in the main div will lose it's style in jquery mobile. somebody help??
我在这里找到了anwser。
I find the anwser here.
jquerymobile错误&QUOT;不能调用列表视图的方法来初始化和QUOT之前,
和它解决了我的问题.simply添加listview.refresh方法
and it solves my problem .simply add a listview.refresh method