jQuery移动过渡幻灯片页面内容第二次未刷新到原始
Posted
技术标签:
【中文标题】jQuery移动过渡幻灯片页面内容第二次未刷新到原始【英文标题】：Jquery mobile transition slide page content not refresh to original the second time 【发布时间】：2015-06-22 06:20:51 【问题描述】：我有两个页面，一个是pageone，滑动到orderpage（订单表格），下单完成后显示“Thank you for your order”，用户可以滑回pageone，问题是当用户滑动时再次到orderpage，空白的订单表格没有显示，而是剩余的“谢谢...”仍然存在。
<!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>
我不想使用计时器。
想知道每次我滑动到订单页面时是否有可能有一个空白的清洁订单。
【问题讨论】：
【参考方案1】：您可以在orderpage中创建一个单独的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">
然后在成功 POST 时，隐藏评论 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 事件。每次显示orderpage，清空所有字段，隐藏结果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
【讨论】：
谢谢，ezanker，我会尝试，但我觉得必须有更简单的解决方案，只有几行。 滑动页面有没有类似 rel="external" 的东西？ @CindyTurlington，如果您使用外部而不是默认的 AJAX 加载，则会丢失转换：demos.jquerymobile.com/1.4.5/navigation-linking-pages 是的，我想我可能不得不这样做:(以上是关于jQuery移动过渡幻灯片页面内容第二次未刷新到原始的主要内容，如果未能解决你的问题，请参考以下文章