CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user1234
user1234

Reputation: 3159

How to add dynamic content to the bootstrap modal on click of a link-Jquery/JS

I've a link on click of which I show the bootstrap modal. However I need to show dynamic content in the modal depending on the condition applied.

Js:

     if (success) {
        $("#basicModal").modal('show').html("success"); //doesnt work
     }else if (error){
        $("#basicModal").modal('show').html("error"); //something like this, but doesnt work
     }

here is the html:

 <a class="button-link" data-toggle="modal"  data-target="#basicModal">click to test</a>

    //bootstrap modal

     <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">&amp;times;</button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <h3>Modal Body</h3>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
          </div>
        </div>

Any ideas how this be achieved?? Thanks!!

Upvotes: 1

Views: 5408

Answers (2)

Chol Nhial
Chol Nhial

Reputation: 1397

Creating modals in bootstrap can be pretty annoying. Which is why I let BootboxJS (http://bootboxjs.com/) do it. Download it from here: https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js. You can always replace message and title with HTML

bootbox.dialog({
  message: "I am a custom dialog",
  title: "Custom title",
  buttons: {
    success: {
      label: "Success!",
      className: "btn-success",
      callback: function() {
        Example.show("great success");
      }
    },
    danger: {
      label: "Danger!",
      className: "btn-danger",
      callback: function() {
        Example.show("uh oh, look out!");
      }
    },
    main: {
      label: "Click ME!",
      className: "btn-primary",
      callback: function() {
        Example.show("Primary button");
      }
    }
  }
});

Upvotes: 2

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

You can use bootstrap's below event to append dynamic content:

DEMO //change value of success to true or false to test the scenarios

if (success) {
        $("#basicModal").on("shown.bs.modal", function () {  //Tell what to do on modal open
             $(this).find('.modal-body').append('success')
        }).modal('show'); //open the modal once done
}else if (error){
        $("#basicModal").on("shown.bs.modal", function () { 
             $(this).find('.modal-body').append('fail')
        }).modal('show');
}

If you want to clear everything and add it as new content then just use html instead of append like one below

$(this).find('.modal-body').html('success')

Upvotes: 2

Related Questions