IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

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


Sujet :

AJAX

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    mars 2011
    Messages
    129
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : mars 2011
    Messages : 129
    Points : 49
    Points
    49
    Par défaut 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 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

  2. #2
    Membre averti
    Avatar de Sparky95
    Homme Profil pro
    à la recherche d'un travail en tant que développeur web full-stack junior
    Inscrit en
    décembre 2016
    Messages
    369
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : Belgique

    Informations professionnelles :
    Activité : à la recherche d'un travail en tant que développeur web full-stack junior
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2016
    Messages : 369
    Points : 345
    Points
    345
    Par défaut
    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?

Discussions similaires

  1. Réponses: 4
    Dernier message: 28/11/2012, 13h50
  2. [AJAX] Afficher les infos d'une page dans une pop up faite en ajax
    Par drupa dans le forum jQuery
    Réponses: 0
    Dernier message: 03/07/2012, 09h58
  3. Réponses: 22
    Dernier message: 22/06/2011, 07h13
  4. [AJAX] Construction d'une galerie d'images avec Ajax
    Par Pmko01 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 17/01/2008, 16h32
  5. [AJAX] Passage d'une variable très longue avec AJAX
    Par Figaro83 dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 18/09/2006, 16h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo