1
Dans un formulaire j'ai 2 entrées. Dans la 1ère entrée j'utilise un datalist que je charge par JSON et la 2ème entrée est autocomplete quand la 1ère entrée est changée.Contenu de saisie semi-automatique de popover bootstrap à partir de JSON
Jusqu'à ici tout fonctionne bien!
J'ai ajouté un nouveau bouton, que j'utilise popover de bootstrap dont je veux afficher du texte en fonction de la sélection de l'utilisateur (comme ci-dessus). Le texte que je veux montrer est l'information de l'élément labels.
Je lis un facteur pertinent question mais je ne l'ai pas réussi jusqu'à maintenant ..
var dataList = $('.products');
var jsonOptions = [{
"product": "11111",
"description": "description 1",
"labels": [{
"version": "01",
"quantity": 500
}, {
"version": "02",
"quantity": 800
}, ]
}, {
"product": "22222",
"description": "description 2",
"labels": [{
"version": "01",
"quantity": 900
}, {
"version": "02",
"quantity": 100
}, ]
}, {
"product": "33333",
"description": "description 3",
"labels": [{
"version": "01",
"quantity": 200
}, {
"version": "02",
"quantity": 4300
}, ]
}];
jsonOptions.forEach(function(item) {
var option = '<option value="' + item.product + '">' + item.description + '</option>';
dataList.append(option);
});
$(function() {
$('body').on('input', '.product,.products', function() {
var i = this.value;
var description = "";
var productsInBox = 0;
var text = "";
jsonOptions.forEach(function(a) {
if (a.product == i) {
description = a.description;
productsInBox = a.productsInBox;
for (let i = 0, l = a.labels.length; i < l; i++) {
text += "version " + a.labels[i].version + " has " + a.labels[i].quantity + "\n"
}
}
});
$(this).closest('.form-group').find('.description').val(description);
$(this).closest('.form-group').find('.mytext').val(text);
console.log(text);
});
});
$('[data-toggle="popover"]').popover();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<div class="col-sm-2">
<input type="text" list="products" class="form-control product" name="product[]" />
<datalist id="products" class="products"></datalist>
</div>
<div class="col-sm-3">
<input id="" type="text" class="form-control description" name=" description[]" />
</div>
<div class="col-sm-3" style="margin-left: 10px;">
<button type="button" class="btn btn-info btn-group-sm mytext" data-toggle="popover" data-content="text to change to like: version 01 has 500 "><i class="fa fa-info"></i></button>
</div>
</div>
</fieldset>
</form>
J'étais assez proche! :) Merci beaucoup! – yaylitzis
@yaylitzis, oui vous étiez. Vous êtes les bienvenus. Heureux d'aider. – Ionut
@yaylitzis, j'ai aussi regardé dans la documentation 'popover()' et j'ai mis à jour ma réponse pour avoir un changement en direct sur la popup quand elle est ouverte aussi. Ajout de l'extension '.data ('bs.popover'). SetContent();' à $ ('[data-toggle = "popover"]'). Attr ('contenu-données', "versions sont:" + version + 'et la quantité sont:' + quantité) .data ('bs.popover'). setContent(); '. Maintenant, quand le popup est ouvert et que vous changez les valeurs pour les entrées, vous pouvez voir le changement dans le popup. – Ionut