Bootstrap select & script qui ne fonctionne pas.
Bien le bonsoir.
J'ai un petit script ajout/suppression de liste et input qui fonctionne, mais quand je veux utiliser le plugin bootstrap select [http://silviomoreto.github.io/bootstrap-select/ ]()pour pouvoir faire une recherche dans cette même liste, celui ci bug avec le script.
<div id="produit">
<div id="1">
<div class="col-md-8" ><label>Produit</label>
<select class="form-control"name="p_nom[]">
<option value="1">BREF</option>
<option value="2">10</option>
<option value="3">2</option>
<option value="4">7</option>
<option value="5">8</option>
<option value="6">5</option>
<option value="7">4</option>
<option value="8">122</option>
</select>
</div>
<div class="col-md-4"><label>Quantité</label>
<input id="quantite" type="number" name="p_quantite[]" class="form-control"/>
</div>
<a href="#" class="removeclass" style="display:none;">Supprimer</a>
</div><a href="#" id="add_input">Ajouter</a>
</div>
<script>
$('#add_input').click(function(event) {
var lastDiv = $('#produit > div').last();
var id = parseInt(lastDiv.attr("id")) + 1;
(lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".removeclass").show();
return false;
});
$('body').on('click', '.removeclass', function(event) {
$(this).parent().remove();
return false;
})
</script>Si je laisse dans t'état, cela fonctionne. Sauf que je souhaite pouvoir faire une recherche dans le select et donc j'utilise le plugin (qui fonctionne en dehors de ce script, pour d'autres listes)
Je rajoute donc
<select class="form-control select" data-live-search="true" name="p_nom[]">Cela fonctionne sur la première liste, mais quand je souhaite rajouter un produit c'est là ou le problème apparait. Si je selectionne un produit dans ma nouvelle liste et que je le selectionne, il change la valeur du premier produit. Il le remplace en gros, pareil si j'ajoute d'autres listes. De plus le plugin fait un hover sur le produit ou je passe ma souris. et sur la nouvelle liste, le hover reste sur tous les produits ou j'ai passé la souris.
Voilà j'espère que mon explication est plus ou moins claire. Si vous avez une idée d'où pourrait venir le problème je suis prenneur.
Merci d'avance pour vos lumières
4 réponses
Salut,
Je pense que cela vient du fait que les datas catchées par le plugins sont celles présentes dans le DOM à l'initialisation de celui-ci. Lorsque tu ajoutes des éléments à ta listes, ceci ne sont pas dynamiquement catchés par le plugin et ne sont donc pas pris en compte dans la recherche. Il te faut refresh le plugin à chaque ajout:
$('#add_input').click(function(event) {
var lastDiv = $('#produit > div').last();
var id = parseInt(lastDiv.attr("id")) + 1;
$(lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".removeclass").show();
$('#id_de_la_liste').selectpicker('refresh');
return false;
});Je te conseille de jeter un oeil aux méthodes et events du plugin http://silviomoreto.github.io/bootstrap-select/#refresh.
Ah une dernière question: A quel moment initialises-tu ton plugin ?
Bonjour, merci pour ta réponse.
J'ai donc essayé $('#add_input').selectpicker('refresh'); Même problème
Mon script est en fin de page (Dessous mon footer)
Je viens ajouter quelques informations :)
J'utilise un theme admin bootstrap donc j'ai trouver dans un fichier js des fonctions déjà utilisés
Fichier plugins.js
//Bootstrap select
var feSelect = function(){
if($(".select").length > 0){
$(".select").selectpicker();
$(".select").on("change", function(){
if($(this).val() == "" || null === $(this).val()){
if(!$(this).attr("multiple"))
$(this).val("").find("option").removeAttr("selected").prop("selected",false);
}else{
$(this).find("option[value="+$(this).val()+"]").attr("selected",true);
}
});
}
}//END Bootstrap selectVoici la fin du code source pour voir ou se situe les codes.
<!-- START SCRIPTS -->
<!-- START PLUGINS -->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap/bootstrap.min.js"></script>
<!-- END PLUGINS -->
<!-- START THIS PAGE PLUGINS-->
<script type='text/javascript' src='js/plugins/icheck/icheck.min.js'></script>
<script type="text/javascript" src="js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="js/plugins/scrolltotop/scrolltopcontrol.js"></script>
<script type="text/javascript" src="js/plugins/morris/raphael-min.js"></script>
<script type="text/javascript" src="js/plugins/morris/morris.min.js"></script>
<script type="text/javascript" src="js/plugins/rickshaw/d3.v3.js"></script>
<script type="text/javascript" src="js/plugins/rickshaw/rickshaw.min.js"></script>
<script type='text/javascript' src='js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js'></script>
<script type='text/javascript' src='js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js'></script>
<script type='text/javascript' src='js/plugins/bootstrap/bootstrap-datepicker.js'></script>
<script type="text/javascript" src="js/plugins/owl/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/plugins/moment.min.js"></script>
<script type="text/javascript" src="js/plugins/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="js/plugins/datatables/jquery.dataTables.min.js"></script>
<!-- END THIS PAGE PLUGINS-->
<!-- START TEMPLATE -->
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/actions.js"></script>
<script type="text/javascript" src="js/demo_dashboard.js"></script>
<!-- END TEMPLATE -->
<script type="text/javascript" src="js/plugins/bootstrap/bootstrap-select.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap/bootstrap-timepicker.min.js"></script>
<script>
$('#add_input').click(function(event) {
var lastDiv = $('#produit > div').last();
var id = parseInt(lastDiv.attr("id")) + 1;
(lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".removeclass").show();
return false;
});
$('body').on('click', '.removeclass', function(event) {
$(this).parent().remove();
return false;
})
</script>
<script>
$(function() {
var formElements = function(){
var feDatepicker = function(){
if($(".datepicker").length > 0){
$(".datepicker").datepicker({format: 'yyyy-mm-dd'});
$("#dp-2,#dp-3,#dp-44").datepicker();
}
}// END Bootstrap datepicker
)};
</script>
<!-- END SCRIPTS -->
</body>
</html> <script>
$(function() {
var formElements = function(){
var feDatepicker = function(){
if($(".datepicker").length > 0){
$(".datepicker").datepicker({format: 'yyyy-mm-dd'});
$("#dp-2,#dp-3,#dp-44").datepicker();
}
}// END Bootstrap datepicker
)};
</script>Tu déclares 1 fonction (feDatepicker()) dans une autre (formElements()), quel en est l'intérêt ?
Et pourquoi séparer tes deux scripts ? Réunis-les plutôt ça sera plus propre :
<script>
$(function() {
$('#add_input').click(function(event) {
var lastDiv = $('#produit > div').last();
var id = parseInt(lastDiv.attr("id")) + 1;
(lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".removeclass").show();
return false;
});
$('body').on('click', '.removeclass', function(event) {
$(this).parent().remove();
return false;
})
var formElements = function(){
var feDatepicker = function(){
if($(".datepicker").length > 0){
$(".datepicker").datepicker({format: 'yyyy-mm-dd'});
$("#dp-2,#dp-3,#dp-44").datepicker();
}
}// END Bootstrap datepicker
)};
</script>Et cette partie (lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".removeclass").show(); y'a un problème, (lastDiv.clone(true).attr("id", id)) n'est pas un objet jQuery, tu ne peux donc pas lui appliquer la fonction insertAfter().
Ca devrait être ça plutôt:
var $lastid = $('#' + lastDiv.clone(true).attr("id", id));
$lastid.insertAfter(lastDiv).find(".removeclass").show();