CODEWITHSUNDEEP
javascriptjquery-mobile
Mehdiway
Mehdiway

Reputation: 10656

jQuery Mobile dialog BLANK

I've been searching for a solution on the internet but I didn't find any.
In my jQuery Mobile application, I have multiple HTML files each one representing a page to keep the workflow clean, therefore I use AJAX for navigation.
I have a button on a map in my page fleet.html (3rd in navigation) that opens a dialog, the opening process is done with javascript, only when I click on the button it shows me a blank dialog with no text and no buttons in it.
Here's 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 -->

And here's how I open the dialog : 

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

Upvotes: 0

Views: 328

Answers (2)

Drew
Drew

Reputation: 4373

Move your dialog div outside of the page div. Add a hidden link that when clicked would open the dialog. Rework your script function to emulate that link getting clicked.

I tested this and it works fine:

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

Upvotes: 1

Alkis Kalogeris
Alkis Kalogeris

Reputation: 17745

Try this

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

And your html should be like this 

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

Upvotes: 0

Related Questions