Модалът на Bootstrap се задейства два пъти при затваряне и повторно отваряне

Имам модален формуляр за влизане, извикан чрез щракване върху бутон. И модалът е извикване от външен файл с ajax натоварване. Въпреки това, ако затворя и отворя отново modal. Модалът ще се стартира два пъти и ще се появи двоен модален фонов клас и не мога да използвам и функция на модала. Освен това открих, че се появява конзолното съобщение: [DOM] Намерени са 2 елемента с неуникален идентификатор #loginForm: .

Опитвам се да премахна модалния клас, когато модалният е скрит. Това обаче не работи.

//jquery

$('a.login').click(function(event) {
  var url = "userlogin.php";
  $('.login-container').load(url,function(result){
      $('#modalLoginForm').modal({show:true});

        });

});

$("#modalLoginForm").on("hidden.bs.modal", function () {
  resetMyForm();
  $("#modalLoginForm").remove();
});

$('.loginbutton').click(function(event) {
// prevent the default submit
alert("haha");
event.preventDefault();
var form = $('#loginForm');
//alert(form);
$.ajax({
    url: "authentication.php", 
    type: "POST",
    // use the forms data
    data: form.serialize(),
    beforeSend: function() {    
        console.log( "Processing..." );
    },
    success: function( response ){
        // do sth with the response

        if(response == "OK") {
           // credentials verified
           // redirect

         location.reload();
        }else{
           // credentials incorrect
           // append errormessage to modal
          form.closest('.modal-body').append('<div class="error text- 
          danger">*'+response+'</div>');

          }
          },
    error: function( response ) {
       console.log(response);
    }

    });
    return false;
    });

//index.php

 <a href="/bg" class="btn btn-secondary btn-rounded login" data- 
 toggle="modal">Login</a>
<div class="login-container"></div>

//userlogin.php

    <div class="modal fade" id="modalLoginForm" tabindex="-1" 
    role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content bg-light">
    <div class="modal-header bg-dark">
    <h4 class="col-sm-12 text-center text-white comp ">Sign in</h4>
    </div>
    <div class="modal-body mx-3">
  <div class="container">
  <div class="col-sm-12">
  <form id="loginForm"  method="post">
    <div class="md-form mb-5">
      <i class="fas fa-envelope prefix grey-text"></i>
      <label data-error="wrong" data-success="right" 
     for="defaultForm-email">Username:</label>
     <input type="text" name="username" class="form-control validate">
    </div>

    <div class="md-form mb-4">
      <i class="fas fa-lock prefix grey-text"></i>
       <label data-error="wrong" data-success="right" 
     for="defaultForm-pass">Password:</label>
     <input type="password" name="password" class="form-control validate">

      </div>
    </div>
    <form>
 </div>
  </div>
  <div class="modal-footer d-flex justify-content-center bg-primary">
    <button type="submit" class="btn btn-default text-white comp 
   loginbutton">Login</button>
   </div>
   </div>
   </div>
   </div>

   <script src="js/modal.js"></script>

Искам да стартирам само един модал, когато затварям и отварям отново. Благодаря за вашата помощ.


javascript jquery bootstrap-modal
person shelvey33    schedule 29.06.2019    source източник

Отговори (2)


arrow_upward
0
arrow_downward

Опитайте да го направите по този начин в JS и, моля, използвайте „родните“ опции, за да покажете и скриете модала, известен още като модал. ('превключване')

Моят съвет, преместете целия модал с изключение на съдържанието вътре в modal-body в index.php и оставете формуляра (#loginForm) в userlogin.php, след което променете своя javascript за този:

$('a.login').click(function(event) {
  var url = "userlogin.php";
  $('#modalLoginForm').find('.modal-body').load(url)
  $('#modalLoginForm').modal('toggle');
});

$("#modalLoginForm").on("hidden.bs.modal", function () {
  resetMyForm();
});

Понякога, когато модалните показват, че са дублирани или направо не работят, това е защото импортиранията на jQuery или Boostrap са в грешен ред или са дублирани, но във вашия случай мисля, че просто javascript е грешен.

person Josep Vidal    schedule 29.06.2019
comment
Благодаря. Използвам обаче горния код и не мога да стартирам модала. Добавих функция alert(url), за да гарантирам, че събитието за кликване е задействано. Но модалът не може да бъде стартиран. - person shelvey33; 29.06.2019
comment
Благодаря за вашата помощ. Вашето предложение ми помага да разреша модалния проблем. Въпреки това, това задейства щракването ми върху бутона за влизане като умножено число. Когато за първи път отворете modal и щракнете върху предупреждение за влизане 2 пъти, след това 4 пъти, 8 пъти. Благодаря, че ми помогна. Кодът е актуализиран в горната колона - person shelvey33; 29.06.2019
comment
Решавам проблема чрез $('.loginbutton').unbind().click(function(event) . - person shelvey33; 29.06.2019
comment
@shelvey33 Радвам се, че помогнах! Моля, гласувайте за и маркирайте като отговорено :) - person Josep Vidal; 29.06.2019

arrow_upward
0
arrow_downward

Извиквате modal два пъти: с data-toggle и с modal функция

Опитайте този код във вашия index.php:

<a href="/bg" class="btn btn-secondary btn-rounded login">Login</a>
<div class="login-container"></div>

И добавете някаква проверка, ако модалът вече е зареден на вашата страница, преди да се обадите на load

person ksiger    schedule 29.06.2019
comment
Благодаря. Опитах горния код и открих, че фонът се появява за 1 секунда, след което изчезва веднага. - person shelvey33; 29.06.2019