javascriptjquerytwitter-bootstrapbootstrap-datepickerbootstrap-datetimepicker
Bootstrap datepicker not working when put on page through a javascript function
I have implemented Bootstrap datepicker in my webpage. I am using Bootstrap for CSS Styling. Using bootstrap recommends that JQuery and Bootstrap JS should be included in the page at last. But doing so is making bootstrap datepicker malfunction. Following is a snippet of my page through which i am able to use datepicker as well as bootstrap JS for a bootstrap Dropdown.
<head>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link href="../css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/javascript"src="https://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
</head>
<div class="btn-group pull-right">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="false">Dropdown <span class="glyphicon glyphicon-triangle-bottom"></span></button>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> About <b>1</b></a></li>
<li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-alert"></span> Report a Bug</a></li>
<li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-text-background"></span> Suggest Enhancement</a></li>
<li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-phone-alt"></span> Contact Us</a></li>
</ul>
</div>
<div class="container">
<div id="questionblock">
<div class= "customscrollbar" id="questiondiv">
<div>
<button onclick="addtest();" class="btn btn-primary" style="margin-left:10px; margin-top:7px;"><span class="glyphicon glyphicon-plus"></span> Add New Test</button>
<a type="button" class="btn btn-default" style="margin-left:10px; margin-top:7px;"><span class="glyphicon glyphicon-refresh"></span> Refresh</a>
</div>
</div>
</div>
</div>
<div id="displaymasterblock">
<div class="alert alert-info fade in" id="addtestheader">
<span class="glyphicon glyphicon-plus"></span> Add New Test
</div>
<em> All fields are mandatory</em>
<form>
<div class="form-inline">
<div id="formelements">
<label>1. Name of Test :</label>
<input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters">
<label>2. Scheduled on :</label>
<div id="datetimepicker" class="input-append date">
<input type="text" style="height:30px;" placeholder="Date & Time of Test"></input>
<span class="add-on" style="height:30px;">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript"> //datepicker
$("#datetimepicker").datetimepicker({
format: "dd/MM/yyyy hh:mm:ss",
todayHighlight: true,
pick12HourFormat: true,
maskInput: true,
});
</script>
</div>
</div>
<div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;">
<span class="glyphicon glyphicon-user"></span> Select Target students for test
</div>
<div class="form-inline">
<div id="formelements">
<div class = "input-group">
<span class = "input-group-addon" style="width:40px;">3. Programme</span>
<select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();">
<option value="0" selected>Select One</option>
</select>
<span class = "input-group-addon">4. Branch</span>
<select id="branch" name="branch" class="form-control" onchange="changeofbranch();">
<option value="0">Select Programme</option>
</select>
</div>
<div class = "input-group" style="margin-top:10px;">
<span class = "input-group-addon" style="width:40px;">5. Semester</span>
<select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();">
<option value="0">Select Programme</option>
</select>
<span class = "input-group-addon">6. Course</span>
<select id="course" name="course" class="form-control" style="width:270px;" >
<option value="0">Problem solving and programming skills</option>
</select>
</div>
</div>
</div>
<center>
<div id="errordiv" style="width:400px;"></div>
<button type="button" class="btn btn-success">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</center>
</form>
<script src="../js/bootstrap.min.js"></script>
Markup inside <div id="displaymasterblock"> has been minified and used in a JS function to get triggered on a button click. Following is that JS function-
function addtest()
{
var element = '<div class="alert alert-info fade in" id="addtestheader"><span class="glyphicon glyphicon-plus"></span> Add New Test</div><em> All fields are mandatory</em><form><div class="form-inline"><div id="formelements"><label>1. Name of Test :</label><input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters"> <label>2. Scheduled on :</label><div id="datetimepicker" class="input-append date"><input type="text" style="height:30px;" placeholder="Date & Time of Test"></input><span class="add-on" style="height:30px;"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div><script type="text/javascript">$("#datetimepicker").datetimepicker({format: "dd/MM/yyyy hh:mm:ss",todayHighlight: true,pick12HourFormat: true});</script></div></div><div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;"><span class="glyphicon glyphicon-user"></span> Select Target students for test</div><div class="form-inline"><div id="formelements"><div class = "input-group"><span class = "input-group-addon" style="width:40px;">3. Programme</span><select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();"><option value="0" selected>Select One</option><option value="1">B.Tech</option><option value="2">M.Tech</option><option value="3">MCA</option><option value="4">M.Sc.</option></select><span class = "input-group-addon">4. Branch</span><select id="branch" name="branch" class="form-control" onchange="changeofbranch();"><option value="0">Select Programme</option></select></div><div class = "input-group" style="margin-top:10px;"><span class = "input-group-addon" style="width:40px;">5. Semester</span><select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();"><option value="0">Select Programme</option></select><span class = "input-group-addon">6. Course</span><select id="course" name="course" class="form-control" style="width:270px;" ><option value="0">Problem solving and programming skills</option></select></div></div></div><center><div id="errordiv" style="width:400px;"></div><button type="button" class="btn btn-success">Save</button><button type="button" class="btn btn-default">Cancel</button></center></form>';
document.getElementById('displaymasterblock').innerHTML = element;
}
What aabove function does is it puts all markup inside the <div id="displaymasterblock">
Datepicker is working i.e. calendar and clock icons are showing up and functioning perfectly when it is directly included in the markup as shown above however when i am using button click to show the same markup the datepicker stops functioning.
Please help me out here. I believe there is something wrong with external resource inclusion order but not sure. I hope i explained myself properly.
Solution
Remove the script tag completely where you are appending the dynamic html content. After the dynamic elements are added to the dom, call the datepicker function. So modify your function like below -
function addtest() {
var element = '<div class="alert alert-info fade in" id="addtestheader"><span class="glyphicon glyphicon-plus"></span> Add New Test</div><em> All fields are mandatory</em><form><div class="form-inline"><div id="formelements"><label>1. Name of Test :</label><input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters"> <label>2. Scheduled on :</label><div id="datetimepicker" class="input-append date"><input type="text" style="height:30px;" placeholder="Date & Time of Test"></input><span class="add-on" style="height:30px;"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div><div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;"><span class="glyphicon glyphicon-user"></span> Select Target students for test</div><div class="form-inline"><div id="formelements"><div class = "input-group"><span class = "input-group-addon" style="width:40px;">3. Programme</span><select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();"><option value="0" selected>Select One</option><option value="1">B.Tech</option><option value="2">M.Tech</option><option value="3">MCA</option><option value="4">M.Sc.</option></select><span class = "input-group-addon">4. Branch</span><select id="branch" name="branch" class="form-control" onchange="changeofbranch();"><option value="0">Select Programme</option></select></div><div class = "input-group" style="margin-top:10px;"><span class = "input-group-addon" style="width:40px;">5. Semester</span><select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();"><option value="0">Select Programme</option></select><span class = "input-group-addon">6. Course</span><select id="course" name="course" class="form-control" style="width:270px;" ><option value="0">Problem solving and programming skills</option></select></div></div></div><center><div id="errordiv" style="width:400px;"></div><button type="button" class="btn btn-success">Save</button><button type="button" class="btn btn-default">Cancel</button></center></form>';
document.getElementById('displaymasterblock').innerHTML = element;
$("#datetimepicker").datetimepicker({
format: "dd/MM/yyyy hh:mm:ss",
todayHighlight: true,
pick12HourFormat: true
});
}
- WebTorrent : TypeError: Cannot read properties of undefined (reading 'find')
- How can I write an else if structure using React (JSX) - the ternary is not expressive enough
- window.onload vs $(document).ready()
- How to export multiple components from an index file in React?
- Button doesn't have obvious onclick event
- Vue3 Carousel as ES module in Laravel blade template
- Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true warnings
- 3rd party cookies in Android 14/New Chrome using Angular/Firebase Auth/Hosting and NodeJs in Server
- How to replace host part of a URL using javascript regex
- uncaught typeerror: cannot read properties of undefined (reading 'removeeventlistener')
- Get logarithmic byteFrequencyData from Audio
- TypeError: Cannot set property 'innerHTML' of null with a correct script location and div ID
- React how to Pass data from component to its sub-component
- Exiting While loop
- Iterate through an array and copy certain values
- Count the number of occurrences of a character in a string in Javascript
- Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"
- Apex Charts JS fill to size
- Using glob with the aspect-build bazel-examples repository typescript build?
- How to split an array and put values to observable-block?
- Converting svg path to polygon in javascript
- Output one json record react native
- Jest - TypeError: response.json is not a function
- smooth auto scroll by using javascript
- Finding JavaScript memory leaks with Chrome
- Can't show icon with fontawesome's react-js library
- Overriding control+s (save functionality) in browser
- Cypress - How to check if a checkbox is checked or not?
- Converting CSS hover event to javascript Click event
- New subscriptions always returning intial value instead of current value