I am facing an issue with my popup modal. When a user clicks on a link, the modal appears but without any content. I am new to ajax and feeling a bit confused about what steps to take next. Below is the HTML code snippet:
<div class="modal fade" id="answerModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">ANSWER</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<a data-toggle="modal" class="btn" href=#link1 data-target="#answerModal"> VIEW ANSWER → </a>
<a data-toggle="modal" class="btn" href=#link2 data-target="#answerModal"> VIEW ANSWER → </a>
<a data-toggle="modal" class="btn" href=#link3 data-target="#answerModal"> VIEW ANSWER → </a>
Here is the script I have been using:
$(document).ready(function(){
$('.btn').click(function(){
var link = $(this).data('url');
console.log(ok);
// AJAX request
$.ajax({
url: link,
type: 'get',
data: link,
success: function(response){
// Add response in Modal body
$('.modal-body').html(response);
// Display Modal
$('#answerModal').modal('show');
}
});
});});});