2012-05-11 3 views
0

양식을 사이트에 표시하려고하지만 JQM 스타일을 잃어 버리려고하므로 양식을 올바르게 표시하려면 어떻게해야합니까? 내 코드Jquery Mobile에서 ajax를 사용하여 양식로드하기

<div data-role="page" data-add-back-btn="true" id="events"> 
     <div data-role="header"> 
      <h1 id='heading'></h1> 
      <a href="#" data-rel="back" data-icon="arrow-l">Back</a> 
     </div>  
    <div data-role="content" id="textcontent"></div> 
<li><a href="Javascript:form();">Contact Us</a></li> 

function form() 
{ 
alert("Success"); 
data = data + '<form action="index.html" method="post"><div data-role="fieldcontain"><label for="username">Username<label><input type="text" name="username" id="username"></form></div>' 
$('#textcontent').html(data); 
$('#textcontent').show(); 
} 

아래에 호출되는 함수와 형태가 화면에 나타납니다하지만 어떤 도움이 될 것입니다 모든 JQM 스타일링이 크게 트릭을 할해야 trigger('create')를 사용

답변

0

form()의 마지막 줄에 $(".ui-page").trigger("create");을 추가하십시오.

+0

감사합니다. –

+0

와우 그게 내가 말한 것. – codaniel

0

감사 잃는다.

function form(){ 
    data = '<form action="index.html" method="post"><div data-role="fieldcontain"><label  for="username">Username<label><input type="text" name="username" id="username"></div></form>'; 
    $('#textcontent').html(data); 
    $('.ui-page').trigger('create'); 
    $('#textcontent').show(); 

} 

당신이

  1. 것이 도움이 될 수 있습니다 다른 몇 가지 당신은 형태의 HTML 오류가 있습니다. 폼이 나타나기 전에 div가 종료되어야합니다. 즉 </div></form>이 어떻게되어야하는지입니다. 또한 <li> 요소는 <ul> 또는 <ol> 중 하나로 래핑되어야합니다.
  2. from 변수에서 데이터 +를 제거하십시오. 그게 의도 된 것이 확실하지 않습니다.
  3. 양식을 display:none으로 설정된 div 안에 넣으십시오. 그렇게하면 트리거 ('생성') 메소드가 필요하지 않습니다. 그런 다음 가시성을 표시()하거나 토글() 할 수 있습니다.
+0

나는 tryed하지만 여전히 내 새 양식 기능이 작동하지 않습니다. –

+0

function form() { \t alert ("Success"); \t $ ('# listcontent'). hide(); \t $ ('# heading'). 텍스트 ("Contact Us"); \t data = '

' \t $ ('# textcontent') .html (data); \t $ ('# textcontent'). show(); } –

관련 문제