Datepicker in jquery mobile is duplicate when is added in a second page -


i'm needing datepicker use in mobile app.

i'm using jquery ui datepicker in app. datepicker show twice (duplicate) when put in second page. when put datepicker in first page, shown ok.

this example, if run can see datepicker duplicate in second page.

<!doctype html>  <html>  <head>      <title>datepicker test</title>      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/>     <link rel="stylesheet" href="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.css" />     <script src="http://code.jquery.com/jquery-1.5.min.js"></script>     <script src="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.js"></script>     <script src="http://jquerymobile.com/demos/1.0a3/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script>     <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> </head>  <body>   <!-- start of first page --> <div data-role="page" id="firstpage">     <div data-role="header">         <h1>first page</h1>     </div><!-- /header -->      <div data-role="content">            <p><a href="#secondpage">next page datepicker</a></p>          </div><!-- /content -->      <div data-role="footer">         <h4>page footer</h4>     </div><!-- /footer -->  </div><!-- /page -->  <!-- start of second page --> <div data-role="page" id="secondpage">     <div data-role="header">         <h1>second page</h1>     </div><!-- /header -->      <div data-role="content">            <label for="date">date input:</label>         <input type="date" name="date" id="date" value=""  />     </div><!-- /content -->      <div data-role="footer">         <h4>page footer</h4>     </div><!-- /header --> </div><!-- /page -->  </body> </html> 

thanks me in advance.

finally got solution 1 of project manager. have 1 work around in jquery.ui.datepicker.mobile.js.

replace following method using below code.

$( ".ui-page" ).live( "pagecreate", function(){          $( "input[type='date'], input[data-type='date']" ).each(function(){         if ($(this).hasclass("hasdatepicker") == false) {             $(this).after( $( "<div />" ).datepicker({ altfield: "#" + $(this).attr( "id" ), showothermonths: true }) );             $(this).addclass("hasdatepicker");         }     });  }); 

the above function pagecreate call every time page load. same date picker creation ine execute while navigating next page. have added condition execute line 1 time during page load. working fine.


Comments

Popular posts from this blog

python - Scipy curvefit RuntimeError:Optimal parameters not found: Number of calls to function has reached maxfev = 1000 -

c# - How to add a new treeview at the selected node? -

java - netbeans "Please wait - classpath scanning in progress..." -