subbu royal subbu royal - 5 months ago 38
HTML Question

How to show Ajax response as modal popup

I have a link on clicking it is sending

ajax
request and getting response successfully which is html file and I am appending to a
div
, but I need to show that
div
as
modal popup
and I tried something below.

in
html
file

<a th:if="${ratingSummary}" href="#" class="small dark account review_ratings_login">Login to write a review</a>

<div id="login_for_review" data-toggle="modal" data-target="#reviewLoginModal"></div>


in
js
file

$(document).on('click', '.review_ratings_login', function () {
var $data = $('#review_product_id span').text();
var url = '/mycompany/login/'+$data;
$.ajax({
type: 'GET',
url: url,
success: function (output) {
$('#login_for_review').html(output).modal('show');// I tried to show this response as modal popup
},
error: function(output){
alert("fail");
}
});
});


output
file

<div class="centerForm modal fade" role="dialog" style="margin-left: 35%;" id="reviewLoginModal">

<div class="modal-dialog modal-sm" >
<div class="modal-content">
// here I have login form
</div>
</div>


but I am not getting this
html output
as
modal pup
instead I am getting
black screen
can anyone help me how to do this?

Answer

I solved this problem by creating modal and by removing data-toggle and data-target and just appending response to that modal div

modal div

<div id="login_for_review" class="modal hide"  role="dialog">

</div>

hiper link

 <a th:if="${ratingSummary}" href="#"  class="small dark account review_ratings_login">Login to write a review</a>

ajax call

$(document).on('click', '.review_ratings_login', function () {
        var $data = $('#review_product_id span').text();
         var url = '/mycompany/login/'+$data;
        $.ajax({
            type: 'GET',
            url: url,
            success: function (output) {
            $('#login_for_review').html(output).modal('show');//now its working
            },
            error: function(output){
            alert("fail");
            }
        });
    });