Inputfield à l'intérieur d'une pop Modal bootstrap avec Ajax non fonctionnelle

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:

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:

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:

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