1
J'ai implémenté Bootstrap datepicker dans ma page Web. J'utilise Bootstrap pour CSS Styling. L'utilisation de bootstrap recommande enfin d'inclure JQuery et Bootstrap JS dans la page. Mais le faire est de faire un dysfonctionnement bootstrap datepicker. Voici un extrait de ma page à travers lequel je peux utiliser datepicker ainsi que bootstrap JS pour une liste déroulante bootstrap.Bootstrap datepicker ne fonctionne pas lors de la mise en page via une fonction javascript
<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 l'intérieur <div id="displaymasterblock"> a été minified et utilisé dans une fonction JS pour se déclencher sur un bouton clic. Voici que JS Fonction-
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;
}
Quelle aabove fonction n'est-il met toutes les balises à l'intérieur du <div id="displaymasterblock"> Datepicker travaille-à-dire des icônes de calendrier et d'horloge montrent et qui fonctionne parfaitement lorsqu'il est directement inclus dans le balisage comme indiqué ci-dessus cependant, lorsque j'utilise le bouton, cliquez pour afficher le même balisage, le datepicker cesse de fonctionner.
Aidez-moi s'il vous plaît ici. Je crois qu'il y a quelque chose qui ne va pas avec l'ordre d'inclusion des ressources externes mais je ne suis pas sûr. J'espère que je me suis expliqué correctement.
Merci beaucoup @Hector .. Je ne peux pas vous en dire plus. Des choses comme celles-ci sont si difficiles à déboguer et souvent les gens ne sont pas capables de le faire sans mentorat expérimenté .. Merci encore .. :) –
Glad it helps :) –
Ce super-utile! Fonctionne comme un charme! Merci beaucoup, @HectorBarbossa! – user3030440