Advertisement
Guest User

JQM dynamic page with select dialog bug?

a guest
Oct 26th, 2012
99
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.71 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="description" content="testing jquery mobile select after changepage" />
  5.   <title></title>
  6.   <meta charset=utf-8 />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">
  8.   <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
  9.   <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  10.   <script>
  11.     $(document).bind("mobileinit", function () {
  12.         $.mobile.ajaxEnabled = false;
  13.         $.mobile.selectmenu.prototype.options.nativeMenu = false;
  14.         $.mobile.defaultPageTransition = 'none';
  15.         $.mobile.defaultDialogTransition = 'none';
  16.         $.mobile.loadingMessageTextVisible = true;
  17.         $.mobile.loadingMessage = "Loading";
  18.     });
  19.    
  20.     function changetoPage2(){
  21.         //page2 normally comes from an ajax call
  22.         $('#page2').remove();
  23.         $('body').append('<div data-role="page" id="page2"><div data-role="header"><h1>Page2</h1></div><!-- /header --><div data-role="content"><select id="testselect"><option value="option1">option1</option><option value="option2">option2</option><option value="option3">option3</option><option value="option4">option4</option><option value="option5">option5</option><option value="option6">option6</option><option value="option7">option7</option><option value="option8">option8</option><option value="option9">option9</option><option value="option10">option10</option><option value="option11">option11</option><option value="option12">option12</option><option value="option13">option13</option><option value="option14">option14</option><option value="option15">option15</option><option value="option16">option16</option><option value="option17">option17</option><option value="option18">option18</option><option value="option19">option19</option><option value="option20">option20</option><option value="option21">option21</option><option value="option22">option22</option></select></div><!-- /content --><div data-role="footer"><h4>Footer</h4></div><!-- /footer --></div><!-- /page -->');
  24.         $('#page2').page();
  25.         $.mobile.changePage($('#page2'), { reverse: false, changeHash: false, fromHashChange: false, history: false });
  26.     }
  27.     // custom scripts go here
  28.   </script>
  29.   <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
  30.   <style type="text/css">
  31.     <!-- custom style overrides go here -->
  32.   </style>
  33. </head>
  34. <body>
  35.  
  36.     <div data-role="page" id="page1">
  37.  
  38.       <div data-role="header">
  39.         <h1>Page1</h1>
  40.       </div><!-- /header -->
  41.      
  42.       <div data-role="content">
  43.         <input type='button' value='Page2' onclick='changetoPage2();'/>
  44.        
  45.      
  46.       </div><!-- /content -->
  47.      
  48.       <div data-role="footer">
  49.         <h4>Footer</h4>
  50.       </div><!-- /footer -->
  51.  
  52.     </div><!-- /page -->
  53.  
  54. </body>
  55. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement