How to show Ajax response as modal popup
34,936
Solution 1
I solved this problem by creating modal and by removing data-toggle
and data-target
and just appending response to that modal div
Code For modal div
<div id="login_for_review" class="modal hide" role="dialog">
</div>
Code For hyperlink
<a th:if="${ratingSummary}" href="#" class="small dark account review_ratings_login">Login to write a review</a>
Code For 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");
}
});
});
Solution 2
In Bootsrap modal popup, You can use plain way to show modal which don't need pre-defined modal div container . see at modal
For E.g
$.ajax({
url: "url",
type: 'POST',
dataType: "html",
data:{id:params},
success: function(data, status, xhr) {
if(data==""){
window.location.href="/";
}
else{
BootstrapDialog.show({
title: "Modal Tital",
message: function(dialogRef){
$mydata = $($.parseHTML(data));
return $mydata;
},
onshow: function(dialog){
// and css change if need, eg.
dialog.$modalHeader.css("float","none");
},
onshown:function(dialog)
{
// event after shown
},
onhide:function(dailog)
{
// event on hide
}
});
}
},
statusCode: {
401: function () {
alert("Your session has been expired");
}
}
});
Comments
-
subbu royal about 4 years
I have a link on clicking it is sending
ajax
request and getting response successfully which is html file and I am appending to adiv
, but I need to show thatdiv
asmodal 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
asmodal pup
instead I am gettingblack screen
can anyone help me how to do this? -
subbu royal almost 8 yearsAghere thanks for you reply, but I solved my problem in different approach please check my answer
-
Dimitry K over 7 yearsThis seems like the best and most modern solution for 2016, strange it I am the first to upvote it