How to open bootstrap modal in ajax success

Question

I want to open bootstrap modal through jquery. I know that ajax is working successfully since it generates warnings. But can not open modal. This is my code.

$.ajax({ type: "POST", url: "<?php echo base_url() . 'index.php/application/requestCode'; ?>", data: { 'apiName': apiName, 'api': api, 'hotel': hotel, 'payment':payment, 'template': template }, success: function(msg) { $("#getCodeModal").modal("toggle"); $("#getCode").html(msg); } }); 

And my modal HTML:

  <!-- Modal --> <div class="modal fade" id="getCodeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel"> API CODE </h4> </div> <div class="modal-body" id="getCode" style="overflow-x: scroll;"> //ajax success content here. </div> </div> </div> </div> 

By mistake in the console: the modal function is not.

Answer 1

try with this

 success: function(resp){ $("#getCode").html(resp); $("#getCodeModal").modal('show'); } 

Answer 2

Try the following:

 success: function(data) { $("#getCode").html(data); jQuery("#getCodeModal").modal('show'); } 

That should work :).

Answer 3

this happens if you have included the jquery library twice. check this, you may have included it in your index, and then again it is unnecessary on a partial page.