Jquery Mobile AJAX Popup appears at bottom of page on first open

Question

I'm using jqm 1.4.2 and have a number of popups within my app which I am loading via an ajax call. I'm having an issue where the first time I click on a popup, it appears at the bottom of the screen - but ONLY when opening a popup via ajax. If I close it and re-open it it appears in the middle of the screen as expected. Any ideas why this would happen? Sample code below:

          <!--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> 

Thanks

Answer 1

the popup is opening before the content is loaded so it is not the correct size upon open. Can you call the popup open after loading the data within the post success function:

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

In this way the popup will already be populated when it is displayed.