Jquery Mobile AJAX 팝업이 처음 열 때 페이지 하단에 나타납니다

Question

저는 jqm 1.4.2를 사용 중이며 아약스 호출을 통해로드하고있는 내 응용 프로그램 내에서 많은 팝업을 가지고 있습니다. 나는 팝업을 처음 클릭 할 때 화면 하단에 나타나는 문제가 있는데, 아약스를 통해 팝업을 열 때만 문제가 발생합니다. 닫은 다음 다시 열면 예상대로 화면 중간에 나타납니다. 왜 이런 일이 일어날까요? 아래의 샘플 코드 : 올바른 크기가 열려에되지 않도록

  <!--POPUP IN THE PAGE--> 
      <div data-role='popup' id='popupVisualUnit' data-theme='a' data-overlay-theme='a' data-dismissible='false' style='min-width: 300px;'> 
       <div data-role='header' data-theme='a'> 
        <h1>Visual Check</h1> 
       </div> 
       <div data-role='main' class='ui-content'> 
        <form id='frmVisualUnit'> 
         <!--using ajax to create the form visualCheck.php --> 

        </form> 
       </div> 
      </div> 

      //JQUERY FUNCTION TO DISPLAY POPUP 
       function DisplayVisualCheckPopUP(unitid) 
       {    
        $.post("visualCheck.php", "unitid="+unitid, function(data){ 
         $("#frmVisualUnit").html(data); 
         $("#frmVisualUnit").trigger('create'); 
         }); 
        $("#popupVisualUnit").popup("open"); 
       }; 

    //THE ACTUAL POPUP CODE 
    <div class='ui-field-contain'> 
     <label for='selectLockUnit'>Lock/Unlock Unit</label> 
      <select name='selectLockUnit' id='selectLockUnit'> 
       $LockInnerOptions     
      </select> 
    </div> 
    <div class='ui-field-contain'> 
     <label for='selectUnitStatus'>Unit Status</label> 
      <select name='selectUnitStatus' id='selectUnitStatus'> 
       $statInnerOptions 
      </select> 
    </div> 
    <div class='ui-field-contain'> 
     <label for='selectAccessStatus'>Access Status</label> 
      <select name='selectAccessStatus' id='selectAccessStatus'> 
       $AccessInnerOptions 
      </select> 
    </div> 
    <div class='ui-field-contain'> 
     <label for='selectVisualCheck'>Visual Check</label> 
      <select name='selectVisualCheck' id='selectVisualCheck'> 
       $visInnerOptions 
      </select> 
    </div> 

    <div class='ui-grid-a'> 
     <div class='ui-block-a'><input type='submit' data-theme='c' onclick='UpdateVisualCheck()' value='Save' class='ui-btn ui-btn-c ui-btn-inline' data-transition='pop' onsubmit='this.submit(); this.reset(); return false'/></div> 
     <div class='ui-block-b'><a href='#' class='ui-btn ui-btn-c' data-rel='back' data-transition='pop'>Cancel</a></div> 
     <div id='success' style='color: black;'></div> 
    </div> 

감사

Answer 1

팝업이 컨텐츠 전에 개방되어로드됩니다. 이 표시 될 때 팝업이 이미 채워집니다 이런 식으로

function DisplayVisualCheckPopUP(unitid) {    
    $.post("visualCheck.php", "unitid="+unitid, function(data){ 
     $("#frmVisualUnit").html(data); 
     $("#frmVisualUnit").trigger('create'); 
     $("#popupVisualUnit").popup("open"); 
    });    
}; 

: 당신은 포스트 성공 함수 내에서 데이터를로드 후 열기 팝업을 호출 할 수 있습니다.