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");

its working http://jsfiddle.net/Palestinian/YCZrg/ and I like it. very creative idea. as Gajotres said below, replaced `.bind` with `.on`. — Omar, Apr 15 '13 at 13:35
Thanks Omar, I am writing an app with very little HTML markup so thought this would be the best approach — user1812741, Apr 15 '13 at 15:14
Only thing I don't like is that it looks a bit "hacky" whats your opinion on that? — user1812741, Apr 15 '13 at 15:15
I disagree. It looks professional; easy and straight-forward. — Omar, Apr 15 '13 at 17:30

score 9 · Accepted Answer · edited May 23 '17 at 12:15

9

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://stackoverflow.com/a/15830353/1848600

edited May 23 '17 at 12:15

Community

1
1

answered Apr 15 '13 at 13:16

Gajotres

57,309
16
102
130

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. – user1812741 Apr 15 '13 at 13:27
Add it to your a tag used for popup closing. It should look like this: Close 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 – Gajotres Apr 15 '13 at 13:31
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 http://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. – user1812741 Apr 21 '13 at 14:03
@Gajotres 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:) – Beginner Jul 17 '13 at 14:04

score 0 · Answer 2 · answered Apr 15 '13 at 13:12

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' );
    }

 });

 });

score 0 · Answer 3 · answered Sep 30 '13 at 10:53

0

https://github.com/serbanghita/jQM-dynamic-popup can help you. You still need to markup the jQuery Mobile code inside the popup's content. I'm using this in production, but for simple messages.

answered Sep 30 '13 at 10:53

Șerban Ghiță

1,899
20
21

jQuery Mobile best way to create pop up and content dynamically

3 Answers3