J'ai un modal qui charge un formulaire à l'intérieur. Cependant, chaque fois que je clique sur le bouton pour ouvrir le modal, il duplique le nombre précédent de modaux. Il étoiles avec 1, puis 2, 4, 8, 16 et ainsi de suite ...

Voici mon code:

$('#createButton').click(function () {
    var url = $('#createModal').data('url');

    $.get(url, function (data) {
        $('#modalContent').html(data);
        $('#createModal').modal('show');
    });
});
<div id="createModal" class="modal fade" role="dialog" data-url='@Url.Action("Create")'>
    <div class="modal-dialog" id="dialog">
        <div class="modal-content" id="modalContent">

        </div>
    </div>
</div>

Très reconnaissant pour toute aide!

EDIT: J'ai un autre modal dans la même page, même s'il a des identifiants différents. Si je commente l'un d'entre eux, obtenez toujours le même problème.

<div id="editModal" class="modal fade" role="dialog">
   <div class="modal-dialog" id="dialogEdit">
      <div class="modal-content" id="modalContentEdit">

      </div>
   </div>
</div>
$(document).ready(function () {
    $(".menuActionsLink").click(function () {
        var url = $(this).data('url');

        $.get(url, function (data) {
            $('#modalContentEdit').html(data);
            $('#editModal').modal('show');
        });
    });
});
1
ToMane 15 sept. 2020 à 15:44

2 réponses

Meilleure réponse

EDITEE ET IMPORTANT: si nous gardons le Javascript dans la vue, cela fonctionne parfaitement !! Mais quand on veut placer le javascript dans un fichier javascript pour pouvoir appeler de toutes les vues les mêmes fonctions, ça fait ce bug !!!! quelqu'un sait pourquoi ??? cela signifie également qu'il ne s'agit pas d'avoir du code dupliqué!

SOLUTION:

N'appelez pas la fonction en cliquant dans un fichier javascript !!!

function tentativa1() {

        var url = $('#asd').data('url');

        $.get(url, function (data) {
            $('#asd1').html(data);
            $('#asd').modal('show');
        });
};

Utilisez une fonction normale comme vous pouvez le voir ci-dessus, et en HTML, faites la partie on click ...

<button id="criarRegisto" onclick="tentativa1()">+ Create New Area</button>

Je suis nouveau dans ce domaine et je ne comprends pas pourquoi ce comportement se produit, mais cela fonctionne parfaitement de cette façon!

0
Ricardo Figueiredo 15 sept. 2020 à 14:50

Cela devrait fonctionner, je pense que vous avez probablement des doublons de l'un des ID, peut-être que id = "createModal" est mentionné deux fois dans votre code. Pris isolément, ce code fonctionne correctement, ce qui suggère que quelque chose d'autre ne va pas. Si vous avez vraiment du mal, vous pouvez vérifier si l'élément existe déjà dans cette div en faisant quelque chose comme ceci pour vérifier que l'élément n'existe pas.

Je suppose que createModal n'est pas déjà dans modalContent. Si tel est le cas, vous pouvez vérifier que la longueur est inférieure à 1. Si elle est déjà là, vous devriez peut-être vérifier is(':visible').

$('#createButton').click(function () {
    var url = $('#createModal').data('url');
    $.get(url, function (data) {
      if($('#modalContent #createModal').length <= 1) {
        $('#modalContent').html(data);
        $('#createModal').modal('show');
      }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="createButton">
  Click me
</div>
0
Johnny 15 sept. 2020 à 13:12