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

Share Improve this question Follow edited Jan 21, 2013 at 1:32 areke asked Jan 21, 2013 at 0:52 arekeareke 1,09311 gold badge1414 silver badges2323 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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