当前位置： 文江博客话题详情

jquery mobile 在 ajax 加载后不应用样式

发布于 2024-12-06 18:17:22 字数 7459 浏览 0 评论 0原文

当单击按钮将 ajax 导入的信息放入 ajaxarea1 div 时，我的phonegap 应用程序会进行简单的 .load 调用。然而，它并没有被设计为 jquery mobile 从 ajax 加载后创建的可折叠类型对象。这里简化了 js：

$('#ajaxarea1').load('http://server.net/droiddev/backbone1/index.php/welcome/', function(){
    $('#ajaxarea1').css("height","auto");
});

这是当 .load 转到 url 时返回的 php

<?php 
    foreach ($query as $row)
    {
         echo '<div data-role="collapsible">';
         echo '<h3>'.$row->headline.'</h3>';
         echo '<p>'.$row->article.'</p>';
         echo '</div>';
    }
?>

我在这里发现的一些类似问题对我没有多大帮助。这是我发现我可能是问题的一部分的一些js

$('#ajaxarea1').collapsible().page();

谢谢

完整的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>

完整的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}
});



}

更新了++

原文

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");
});

Here 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 ++

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

笑梦风尘 2024-12-13 18:17:22

加载动态内容后，尝试调用 collapsible() 和 page() 方法：

$('#ajaxarea1').load('http://server.net/droiddev/backbone1/index.php/welcome/', function(){
    $('#ajaxarea1').css("height","auto").collapsible().page();
});

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();
});
回复 原文
~没有更多了~

关于作者

如若梦似彩虹

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

书间行客

文章 0 评论 0

我ぃ本無心為│何有愛

文章 0 评论 0

神妖

文章 0 评论 0

undefined

文章 0 评论 0

38169838

文章 0 评论 0

彡翼

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文