I'm trying to change the text of a popup dynamically. I thought it might be something like this:

$("#mypopup").text("Loading...");
$("#mypopup").popup("open");
load();
$("#mypopup").text("Loaded!");

This means that the popup text would be "Loading.." until after the function load() finished. Then it would be "Loaded!"

I've tried this, among many other different approaches, none of which worked.

Could someone help me through this?

Thank you in advance!

EDIT Sorry everyone, I forgot to mention I was using jQuery Mobile.

Here's more info .html

I'm trying to change the text of a popup dynamically. I thought it might be something like this:

$("#mypopup").text("Loading...");
$("#mypopup").popup("open");
load();
$("#mypopup").text("Loaded!");

This means that the popup text would be "Loading.." until after the function load() finished. Then it would be "Loaded!"

I've tried this, among many other different approaches, none of which worked.

Could someone help me through this?

Thank you in advance!

EDIT Sorry everyone, I forgot to mention I was using jQuery Mobile.

Here's more info http://jquerymobile./test/docs/pages/popup/index.html

• javascript
• jquery
• jquery-mobile

• 3 What does popup("open") do ? And what does load() do ? – Libert KHE Commented Jan 21, 2013 at 0:55
• What's load()? I'm guessing this is an async issue. Try looking into "async callbacks" – elclanrs Commented Jan 21, 2013 at 0:55
• 2 Your selector is wrong $("mypopup"), surely you don't have <mypopup> element in your page. – Ram Commented Jan 21, 2013 at 0:58
• @undefined Sorry, I meant to use "#mypopup" That was a typo, but not the problem. – areke Commented Jan 21, 2013 at 1:08

1 Answer 1

One of the ways to change content of a popup

Given that you have a markup like this:

<div data-role="page" id="page1">
    <div data-role="content">
        <a id="btn2" href="#popup" data-role="button" data-transition="flip" data-rel="popup">Open a popup</a>
        <div data-role="popup" id="popup" data-overlay-theme="a">
            <h1>It's a popup</h1>
        </div>
    </div>
</div>

You can handle popupbeforeposition and/or popupafteropen event

$(document).on("pageinit", "#page1", function(){
    $("#popup").on("popupbeforeposition", function(event, ui) {
        $(this).append("<p>I've been added to popup!</p>");
    });
    $("#popup").on("popupafteropen", function(event, ui) {
        $(this).append("<p>It has been added after I'm open!</p>");
    });
});

Another approach would be create(or change) popup's content in a click event

Given the markup

<a id="btn1" href="#" data-role="button" data-transition="flip">Dynamic popup</a>
<div data-role="popup" id="popup2" data-overlay-theme="e">
</div>

you can do

$("#btn1").click(function(){
    $("#popup2").html("<h1>Header</h1><p>This is the popup's message.</p>").popup("open");
});

UPDATE: And finally you can put it all together:

$("#btn1").click(function(){
   $.mobile.loading('show', {theme:"e", text:"Loading the content...", textonly:true, textVisible: true});
    setTimeout(function(){
        //Do some lengthy work here
        doWork();
        //Show the popup
        $("#popup2").html("<h1>Header</h1><p>This is the popup's message.</p>").popup("open");
    }, 50);
});
$("#popup2").on("popupafteropen", function(event, ui) {
    $.mobile.loading('hide');
});

UPDATE2: Updated jsFiddle to illustrate some lengthy work