Question

我想在bootsrap模式对话框的主体中显示ajax调用的结果。模态打开成功，但我不能改变身体的内容。

这是我的代码：

      $("#formulaire").submit(function(e){ 
  e.preventDefault(); 
    $.post(
        'scripts/jeuZyga.php', 
        {
           // data : donnees
           civilite : $(".civilite:checked").val(),
           nom : $("#nom").val(),
           prenom : $("#prenom").val(),
           email : $("#email").val(),
           dateNaissance : $("#dateNaissance").val(),
           ville : $("#ville").val(),
           couleurPull : $(".couleurPull:checked").val(),
        },

        function(data){

            if(data == 'Success'){

                  $('#myModal .modal-body p').html('Merci de votre participation ! <br/>Rendez-vous pour le tirage au sort');

            }
            else if (data == 'Forbidden') {

                   $('#myModal .modal-body p').html('<p>Vous avez déjà joué</p>');

            }
            else {

                    $('#myModal .modal-body p').html('Erreur lors du traitement de la requête, veuillez réessayer ultérieurement.');


            }


        },
            $('#myModal').modal('show')                 
        //'text'
     );

});

}）;

和模态

    <!-- Modal -->
<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-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Votre participation au Jeu "Gagnez un Pull Zyga"</h4>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>

我做错了什么？

提前致谢

Answer 1

您正在使用#myModal.modal-body这是错误的而是使用#myModal .modal-body（差异是#myModal和.modal-body之间的空格）

$('#myModal .modal-body p').html('Merci de votre participation ! <br/>Rendez-vous pour le tirage au sort');

Answer 2

您的选择器$('#myModal.modal-body p')要求标识为myModal的元素和css类.modal-body

您希望拥有此#myModal .modal-body p。注意#myModal之后的空格以构建正确的选择器层次结构。

Answer 3

编辑：

我已经测试了你的代码，我已经通过在$ .post之外（之后）移动 $（'＃myModal'）。modal（'show'）行来实现它。代码。

$("#formulaire").submit(function(e){
    e.preventDefault(); 

    $.post("scripts/jeuZyga.php",
        {
           // data : donnees
           civilite : $(".civilite:checked").val(),
           nom : $("#nom").val(),
           prenom : $("#prenom").val(),
           email : $("#email").val(),
           dateNaissance : $("#dateNaissance").val(),
           ville : $("#ville").val(),
           couleurPull : $(".couleurPull:checked").val()        // no 'comma' here.
        },
        function(data,status){
            alert( "Data Loaded: " + data + ", status: " + status );
            if(data == 'Success'){
              $('#myModal .modal-body p').html('Merci de votre participation ! <br/>Rendez-vous pour le tirage au sort');
            }
            else if (data == 'Forbidden') {
              $('#myModal .modal-body p').html('<p>Vous avez déjà joué</p>');
            }
            else {
              $('#myModal .modal-body p').html('Erreur lors du traitement de la requête, veuillez réessayer ultérieurement.');
            }
        }
        //,
        //    $('#myModal').modal('show')       // moved outside $.post
        //'text'
    );
  $('#myModal').modal('show');        // moved here, outside the $.post code.
});

我还添加了状态，但没有必要。

无法在bootsrap模式中显示ajax请求结果

3 个答案: