jquery mobile doesnt apply styles after ajax load
My phonegap app makes a simple .load call when a button is clicked to put ajax imported info into the ajaxarea1 div. However, it is not being styled as a collapsible type object jquery mobile creates after it is loaded from ajax. simplified js here:
$('#ajaxarea1').load('http://server.net/droiddev/backbone1/index.php/welcome/', function(){
$('#ajaxarea1').css("height","auto");
});
Her开发者_如何学编程e is the php that is returned when .load goes to the url
<?php
foreach ($query as $row)
{
echo '<div data-role="collapsible">';
echo '<h3>'.$row->headline.'</h3>';
echo '<p>'.$row->article.'</p>';
echo '</div>';
}
?>
Some simliar questions I've found on here didnt help me much. Here is some js I found that I might be part of issue
$('#ajaxarea1').collapsible().page();
Thanks
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<style type="text/css"> #ajaxarea1{width:308px;
display:block;
margin:2px auto;
height:50px;
overflow:hidden;}
#errorarea ul li{ color:red;}
.center{text-align:center;}
</style>
</head>
<body onload="init()" style="">
<!-- Start of first page -->
<div data-role="page" id="firstpage" data-title="Page firstpage" data-theme="d" >
<!-- <div data-role="header" data-theme="d" data-position="fixed">
</div> -->
<a href="#" data-role="button" style="margin-top:15px;float:right;" data-iconpos="notext" data-icon="home">Home</a>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#secondpage" data-role="button" data-theme="d" data-transition="slide">2nd page</a></p>
<a href="#addart" data-role="button" data-theme="d" >Add Article</a>
<div id="ajaxarea1"></div>
<button type="button" id="calcbtn" onclick="change_ajaxarea1()">Ajax call</button>
</div><!-- /content -->
</div>
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="thanks" data-theme="d">
<p> Your article has been received!!</p>
</div>
<div data-role="page" id="secondpage" data-theme="d" data-title="Page secondpage ya firstpagel!">
<div data-role="header" data-theme="d">
<h1> <a href="#" data-role="button" style="float:left;" data-rel="back" data-icon="arrow-l" data-theme="d" data-iconpos="notext">Back</a> </h1>
</div><!-- /header -->
<div data-role="content">
<p>This is the second page of content.</p>
<div data-role="collapsible"><!-- this works because its not loaded by ajax -->
<h3>Result from Ray</h3>
<p id="resultBlock"></p>
</div>
</div><!-- /content -->
<!--<div data-role="firstpageter" data-position="fixed">
<p style="width:100%;margin:0 auto;display:block;padding:5px;">The firstpageter is over here and i hope this doesnt get cut off. </p>
</div> -->
<!-- /firstpageter -->
</div><!-- /page -->
<!-- Start of third(add) page -->
<div data-role="page" id="addart" data-theme="d" data-title="Page secondpage ya firstpagel!">
<div data-role="header" data-theme="d">
<h1>Add article</h1>
<a href="#" data-role="button" style="float:left;" data-rel="back" data-icon="arrow-l" data-theme="d" data-iconpos="notext">Back</a>
</div><!-- /header -->
<div data-role="content">
<form id="addform" style="text-align:center;"> <div id="errorarea"><ul>
</ul></div><label for="Headline">Headline</label><br/><input type="text" name="Headline" title="Enter a title for the Headline at least 5 chars" class="required" id="headline" style="margin: 10px auto 20px auto;" placeholder="enter article headline.."></input>
<br/>
<label for="Article">Article</label><br/><textarea cols="40" rows="8" name="Article" id="article" class="required" title="Enter a article" name="textarea" style="margin: 10px auto 20px auto;" placeholder="enter article content.." id="textarea"></textarea>
<br/>
<input data-inline="true" style="display:inline-block;clear:both;text-align:center;" type="submit" value="Add Article" onclick="addarticle()"></input>
</form>
</div>
<!-- /content -->
<!--<div data-role="firstpageter" data-position="fixed">
<p style="width:100%;margin:0 auto;display:block;padding:5px;">The firstpageter is over here and i hope this doesnt get cut off. </p>
</div> -->
<!-- /firstpageter -->
</div><!-- /page -->
</body>
</html>
Full Javascript:
function change_ajaxarea1(){
$('#ajaxarea1').load('http://server.net/droiddev/backbone1/index.php/welcome/', function(){
$('#ajaxarea1').css("height","auto").collapsible();
});
}
function postarticle(){
$.post("http://server.net/droiddev/backbone1/", { headline: "John", article: "2pm" } );
}
function addarticle(){
//$("#addform").validate();
var truth=$("#addform").validate().form()
// alert(truth);
if(truth==true){
var headlinetemp=$('#headline').val();
var articletemp=$('#article').val();
navigator.notification.activityStart();
$.ajax({
type:'POST',
url: "http://server.net/droiddev/backbone1/index.php/welcome/addarticle/",
data: { 'headline': headlinetemp, 'article': articletemp},
success:function(){
$('#headline').val('');
$('#article').val('');
$.mobile.changePage($('#thanks'), { transition: "slide"});
navigator.notification.activityStop();
},
error:function(xhr){
navigator.notification.activityStop();
alert('Error: Article was not added.');
}
});
}
else{alert('Please Correct the Form');}
}
function init(){
var container = $('#errorarea');
$('#addform').validate({
errorContainer: container,
errorLabelContainer: $("ul", container),
wrapper: 'li',
meta: "validate"
});
}
function addarticletransition(){
var headlinetemp=$('#headline').val();
var articletemp=$('#article').val();
$.mobile.changePage( "http://server.net/droiddev/backbone1/index.php/welcome/addarticle/", {
type: "post",
data: { 'headline': headlinetemp, 'article': articletemp}
});
}
UPDATED ++
Try calling the collapsible() and page() methods after you load the dynamic content:
$('#ajaxarea1').load('http://server.net/droiddev/backbone1/index.php/welcome/', function(){
$('#ajaxarea1').css("height","auto").collapsible().page();
});
加载中,请稍侯......
精彩评论