Question

我有两个页面，一个是pageone，它滑到orderpage（订单表格），当订单完成后，一个“谢谢您的订单”显示，用户可以滑回到pageone，问题是当用户幻灯片时再次下订单，空白订单不显示，而是剩下的“谢谢......”仍在那里。

<!DOCTYPE html>
<html>
<head>
<?php
include 's_include';
?>
<script    src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">     </script>
</head>

<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
THIS IS MAIN PAGE
<a href="#orderpage" data-transition="slide" id="pen_btn">GO TO PAGE TWO</a>
</div> <!-- pageone -->
</div> <!-- ui-content -->
<div data-role="page" id="orderpage">
<div data-role="main" class="ui-content">
<script>
$(document).ready(function(){
  $("#order_btn").click(function(){
    $.post("cgi-bin/order.pl", {
        order:"HELLO WORLD IN READY",
    },
    function(data,status){
      document.getElementById('div_comment').innerHTML = data;
    });
  }); //orderpage
}); //ready
</script>
<div id="div_comment">
<textarea name="text_comment" id="text_comment" placeholder="160 chars or less, no # or @" data-role="none" rows=11 cols=20 onkeypress="if(event.keyCode==13){return false;}" onKeyDown="limitText2(this,160);" onKeyUp="limitText2(this,160);" style="resize:none;"></textarea>
<span id="commenterr" style="font-weight:bold; font-size:90%;"></span>
<br style="line-height:190%;">
<button id="order_btn" class="ui-btn ui-btn-inline" style="border: #ffffff 1px solid;">Enter your comment</button>
<a href="#pageone" data-transition="slide">
Back
</a>
</div> <!-- ui-content -->
</div> <!-- page id orderpage -->
</body>
</html>

我试图像这样添加rel =“external”，但没有帮助：

<a href="#orderpage" rel="external" data-transition="slide" id="pen_btn">GO TO PAGE TWO</a>

我不想使用计时器。

想知道每次我滑到订单页时是否可以有一个空白的清洁订单。

Answer 1

您可以在订单页面中创建单独的DIV，以显示帖子的结果：

    <div id="div_comment">           
        <textarea name="text_comment" id="text_comment" placeholder="160 chars or less, no # or @" data-role="none" rows="11" cols="20" onkeypress="if(event.keyCode==13){return false;}" onKeyDown="limitText2(this,160);" onKeyUp="limitText2(this,160);" style="resize:none;"></textarea>
        <span id="commenterr" style="font-weight:bold; font-size:90%;"></span>
        <br style="line-height:190%;" />
        <button id="order_btn" class="ui-btn ui-btn-inline" style="border: #ffffff 1px solid;">Enter your comment</button>
        <a href="#pageone" data-transition="slide">Back</a>
    </div><!-- div_comment -->

    <div id="formResults">

然后在成功发布后，隐藏评论DIV，填充结果并显示结果DIV：

$(document).on("pagecreate","#orderpage", function(){    
    $("#order_btn").click(function() {
        //on POST success: hide DIV#div_comment and  
        //show results in DIV#formResults
        $("#div_comment").hide();
        $("#formResults").html('Thank you...<a href="#pageone" data-transition="slide" >Back</a>').show();          
    }); //orderpage
});

然后使用pagecontainer小部件的 beforeshow 事件。每次显示订单页面时，清除所有字段，隐藏结果DIV并显示注释DIV：

$(document).on( "pagecontainerbeforeshow", function( event, ui ) {
    //when orderpage is shown, hide results, show comment and clear fields
    if (ui.toPage.prop("id") == "orderpage"){
        $("#formResults").html('').hide(); 
        $("#div_comment").show();
        $("#text_comment").val('');
        $("#commenterr").text('');
    }
});

<强> DEMO

Jquery移动转换幻灯片页面内容第二次不刷新到原始内容

1 个答案: