ajax - Datepicker, data-mask won't load after getting request from server -
i created main page has 2 datepickers , 1 input mask time. button trigger request page same content loaded within div. have put js, css , function script on main page.
at main page, datepickers , input mask work correctly request got trigger , new page loaded, datepickers , input mask not working.
please help.
date picker , input mask not working
the main page code
<!doctype html> <html> <head> <title></title> <!-- in subfolder plugin --> <!-- date picker --> <link rel="stylesheet" href="plugins/datepicker/datepicker3.css"> <!-- jquery 2.2.3 compressed --> <script src="plugins/jquery/jquery-2.2.3.min.js"></script> <!-- bootstrap 3.3.6 --> <script src="bootstrap/js/bootstrap.min.js"></script> <!-- datepicker --> <script src="plugins/datepicker/bootstrap-datepicker.js"></script> <!-- inputmask --> <script src="plugins/input-mask/jquery.inputmask.js"></script> <script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script> <script src="plugins/input-mask/jquery.inputmask.extensions.js"></script> </head> <body> <form name="form1"> <label>date : </label> <div>from :<input name="dt_datefr" type="text" date-picker></div> <div>to : <input name="dt_dateto" type="text" date-picker></div> <div>time: <input id="txtotout" name="txtotout" type="text" data-inputmask="'alias': 'hh:mm'" data-mask> </div> <button type="submit" id="btnshow" name="btnshow" onclick="showcontent();return false;"> show</button> </form> <br /> <br /> <div id="content2" style="display: none"> <!-- content here --> </div> <script> $(function () { //date picker $("[date-picker]").datepicker({ format: "dd/mm/yyyy", autoclose: true, }).datepicker("setdate", new date()); }); $(function () { //time mask $("[data-mask]").inputmask(); }); $(function () { $("#btnshow").click(function () { $("#content2").show(); }); }); </script> <script> function showcontent() { var xhttp; xhttp = new xmlhttprequest(); xhttp.onreadystatechange = function() { if (xhttp.readystate == 4 && xhttp.status == 200) { document.getelementbyid("content2").innerhtml = xhttp.responsetext; } }; xhttp.open("get", "ax_test.asp?", true); xhttp.send(); } </script>
the request page ax_test.asp
<form name="form2"> <label>date : </label> <div>from :<input name="dt_datefr" type="text" date-picker></div> <div>to : <input name="dt_dateto" type="text" date-picker></div> <div>time: <input id="txtotout" name="txtotout" type="text" data-inputmask="'alias': 'hh:mm'" data-mask> </div> </form>
manage working including jquery in showcontent()
<!doctype html> <html> <head> <title></title> <!-- script in subfolder plugins --> <!-- date picker --> <link rel="stylesheet" href="plugins/datepicker/datepicker3.css"> <!-- jquery 2.2.3 compressed --> <script src="plugins/jquery/jquery-2.2.3.min.js"></script> <!-- bootstrap 3.3.6 --> <script src="bootstrap/js/bootstrap.min.js"></script> <!-- datepicker --> <script src="plugins/datepicker/bootstrap-datepicker.js"></script> <!-- inputmask --> <script src="plugins/input-mask/jquery.inputmask.js"></script> <script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script> <script src="plugins/input-mask/jquery.inputmask.extensions.js"></script> </head> <body> <form name="form1"> <label>date : </label> <div>from :<input name="dt_datefr" type="text" date-picker></div> <div>to : <input name="dt_dateto" type="text" date-picker></div> <div>time: <input id="txtotout" name="txtotout" type="text" data-inputmask="'alias': 'hh:mm'" data-mask> </div> <button type="submit" id="btnshow" name="btnshow" onclick="showcontent();return false;"> show</button> </form> <br /> <br /> <div id="content2" style="display: none"> <!-- content here --> </div> <script> $(function () { //date picker $("[date-picker]").datepicker({ format: "dd/mm/yyyy", autoclose: true, }).datepicker("setdate", new date()); }); $(function () { //time mask $("[data-mask]").inputmask(); }); $(function () { $("#btnshow").click(function () { $("#content2").show(); }); }); </script> <script> function showcontent() { var xhttp; xhttp = new xmlhttprequest(); xhttp.onreadystatechange = function() { if (xhttp.readystate == 4 && xhttp.status == 200) { document.getelementbyid("content2").innerhtml = xhttp.responsetext; $("[data-mask]").inputmask(); $("[date-picker]").datepicker({ format: "dd/mm/yyyy", autoclose: true, }).datepicker("setdate", new date()); } }; xhttp.open("get", "ax_test.asp?", true); xhttp.send(); } </script> </body> </html>
Comments
Post a Comment