Question

I’m using jQM popup to ‘alert’ users of something. For example, I make a $.ajax() request and if there’s something wrong with the response I shoot a popup.
Something like this:

<div data-role="popup" id="popup">
    <p id="popupMsg"></p>
</div>

$("#popupMsg").html(msg);
$("#popup").popup({
    history:false,
    overlayTheme: "a"
}).popup('open');

It all works fine, but If I change the popup to include a button, this way:

<div data-role="popup" id="popup">
    <p id="popupMsg"></p>
    <a href="#" data-role="button" data-rel="back" data-theme="c">Ok</a>
</div>

Then the link is not styled, and it will just show an ‘Ok’ link.
If I move the popup to a dialog then it all works, button and all, but since I want the page underneath to be seen, I’d like to keep it a popup.

Am I missing something? I saw a lot of questions about popups/dialogs, but they all refer to clicking a button to show them.
I use jquery-1.8.2 and jquery.mobile-1.2.0.

---

Edit: the solution to my case is that the popup div must go inside the page div, and not outside of it (as a dialog div would), like this:

Before (wrong):

<div data-role="page">
    <div data-role="content">
        ...page stuff...
    </div>
</div>
<div data-role="popup" id="popup">
    <p id="popupMsg"></p>
    <a href="#" data-role="button" data-rel="back" data-theme="c">Ok</a>
</div>

After (right):

<div data-role="page">
    <div data-role="content">
        ...page stuff...
        <div data-role="popup" id="popup">
            <p id="popupMsg"></p>
            <a href="#" data-role="button" data-rel="back" data-theme="c">Ok</a>
        </div>
    </div>
</div>

Answer 1

You need to refresh the jQM markup

• http://jsfiddle.net/xvvCA/1/
• http://jsfiddle.net/xvvCA/ ( inline button )

JS

var msg = 'Look! A new button!';

$("#popupMsg").html(msg);
$("#popup").popup({
    history:false,
    overlayTheme: "a"
}).popup('open');

$('#okButton').button('refresh'); // you need to refresh jQM markup

HTML

<div data-role="page">
    <div data-role="content">

        <div data-role="popup" id="popup">
            <p id="popupMsg"></p>
            <a href="#" data-role="button" data-rel="back" data-theme="c" id="okButton">Ok</a>
        </div>

    </div>
</div>