keyup sur un input d'une modale pour construire une URL dynamique
Bonjour à tous,
Débutant de toujours, j'essaie en vain et depuis pas mal de temps de :
- demander la saisie de texte dans une modale (id="ean")
- récupérer la valeur de cet input
- ajouter à mon URL le paramètre &ean=XXXXXX
Sauf que, de la manière dont j'ai rédigé mon script, je me dis que lorsque l'input est servi, la création de l'URL en bas de mon script est déjà construite.
Et j'ai beau ajouter des caractères dans mon input, l'URL ne change pas (naturellement)
Voici la modale en question :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <div class="modal fade" id="confirm-record" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirmation</h4>
</div>
<div class="modal-body">
<p>Etes-vous sur de vouloir associer</p>
<h2> <?php echo $crossRef; ?></h2>
<p>au Sku</p>
<h2><span id="recupSku"></span> (<span id="recupEtat"></span>) </h2>
<p>Veuillez confirmer</p>
<p class="debug-url"></p>
<form>
<div class="form-group">
<label for="ean">Voulez vous ajouter un EAN:</label>
<input type="text" class="form-control" id="ean">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
<a class="btn btn-success btn-ok">Valider</a>
</div>
</div>
</div>
</div> |
et mon script
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script>
$('#confirm-record').on('show.bs.modal', function(e) {
$('#ean').keyup(function() {
var ean = $('#ean').val();
console.log(ean);
});
$(this).find('.btn-ok').attr('href', ($(e.relatedTarget).data('href') + "&crossRef=<?php echo $crossRef; ?>" + "&id=<?php echo $id; ?>" + "&ean=" + ean));
$('.debug-url').html('Delete URL: <strong>' + $(this).find('.btn-ok').attr('href') + '</strong>');
$('#recupSku').html(e.relatedTarget.dataset.sku);
$('#recupEtat').html(e.relatedTarget.dataset.etat);
});
</script> |
Je sais qu'il me faut certainement organiser ce script pour dire "tant que #ean change", l'URL change. Mais mon faible bagage intellectuel m'empêche de trouver le chemin.
Merci pour l'aide éventuelle que vous pourriez m'apporter.
Bonne journée
Une solution qui fonctionne bien que j'imagine, un peu barbare.
Bon, j'ai trouvé ça ...
Un peu à l'arraché mais ça fonctionne comme je le souhaite.
Je prendrai tous les conseils qui voudront bien se formuler.
Merci
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <script>
$(document).ready(function() {
$.fn.delayKeyup = function(callback, ms){
var timer = 0;
var el = $(this);
$(this).keyup(function(){
clearTimeout (timer);
timer = setTimeout(function(){
callback(el)
}, ms);
});
return $(this);
};
var modal = $('#confirm-record');
modal.on('show.bs.modal', function(e) {
$('#recupSku').html(e.relatedTarget.dataset.sku);
$('#recupEtat').html(e.relatedTarget.dataset.etat);
var ean = $('#ean');
ean.val(0);
modal.find('.btn-ok').attr('href', ($(e.relatedTarget).data('href') + "&crossId=<?php echo $id; ?>" + "&ean=" + ean.val() + "&sku=" + e.relatedTarget.dataset.sku ));
$('.debug-url').html('Delete URL: <strong>' + modal.find('.btn-ok').attr('href') + '</strong>');
ean.delayKeyup(function(el){
if (ean.val() != '' || ean.val() != 0) {
modal.find('.btn-ok').attr('href', ($(e.relatedTarget).data('href') + "&crossId=<?php echo $id; ?>" + "&ean=" + ean.val() + "&sku=" + e.relatedTarget.dataset.sku ));
$('.debug-url').html('Delete URL: <strong>' + modal.find('.btn-ok').attr('href') + '</strong>');
}
},300);
});
});
</script> |
