Creating virtual pages dynamically using jQuery Mobile

Question

I try to link virtual pages using jQuery Mobile, but I have two problems :

The first time when I load the page, the CSS is not applied.
After when I choose a page and I want to change to another page, I notice that every time I passed by the page 1.

This is my example.

Code :

            var nbrButton = 3;
            $(document).ready(function(){
                for(i = 1;i <= nbrButton;i++) {

                    $("body").append('<div id="p'+i+'" data-role="page" class="pages"><div data-role="content">Page'+i+'</br><a data-role="button" rel="internal" href="#p1"  data-inline="true">1</a><a data-role="button" rel="internal" href="#p2"  data-inline="true">2</a><a data-role="button" rel="internal" href="#p3"  data-inline="true">3</a></div></div>');

                }
                $("#p1").show();

            });

Could you tell me what is the problem or if there is a better way to do that.

Thank you.

Omar · Accepted Answer · 2013-03-21 15:10:23Z

2

Update

I also removed data-rel="internal" in the links.

Answer

I have done the below.

instead of

$('#p1').show();

I add this

$.mobile.changePage( '#p1', { allowSamePageTransition: true });

It will refresh Page-1 p1 to reload styles.

Working example.

edited Mar 21, 2013 at 15:10

answered Mar 21, 2013 at 15:02

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mils Over a year ago

Great ! it remains the second problem. Thank you.

Omar Over a year ago

Page 1 won't appear when moving to other pages. is this your second problem?

Mils Over a year ago

yes ! I forgot to remove $('#p1').show() شكراً جزيلا عمر

Omar Over a year ago

Remove data-rel="internal" Afwan akhi :) (you're welcome in Arabic)

Omar Over a year ago

Great :) I'm glad I've been of help.

|

Gajotres · Accepted Answer · 2013-03-21 14:52:02Z

2

You can't dynamically create new jQuery Mobile page (you can, but that page will not have styles) unless you have at least one existing. There's a workaround here, you can create an empty jQuery mobile page and use it to create a new one.

Here's a working example:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>        
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script>
                $(document).on('pageshow', '#index', function(){       
                    $('<div>').attr({'data-role':'page','id':'second'}).appendTo('body');
                    $('<div>').attr({'data-role':'header','id':'second-header'}).append('<h3>Header Title</h3>').appendTo('#second');
                    $.mobile.changePage("#second");
                });    
    </script>
</head>
<body>
    <div data-role="page" id="index">

    </div>  
</body>
</html>

Now you should use a pageshow page event of a first hidden page to create new dynamic pages. After page are cretaed just use change page to show a first visible page.

answered Mar 21, 2013 at 14:52

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

2 Comments

Mils Over a year ago

The problem is that I don't know in advance the number of pages.. Thank you.

Gajotres Over a year ago

Why is this a problem in case of my example? Just copy your code inside pageshow example.

Scott · Accepted Answer · 2013-07-11 08:07:18Z

-1

To apply CSS styles just add $("#p1").trigger('create'); as last line after $("#p1").show();

edited Jul 11, 2013 at 8:07

Scott

21.6k8 gold badges67 silver badges73 bronze badges

answered Jul 11, 2013 at 7:46

Motoo

901 gold badge1 silver badge8 bronze badges

Collectives™ on Stack Overflow

Creating virtual pages dynamically using jQuery Mobile

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related