1

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 you do `$.fancybox(response)` you are trying to show a(n) (json) [object], which it won't work. Do you just want to show the `viewcart.jsp` page regardless the `response` you get from ajax? or is there any part from the `response` that affects what you want to show in fancybox? – JFK Oct 30 '14 at 23:54
  • I want to add product to viewcart and show it. –  Oct 31 '14 at 01:07
  • OK, you told me what you want, could you answer specifically my question now? – JFK Oct 31 '14 at 02:18
  • Response that affects? I did not get it. No nothing else if i get it right. Do you want controller part or any other part of code. –  Oct 31 '14 at 02:32
  • Well, the title of your question is confusing. You are asking : "how to show ajax response in fancybox", so I am going to re-formulate my question : what part of the ajax response you want to show? – JFK Oct 31 '14 at 07:21
  • I pass request through ajax.Showing product on cart is the response. If there is no need for to pass it through ajax, i will change title.Also i tried keeping fancybox outside ajax part, it shows iframe, but the product is not added to the iframe cart. –  Oct 31 '14 at 07:34
  • I guess the issue you are having is because you need to pass `data` to an `iframe`, not just to fancybox. Check http://stackoverflow.com/a/26446330/1055987 if that helps. – JFK Oct 31 '14 at 17:04
  • Okay I will check now. –  Oct 31 '14 at 17:07
  • @JFK Please check edit. I added a div in the same page to show the cart contents and changed jquery code. Now i am able to load the popup,but contents wont show up on first attempt. If i refresh the page i am able to see the cart contents in the pop up. After long struggle i came this far. Do i need to open new question or it is enough here itself. Please help me solve this. –  Nov 06 '14 at 17:14
  • Could you tell what does `response` return? – JFK Nov 06 '14 at 18:42
  • Name of the product with quantity and price. You need any other part of code. –  Nov 07 '14 at 04:11
  • If the answer is wrong, i think it returns nothing. Please waste 5 minutes on me, I will learn something. I will not disturb you here after. –  Nov 07 '14 at 09:20
  • There is nothing wrong with your answer ... I just need to find those 5 minutes to answer your question ;) – JFK Nov 07 '14 at 18:10

1 Answers1

1

If I understood your question correctly, you could try formatting your ajax response prior parsing it through fancybox like :

jQuery(document).ready(function ($) {
    $.ajax({
        url: "{your processing file's URL}",
        cache: false,
        dataType: "json",
        success: function (response) {
            var result =
                "<div id='result'>" +
                "<p>Product Id   : " + response.id + "</p>" +
                "<p>Product Name : " + response.name + "</p>" +
                "</div>";

            $.fancybox(result, {
                type: "html"
            }); // show formated response
        }
    })
}); // ready

It's assumed you know the correct (json) structure of your response.

See JSFIDDLE

JFK
  • 40,963
  • 31
  • 133
  • 306
  • Thanks for the great help. Just curious, why my edit code in question above works after i refresh only. –  Nov 10 '14 at 16:04
  • @user3844782 : maybe because you are populating an inline `
    `, which is empty on page load. I think if you do it as in my example, it should work out of the box
     – JFK Nov 10 '14 at 17:41
  • You may be right. Following your way, i need to change a lot on other parts of the code. But if i am able to make EDIT part code work, it would be easier for me,(if i make it load it without refresh its done). But i don't know if its the right way to do. Can i open a question with more details. –  Nov 11 '14 at 06:52