2017-02-20 8 views
0

BS Modalを使用してニュースレターフォームにフィードバックを表示しています。 AJAXとPHPを使用してDBに電子メールを挿入し、STATUSを返します。フィードバックが返されないブートストラップモーダル

PHPとAJAXの応答は、検証とすべてで有効ですが、私はフィードバックを表示するためにJSを使用してモーダルを呼び出すと、モーダルがもう閉じず、解読できません。

モーダル:

<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">ENGINE|Sistemas</h4> 
     </div> 
     <div class="modal-body"> 
     <p id="response"></p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button> 
     </div> 
    </div> 
    </div> 
</div> 

そして、JS:

$(function() 
{ 
    var form = $('#newsletter-form'); 
    $(form).submit(function(e) 
    { 
    e.preventDefault(); 

    var formData = $(form).serialize(); 

    $.ajax({ 
     type: 'POST', 
     url: $(form).attr('action'), 
     data: formData 
    }) 

    // ---------------------------------------- 
    // Success 
    // ---------------------------------------- 
    .done(function(response) 
    { 
     $('#myModal').modal('show'); 
     $('#myModal, #response').replaceWith(response); 
     $('#newsletter-email').val(''); 
    }) 

    // ---------------------------------------- 
    // Error 
    // ---------------------------------------- 
    .fail(function(data) 
    { 
     if (data.responseText !== '') 
     { 
     $('#myModal').modal('show'); 
     $('#myModal, #response').replaceWith(data.responseText); 
     } 
     else 
     { 
     alert('Ocorreu um erro! Seu email não foi cadastrado.'); 
     } 
    }); 
    }); 
}); 

カントーモーダル応答と完全に現れ、単にもう閉じない理由を私は理解していません...

助けが必要ですか?

答えて

0

コンソールでエラーjsが表示されますか?いいえの場合は、これを試してみてください:

$("#myModal").on('hidden', function(){ 
    $("#myModal").remove(); 
    $('.modal-backdrop').remove(); 
}); 
+0

に:

だけ変化解決します。 $( '#myModal')。modal( 'show'); 'うまく動作しますが、' $( '#myModal、#response')。replaceWith(data.responseText); ! –

+0

そして、私は既に投稿したことをやってみました。 –

0

これはうまくいきました。

理由はわかりませんが、レスポンスはモーダルが正しく動作するのを妨げていました。私はちょうど表示レスポンスがerrosを引き起こしていることfoundout

$('#myModal').modal('show'); 
    $('#myModal, #response').replaceWith(data.responseText); 

$('#myModal').modal('show'); 
    $('#response').text(data.responseText); 

=)

関連する問題