2014-06-05 2 views
0

사용자가 댓글 양식을 제출 한 후 댓글 슬라이드가있는 패널을 슬라이드 아웃했습니다. 닫은 후에 '고맙습니다'라는 메시지가 표시됩니다. 패널을 열고 두 번째 설명을 위해 다시 슬라이드하면 "감사합니다"라는 메시지가 계속 표시됩니다. 나는 채워지지 않은 새로운 코멘트 형식을보기를 희망했다.슬라이드 아웃 패널 (jquery)을 새로 고침/새로 고침하는 방법

이전 세션의 남은 부분 대신에 새로운 새로운 원래 의견 양식을 표시하려면 어떻게해야합니까?

코드 :

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $.post("comment.pl", { 
     comment:$("#comment").val(), 
    }, 
    function(data,status){ 
     document.getElementById('div2').innerHTML = "THANK YOU"; 
    }); 
    }); 
}); 
</script> 
</head> 
<body> 
<div data-role="page" id="pageone"> 
    <div data-role="main" class="ui-content"> 
    <p>Click on the link to see the slide effect.</p> 
    <a href="#pagetwo" data-transition="slide">Slide to Dialog Page</a> 
    </div> 
</div> <!-- pageone --> 
<div data-role="popup" data-dialog="true" id="pagetwo" > 
<div data-role="main" class="ui-content"> 
    <div id="div2"> 
    <b>Enter Comment</b> 
    <br> 
    <textarea name="comment" id="comment" data-role="none" rows=5 cols=30 onkeypress="if(event.keyCode==13){return false;}" onKeyDown="limitText2(this,100);" onKeyUp="limitText2(this,100);" style="resize:none;"></textarea> 
    <br> 
    <button data-inline="true"><font size=+2 color=#333333>Enter</font></button> 
    <a href="#pageone" data-ajax="false">Go to Page One</a> 
    </div> <!-- div2 --> 
</div> <!-- ui-content --> 
</div> <!-- pagetwo --> 
</body> 
</html>     
+0

내가 패널이 표시 해달라고 : 페이지 전환 애니메이션이 완료되면 실행되는 이벤트가

... function(data,status){ $('#success').show(); }); ... 

, 나는 팝업을 본다 ...'data-dialog = "true"'와 함께?! Pls 데모 및 jQM API를 처음으로, 미안하지만, 귀하의 코드를 엉망이다. – Omar

답변

0

대신 div2의 내용을 변경, 그것은이 .append 또는 .show 요소에 더 좋을 것이다. 런타임에 div2의 내용을 다시 만들면 새로 고치고 데이터를 올바르게 게시 할 수 있도록 모든 JS를이 새 코드에 다시 적용해야합니다.

그래서, 버튼을 클릭하면 나타나는 #success DIV 만들 :

$(document).bind("mobileinit", function() { 
    $('div[data-role="main"]').live('pagehide',function(event, ui){ 
     //the 'pageHide' happens when the main is hidden 
    $('#success').hide(); 

    }); 
}); 
+0

나는 약간의 쇼/숨기기 테스트를했는데 쇼가 아직 새로 고쳐지지 않고, 나는 약간의 쓰레기를 입력하고 숨기고, 거기서도 여전히 쓰레기를 보여 주며, 새로 고침을하지 않았다. –

관련 문제