How can I open a second jquery-mobile popup from the first popup

Question

Using jquery-mobile I am trying to open a second popup (to confirm) from the first popup when the user clicks delete.

I have seen a similar thread with working jsfiddle code http://jsfiddle.net/EWQ6n/520/ here: Opening Dialog from within a Dialog in JQuery Mobile

However, even copying and pasting this working pop-up code into my jsfiddle does not work. I am using jQuery 1.10.1 with 1.4.2 mobile. The working jsfiddle in the thread above is using 1.9. with mobile 1.30b.1 When I change my jquery to the older versions, it works. (I know, that seems like the easy answer but changing now will mess up other code dependencies and styles. I want to understand this problem.)

    <!-- first popup -->
<div data-role="popup" id="popupInfo" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" class="ui-corner-top">
         <h1>Contact Info</h1>
    </div>
    <div data-role="content" data-theme="a">
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value="" placeholder="Display name" data-theme="a">
        <label for="tel">Number:</label>
        <input type="tel" name="tel" id="tel" value="" placeholder="tel" data-theme="a">
        <button type="submit" data-theme="b" class=" ui-btn ui-btn-b ui-shadow ui-corner-all">OK</button> <a href="#" data-role="button" data-rel="back">Cancel</a>
<a href="#popupDelete" data-role="button" data-rel="popup" data-transition="flow" data-icon="minus">Delete</a>
    </div>
</div>

<!-- second popup -->        
<div data-role="popup" id="popupDelete" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:600px;">
    <div data-role="header" data-theme="aa" class="ui-corner-top">
         <h1>Delete Contact?</h1>

    </div>
    <div data-role="content" data-theme="dd">
         <h3 class="ui-title">Are you sure you want to delete <span>#</span> from your contacts?</h3>

        <p>This action cannot be undone.</p>
        <button type="submit" data-theme="b" class=" ui-btn ui-btn-b ui-shadow ui-corner-all ui-btn-inline">OK</button> <a href="#" data-role="button" data-rel="back">Cancel</a>

    </div>
</div>

I also noticed in jsfiddle, the last 2 divs inside my first popup code are red. (does this mean they are invalid?) In my editor they do seem to be valid html - at least I cannot find any problems.

This is my non-working jsfiddle: http://jsfiddle.net/gmdavis62/7AuNC/2/

Answer 1

Thanks to @ezanker, I have a solution. Following the popup api link from the other post, I found a simple solution that doesn't involve a plug in.

$(document).on("pageinit", function () {
  $('#del').click(function (e) { // e is the event
    setTimeout(function () {
        $("#popupDelete").popup("open")
    }, 100);
  });
});

I have a jsfiddle to demo this.