jQuery Mobile best way to create pop up and content dynamically

Question

I have the following code creating a pop up using jQuery mobile. The pop up is created and a form is created and appended to the popup along with two buttons. This code does work but I am wondering if there is a better way to achieve my intended goal.

    //create a div for the popup
    var $popUp = $("<div/>").popup({
        dismissible : false,
        theme : "a",
        overlyaTheme : "a",
        transition : "pop"
    }).bind("popupafterclose", function() {
                    //remove the popup when closing
        $(this).remove();
    });
    //create a title for the popup
    $("<h2/>", {
        text : PURCHASE_TITLE
    }).appendTo($popUp);

            //create a message for the popup
    $("<p/>", {
        text : PURCHASE_TEXT
    }).appendTo($popUp);

    //create a form for the pop up
    $("<form>").append($("<input/>", {
        type : "password",
        name : "password",
        placeholder : PASSWORD_INPUT_PLACEHOLDER
    })).appendTo($popUp);

   //Create a submit button(fake)
    $("<a>", {
        text : SUBMIT_BTN_TXT
    }).buttonMarkup({
        inline : true,
        icon : "check"
    }).bind("click", function() {
        $popUp.popup("close");
        that.subscribeToAsset(callback);
    }).appendTo($popUp);

    //create a back button
    $("<a>", {
        text : BACK_BTN_TXT,
        "data-jqm-rel" : "back"
    }).buttonMarkup({
        inline : true,
        icon : "back"
    }).appendTo($popUp);

    $popUp.popup("open").trigger("create");

Pyre

its working jsfiddle.net/Palestinian/YCZrg and I like it. very creative idea. as Gajotres said below, replaced .bind with .on. – Guttle

Thanks Omar, I am writing an app with very little HTML markup so thought this would be the best approach – Pyre

Only thing I don't like is that it looks a bit "hacky" whats your opinion on that? – Pyre

I disagree. It looks professional; easy and straight-forward. – Guttle

Answer 1

Your example is great, this is poster example how dynamic jQuery/jQuery Mobile content should be created.

Change only three things:

• At the end you should append popup to the needed jQuery Mobile page because it is not going to work outside a data-role="page" div.
• Change the function bind to the function on. On is much faster method of event binding. And it is here to replace bind and delegate.
• Check if your code is going to work in web kit browsers like Chrome. Chrome has a nasty bug which prevents programmatic popup open in every page event except pageshow. More info about this problem: https://mcmap.net/q/746561/-jquery-mobile-popup-with-history-false-autocloses

Enyo

Great thanks for your feedback. One section piece of the code I wasn't sure on is where I am adding "data-jqm-rel" : "back". I couldn't see a ny other way to add this attribute. – Pyre

Add it to your a tag used for popup closing. It should look like this: <a date-rel="back" data-role="button">Close</a> In that case don't use href on a tag, or if you are still going to use it then let it be like this: href="#". a – Enyo

Hi Gajotres, I tried appending the popup to the jQuery mobile page but it didn't work. I tried it in the jsFiddle example create by Omar here jsfiddle.net/Palestinian/YCZrg and I also tried in my app. The problem was the overlay covered the whole popup and the popup's width was the full size of the page. – Pyre

@Enyo can we fix the height and width of the popup in the above case??.. presently it is covering only the content's width and size and if we specify width and height i don't see any difference. How can we fix the height and width?. Thanks:) – Ingrowth

Answer 2

First a Popup dive with ur contant

 <div  id="popupPhotoLandscape" class="photopopup" data-role="popup" data-theme="none" data-     shadow="false" data-overlay-theme="a">
            <a href="#home"  data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

 //Content
        </div>

Button for Open Popup

   <a  data-role="button" data-theme="c" data-inline="true" data-mini="true" id="snap_view_btn" style="float:left;margin-top: 4px;" >Snap View</a>

Click for button

$('#snap_view_btn').click(function() {

   $('#popupPhotoLandscape').popup();
   $('#popupPhotoLandscape').popup("open");
});

Page Init

$( document ).on( "pageinit", function() {

   $( ".photopopup" ).on({
    popupbeforeposition: function() {
        var maxHeight = $( window ).height() - 60 + "px";
        $( ".photopopup" ).css( "height", '800px' );
        $( ".photopopup" ).css( "width", '600px' );
    }

 });

 });

Circumferential