CODEWITHSUNDEEP
jqueryajaxtwitter-bootstrapbootstrap-modal
Acidy
Acidy

Reputation: 13

Can't show ajax request result in bootsrap modal

I want to display the result of an ajax call in the body of a bootsrap modal dialog. The modal open successfully but I can't change the content of the body.

Here is my code :

      $("#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'
     );

});

});

and the modal

    <!-- 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>

What am I doing wrong ?

Thanks in advance

Upvotes: 0

Views: 250

Answers (3)

Giuseppe
Giuseppe

Reputation: 484

Edited:

I've tested your code and I've made it to work by moving the $('#myModal').modal('show') line outside (after) the $.post code.

$("#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.
});

I have also added status, but it's not necessary.

Upvotes: 0

Claudio Redi
Claudio Redi

Reputation: 68400

Your selector here $('#myModal.modal-body p') is asking for an element with id myModal AND css class .modal-body

You want to have this #myModal .modal-body p. Notice the space after #myModal to build the correct selector hierarchy.

Upvotes: 1

Atal Kishore
Atal Kishore

Reputation: 4738

you are using #myModal.modal-body which is wrong instead use #myModal .modal-body (the difference is space between #myModal and .modal-body)

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

Upvotes: 1

Related Questions