I have 2 jsp's products.jsp and viewcart.jsp .Now I am trying to show cart(viewcart.jsp) in iframe using fancybox. When i click add to cart, iframe wont popup. This is what i have done. How should i pass the ajax response to iframe?
$(document).ready(function(){
$('.cart').click(function() {
var pdtid = $(this).attr('data-productid');
$.ajax({
url : '${pageContext.request.contextPath}/addtocart' + pdtid,
dataType: 'json',
type : 'GET',
data :{'id': pdtid},
success: function(response) {
$.fancybox(response,{
'width' : 900,
'height' : 520,
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe',
'href' : "${pageContext.request.contextPath}/viewcart.html"
});
}
});
});
});
EDIT
$(document).ready(function() {
$('.cart').on("click", function (e) {
e.preventDefault();
var pdtid = $(this).attr('data-productid');
$.ajax({
type: "GET",
cache: false,
url: '${pageContext.request.contextPath}/addtocart' + pdtid,
data: {'id': pdtid},
success: function (response) {
$.fancybox(response,{
href : '#response',
width: 500,
height: 500
});
}
});
});
});
If I understood your question correctly, you could try formatting your ajax
response
prior parsing it through fancybox like :It's assumed you know the correct (json) structure of your
response
.See JSFIDDLE