jQuery Мобильный диалог BLANK

Question

Я искал решение в Интернете, но я не нашел его.
В моем мобильном приложении jQuery у меня есть несколько файлов HTML, каждый из которых представляет страницу, чтобы очистить рабочий процесс, поэтому я использую AJAX для навигации.
У меня есть кнопка на карте в моей странице fleet.html (3 в навигации), которая открывает диалоговое окно, процесс открытия осуществляется с JavaScript, только при нажатии на кнопку она показывает мне пустой диалог с не более текст и никаких кнопок в нем.
Вот fleet.html:

<div data-role="page" id="fleetPage" class="no-bg"> 
    <div data-role="header" data-theme="b"> 
     <h1>Flotte</h1> 
    </div> 
    <div data-role="content" data-theme="a"> 
     <div class="map-container"> 
      <div id="fleet-map"></div> 
     </div><!-- END map-container --> 
    </div><!-- END content --> 

    <div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right"> 
     <div data-role="header" data-theme="b"> 
      <h3>Informations</h3> 
     </div> 
     <div data-role="content"> 
      <p>POI Infos</p> 
     </div> 
    </div> 

</div><!-- END page --> 

А вот как я открываю диалог:

function onSelectFeature() { 
    $("#fleetPage #deviceInfoDialog").dialog(); 
    $.mobile.changePage($("#fleetPage #deviceInfoDialog"), { 
     transition: "slidedown" 
    }); 
} 

Answer 1

Тест

function onSelectFeature() { 
    $.mobile.changePage("#deviceInfoDialog", { role: "dialog", transition: "slidedown" }); 
} 

и ваш HTML должен быть, как это

<div data-role="page" id="fleetPage" class="no-bg"> 
    <div data-role="header" data-theme="b"> 
     <h1>Flotte</h1> 
    </div> 
    <div data-role="content" data-theme="a"> 
     <div class="map-container"> 
      <div id="fleet-map"></div> 
     </div><!-- END map-container --> 
    </div><!-- END content --> 
</div><!-- END page --> 

    <div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right"> 
     <div data-role="header" data-theme="b"> 
      <h3>Informations</h3> 
     </div> 
     <div data-role="content"> 
      <p>POI Infos</p> 
     </div> 
    </div> 

Answer 2

Переместите диалоговое окно div вне страницы div. Добавьте скрытую ссылку, которая при нажатии откроет диалог. Исправьте функцию скрипта, чтобы подражать этой ссылке.

Я испытал это и она отлично работает:

<div data-role="page" id="fleetPage" class="no-bg"> 
    <div data-role="header" data-theme="b"> 
     <h1>Flotte</h1> 
    </div> 
    <div data-role="content" data-theme="a"> 
     <div class="map-container"> 
      <div id="fleet-map"> <a href="javascript: onSelectFeature();">onSelectFeature</a></div> 
     </div><!-- END map-container --> 
    </div><!-- END content --> 


    <script> 
     function onSelectFeature() { 
      $("#lnkDeviceInfoDialog").click(); 
     } 
    </script> 

    <a id='lnkDeviceInfoDialog' href="#deviceInfoDialog" data-rel="dialog" data-transition="slidedown" style='display:none;'></a> 


</div><!-- END page --> 

<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right"> 
    <div data-role="header" data-theme="b"> 
     <h3>Informations</h3> 
    </div> 
    <div data-role="content"> 
     <p>POI Infos</p> 
    </div> 
</div>