Discussion :

[oitsuki]

Bonjour,

J'ai crée une bootstrap modal et à l'intérieur j'ai inséré un InputField. Quand j'écris dans cet InputField, le début d'un nom de produit, ils n'apparaissent pas dans l'InputField

Si j'édite directement le fichier, je vois parfaitement les noms des produits qui apparaissent. Donc mon ajax fonctionne très bien.


Mais à l'intérieur d'une page HTML avec plusieurs éléments, j'appelle la modal. Elle s'affiche mais l'ajax autocompletion ne fonctionne pas. Dans la console log, je vois mon inputField apparaitre dans les résultats (cf image capture écran).
Il semblerait que l'ajax est activé dès que je clique sur le bouton pour faire apparaitre la pop up modal. L'action se crée avant que je commence à rentrer des infos dans le champs InputField de la popup, d'ou le problème.

Le point à résoudre serait que l'ajax ne démarre pas au démarrage de la pop up mais bien quand on rentre l'info dans l'inputField.

Je ne sais pas comment résoudre cette situation, une petite aide serait la bienvenue.

CI dessous les éléments de création de la pop up, le modal.

Merci de votre aide.


My modal call : works very fine

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!-- Link trigger modal -->
  <div class="row">
    <div class="col-md-12">
      <div class="form-group row">
        <label for="<?php echo $this->getDef('text_select_products'); ?>" class="col-5 col-form-label"><?php echo $this->getDef('text_select_products'); ?></label>
        <div class="col-md-5">
          <a
            href="<?php echo $this->link('SelectPopUpProducts'); ?>"
            data-bs-toggle="modal" data-refresh="true"
            data-bs-target="#myModal"><?php echo '<h4><i class="bi bi-plus-circle" title="' . $this->getDef('icon_edit') . '"></i></h4>'; ?></a>
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
               aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-body">
                  <div class="te"></div>
                </div>
              </div> <!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->
        </div>
      </div>
    </div>
  </div>
  <script src="<?php echo this->link('modal_popup.js'); ?>"></script>

ajout de mon fichier js qui ouvre la modal (modal_popup.js)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$( document ).ready(function() {
  $("#myModal").on("show.bs.modal", function(e) {
    const link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
  });
});

Affichage de de la modal

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div class="col-md-12">
   <div class="form-group row">
     <label for="<?php echo $this->getDef('text_products_name') ; ?>" class="col-5 col-form-label"><?php echo $this->getDef('text_products_name') ; ?></label>
     <div class="col-md-7">
       <?php echo HTML::inputField('products_name', '', 'id="ajax_products_name" list="products_list" class="form-control"'); ?>
       <datalist id="products_list"></datalist>
       </div>
     </div>
   </div>
   <?php $products_ajax = $this->link('ajax/products.php'); ?>
 
<script>
    window.addEventListener("load", function(){
        // Add a keyup event listener to our input element
        document.getElementById('ajax_products_name').addEventListener("keyup", function(event){hinterProduct(event)});
        // create one global XHR object
        // so we can abort old requests when a new one is make
        window.hinterProductXHR = new XMLHttpRequest();
    });
 
    // Autocomplete for form
    function hinterProduct(event) {
        var input = event.target;
 
        var ajax_products_name = document.getElementById('products_list'); //datalist id
 
        // minimum number of characters before we start to generate suggestions
        var min_characters = 0;
 
        if (!isNaN(input.value) || input.value.length < min_characters ) {
            return;
        } else {
            window.hinterProductXHR.abort();
            window.hinterProductXHR.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var response = JSON.parse( this.responseText );
 
                    ajax_products_name.innerHTML = "";
                    response.forEach(function(item) {
// Create a new <option> element.
                        var option = document.createElement('option');
                        option.value = item.id + ' - ' + item.name;//get name
                        option.hidden = item.id; //get id
 
                        ajax_products_name.appendChild(option);
                    });
                }
            };
 
            window.hinterProductXHR.open("GET", "<?php echo $products_ajax ; ?>?q=" + input.value, true);
            window.hinterProductXHR.send()
        }
    }
</script>

Capture écran pour info https://i.stack.imgur.com/FdeDn.png

[Sparky95]

Hello,
je t'avouerai que j'ai galéré à te lire donc une petite retouche de français serrait cool pour la compréhension les prochaines fois ;-)
Pour commencer je ne comprends pas pourquoi la moitié de ton code est en Jquery et l'autre en Js pure.
Ce serrait cool que tout soit dans un seul language (je te recommanderais du coup JQuery) comme ça tu ne t'embêtera pas.
Ensuite pourquoi ne debug tu pas ton code?

si tu tape un console log juste entre ces 2 lignes

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 var response = JSON.parse( this.responseText );
console.log(response) 
 ajax_products_name.innerHTML = "";

obtiens tu bien tes résultats?