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

Question

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

$("#basicModal .modal-body").empty().html("success"); for example — ItayB
– ItayB, Commented Jun 26, 2015 at 5:21

Guruprasad J Rao · Accepted Answer · 2015-06-26 05:28:54Z

2

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')

edited Jun 26, 2015 at 5:28

answered Jun 26, 2015 at 5:21

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chol Nhial · Accepted Answer · 2015-06-26 06:21:05Z

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");
      }
    }
  }
});

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related