0
votes

Pourquoi JavaScript ONCHANGE événement fonctionne-t-il uniquement dans le premier modal d'une table de données

Bonjour et je vous remercie d'avoir pris le temps de lire ma question.

C'est mon premier message, j'ai essayé d'être aussi complet que possible et de suivre les exigences attendues de la publication! P>

ma configuration forte> p>

J'ai une table de données peuplée à partir d'une base de données MySQL, chaque ligne dispose d'un bouton "Modifier". p>

Le bouton "Edit" ouvre un modal avec les données de la ligne. Tout cela fonctionne correctement. P>

sous la forme modale, j'ai un élément déroulant "Sélectionner" avec un événement "Onchange" pour déclencher un message. P>

fort> p>

de l'intérieur du premier modal (ouvert de la première ligne de la ligne "Modifier") le Le message n'est déclenché aucun problème - dans la fenêtre modale liée à la première ligne. P>

mais si je clique sur le bouton "EDIT" d'une autre ligne pour lancer, il est modal - et je modifie la valeur déroulante "Sélectionner ' , le message n'est pas affiché - comme si la fonction JavaScript n'est pas traitée. P>

ma recherche jusqu'à présent strong> p>

avoir passé du temps à googler et à rechercher une pile Overflow, je pense que le problème peut être lié à des identifiants ou de noms de classe non uniques - et peut-être qu'ils devraient être différents pour chaque ligne d'enregistrement? P>

J'ai essayé de mettre en œuvre cela en générant des noms d'identification et de classe de manière dynamique En utilisant le numéro d'identification de la ligne, chaque modal avait donc sa propre carte d'identité unique pour l'élément "Select" - mais cela n'a pas corrigé le problème. P>

Je pense aussi que cela pourrait être un problème de cache où le script est en train de tenir sur des données anciennes, mais peu importe si je clique sur la première ligne la première, ou si je clique sur la première ligne après avoir cliqué sur plusieurs autres rangées avant de cela, ce n'est que la première ligne qui traite avec succès l'événement OnChange. p>

Mes fichiers strong> p>

index.php strong> (pour afficher la table de données et "Modifier" boutons) p> xxx pré>


bouton.php strong> (la teneur modale avec "Sélectionnez" Elément et Message DIV) P>

<script>    
function show_value() {
        selected_value = document.getElementById("mySelector").value;
        document.getElementById("result").innerHTML = "Selected value is "+selected_value;
        }
</script>


3 commentaires

Vous avez le même id = "myselector" dans chaque modal. Les identifiants sont censés être uniques. GetElementyID ("MySelector") Sélectionner simplement le premier.


Bonjour Barmar - Merci pour votre commentaire. Comme mentionné, j'ai essayé d'essayer des identifiants dynamiques afin que chaque «SELECT» avait un identifiant unique comme celui-ci id = " Mais cela n'a pas corrigé le problème


Avez-vous changé show_value () afin qu'il sait quel sélecteur obtenir la valeur de?


3 Réponses :


0
votes

Vous pouvez obtenir la valeur de sélection de l'élément Sélectionner facilement ... XXX

Soyez patient pendant que j'essaie de traiter le meilleur moyen d'afficher la valeur


3 commentaires

Pour que cela fonctionne, vous devez le modifier en Onchange = "show_value (événement)"


Je me suis habitué aux cadres comme certains d'entre eux le font automatiquement mais c'est 100% correct @Barmar


Peut-être que vous pensez à jQuery .on () ou addeventlistener , qui transmet automatiquement l'événement comme paramètre. Mais si vous utilisez onxxx , vous devez le faire explicitement.



0
votes

Il vous suffit de passer vos identifiants comme des paramètres indiqués ci-dessous. Puisque vous avez déjà une carte d'identité unique de $ rangée ['Fruitid'], vous pouvez simplement ajouter ce numéro à chaque identifiant afin qu'ils soient uniques aussi.

<div class="modal fade" id="edit<?=$row['fruitID']?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
              <div class="row">
                <div>
                  <select class="mySelector" id="mySelector<?=$row['fruitID']?>" name="mySelector" onchange="show_value('mySelector<?=$row['fruitID']?>', 'result<?=$row['fruitID']?>')">
                      <option value="Apple">Apple</option>
                      <option value="Orange">Orange</option>
                      <option value="Banana">Banana</option>
                      <option value="Mango">Mango</option>
                  </select>
              </div>
          </div>

          <div class="row">
              <div id="result<?=$row['fruitID']?>"></div>
          </div>
        </div>
    </div>
  </div>
</div>

<script>    
  function show_value(input_id, output_id) {
    selected_value = document.getElementById(input_id).value;
    document.getElementById(output_id).innerHTML = "Selected value is "+selected_value;
  }
</script>


2 commentaires

OK @nosajimiki - Je viens de remarquer que vous avez suggéré de passer les ID de paramètre à l'ID modal et l'ID de message de résultat - pas seulement l'ID d'élément Select. Cela semble fonctionner - merci beaucoup - je suis simplement en train de vérifier si cela fonctionnera correctement pour d'autres fonctions / validations que je dois traiter à l'intérieur des modules - mais je pense que vous avez peut-être trouvé la solution


Désolé, il me manquait quelques clôtures tags qui ont peut-être gâché les choses. De plus, certains caractères spéciaux ou collisions de valeur dans votre frutre peuvent causer des problèmes, mais aussi longtemps que vous utilisez un entier de clé auto-incrémenté de votre base de données, car je suppose que cela ne devrait pas être un problème.



0
votes

Vous pouvez passer l'identifiant actuel en JavaScript en utilisant simplement ci-dessous.Id Voici un exemple xxx

maintenant dans votre fonction, vous pouvez utiliser cet identifiant comme vous le souhaitez < Pré> xxx

Vous pouvez également rendre l'identifiant de manière dinamiquement à l'aide des balises PHP à l'aide de cet exemple xxx


0 commentaires