CODEWITHSUNDEEP
jquery
moksha
moksha

Reputation: 47

Passing data to a bootstrap modal

I have 5 images with relevant data.If i visited all the images i need to show modal box with some message"You have visited all the images". otherwise "please visit all the images".But am getting empty modal box.

$('#submit').click(function(){
        $('.modal-body').html('')
        if($('.img').hasClass('visited')){
         $('modal-body').append('<p>you have successfully visited all the images</p>');
        }else{
         $('modal-body').append('<p>please visit all the images</p>');
        }

    });
});

Here is my HTML

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
          </div>
        </div>
        </div>
        </div>
        <button type="button" class="btn btn-warning btn-lg" id="submit" data-toggle="modal" data-target="#myModal">Submit</button>

Upvotes: 0

Views: 185

Answers (3)

Advaith
Advaith

Reputation: 2580

$('#submit').click(function(){
        $('.modal-body').html('')
        if($('.img.visited').length  >= 5){
         $('.modal-body').append('<p>you have successfully visited all the images</p>');
        }else{
         $('.modal-body').append('<p>please visit all the images</p>');
        }

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
          </div>
        </div>
        </div>
        </div>
        <button type="button" class="btn btn-warning btn-lg" id="submit" data-toggle="modal" data-target="#myModal">Submit</button>

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

You should change your condition to something similar to this:

$('#submit').click(function(){
        $('.modal-body').html('')
        if($('.img.visited').length  >= 5){
         $('modal-body').append('<p>you have successfully visited all the images</p>');
        }else{
         $('modal-body').append('<p>please visit all the images</p>');
        }

    });
});

Upvotes: 2

DennyHiu
DennyHiu

Reputation: 6060

you miss . (DOT) notation in your code. It should be

$('.modal-body').append('<p>you have successfully visited all the images</p>');

and 

$('.modal-body').append('<p>please visit all the images</p>');

Upvotes: 1

Related Questions