How do I update the position of a jQuery Mobile global popup?

Question

I have a jQuery Mobile global popup, whose contents are generated dynamically. So by default it's empty.

I'm listening for the beforeposition event to capture the popup being opened. Then I load a config file/content file, generate the content and append it to the popup.

However by the time I'm appending, JQM is already done calculating the position of the popup so it will be misplaced on the screen.

Here is what I'm doing:

$(document).find("#global-popup")
    .on("popupbeforeposition", function (e) {
    factory.util.generatePopupContents(app.generateActionObject(e));
});


factory.util.generatePopupContents = function (obj) {
    var i, j, promises, fragment, popup, reference, state;

    popup = obj.gadget,
    reference = popup.getAttribute("data-reference"),
    state = popup.getAttribute("data-state");

    // don't reload if same popup is opened
    if (state !== reference) {
        if (reference === null) {
            util.errorHandler({
                "error": "Global Bindings: No handler for popup"
            });
        } else {
            popup.setAttribute("data-state", reference);
            popup.setAttribute("data-reference", reference);
            promises = [];

            // fetch content > THIS WILL LOAD A JSON DICT
            app.fetchConfiguration({
                "storage": app.default_dict.storage_dict.settings,
                    "file": app.default_dict.storage_dict.gadgets,
                    "attachment": reference,
                    "pass": undefined
            })
                .then(function (reply) {
                obj.gadget.setAttribute("data-reference", reference);
                // loop children in JSON dict
                if (reply.children) {
                    for (i = 0; i < reply.children.length; i += 1) {
                        promises[i] = app.setContent(reply.children[i], {}, false);
                    }
                }
                return RSVP.all(promises)
            })
                .then(function (content) {
                // create a fragment and append generated content
                fragment = document.createDocumentFragment();
                for (j = 0; j < content.length; j += 1) {
                    fragment.appendChild(content[j]);
                }

                // translate fragment if needed
                if (i18n) {
                    map.actions.translateNodeList(fragment);
                }

                // empty gadget and reload
                obj.gadget.innerHTML = "";
                obj.gadget.appendChild(fragment);
            })
                .fail(util.errorHandler);
        }
    }
};

I'm wondering how to reposition the popup ($(obj.gadget)) after I have appended the content.

I tried:

 $(obj.gadget).trigger("updatelayout");

Or:

 $(obj.gadget).popup("reposition", {"y": 0});

But they both don't work. Neither does triggering updatelayout on document.

Question
How can I update the position of a global popup?

Answer 1

You need to bind it to popupafteropen.

$(".selector").on("popupafteropen", function () {
    $(this).popup("reposition", {
        "positionTo": "window",
        // or
        x: 100,
        y: 200
    });
});

Demo