CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Tom H
Tom H

Reputation: 85

Programmatically close multiple jQuery Mobile dialogs at once

I have the following in jQuery mobile:

<script type="text/javascript">
    $("#locate_results").live("pageinit", function(event) {
        $("#venues li a").click(function(e) {
            e.preventDefault();
            // Update location
            $(".ui-dialog").each(function() { $(this).dialog("close"); });
        });
    });
</script>

<div data-role="page">
    <div data-role="header">My Form</div>
    <div data-role="content">
        ... other content ...
        <a href="#locator" data-rel="dialog">Choose a Location</a>
    </div>
</div>
<div data-role="dialog" id="locator">
    <div data-role="header">Search for a Location</div>
    <div data-role="content">
        <form action="/locate" method="post" data-rel="dialog">
            <input type="text" name="query" />
            <input type="submit" value="Search" />
        </form>
    </div>
</div>

The output of /locate is as follows:

<div id="locate_results" data-role="dialog">
    <div data-role="header">Search Results</div>
    <div data-role="content">
        <ul id="venues" data-role="listview">
            <li><a href="#">Venue 1 Name</a></li>
            ... more results ...
        </ul>
    </div>
</div>

So essentially,

  1. User clicks the "Add a Location" link.
  2. Location search form is loaded in a dialog
  3. Search results loaded in a second dialog
  4. User clicks a search result in the second dialog.

Step 5 should be both dialogs closing, returning the user to the original page content. However only the topmost dialog (#locate_results) closes. I have also tried the following and gotten the same result:

$("#locate_results").dialog("close");
$("#locator").dialog("close");

and

$(".ui-dialog").dialog("close");

I've tried following these answers, with no luck:

What would be the correct way to close all open dialogs in jQuery Mobile?

jsFiddle demonstrating the issue:

http://jsfiddle.net/zUuSy/

Upvotes: 1

Views: 8259

Answers (2)

rummik
rummik

Reputation: 600

It appears to be a bug.

Here's a snip from jQuery Mobile's close method:

// Close method goes back in history
close: function() {
    window.history.back();
}

What's happening is certain browsers run into issues with calling window.history.back() multiple times in succession, so calling $(".ui-dialog").dialog("close") only goes back in history once. However, calling window.history.go(-2) appears to work.

Take a look: http://jsfiddle.net/rummik/zUuSy/4/

Upvotes: 3

Josh Smith
Josh Smith

Reputation: 15028

jQuery Mobile's docs are pretty explicit:

You can also call the dialog's close() method to programmatically close dialogs, for example: $('.ui-dialog').dialog('close').

Are you using the correct selector at the correct time? It should be working.

Upvotes: 1

Related Questions