jQuery jquery fancybox - inline content not updating...

many_tentacles · 12-13-2009, 04:15 PM

I am trying to incorporate the jquery fancybox functionality into a shopping cart (for this example I am using the jquery simplecart).

I have a button which opens up a fancybox window with the cart contents in it. From here you are able to remove items etc... trouble is, although the buttons are working and items are being removed, the values within the fancybox popup do not update.

Any ideas how to fix this... code attached.

Thanks

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title> 
<style type="text/css">
        .itemContainer{
                width:100%;
                float:left;
                font-size:10px;
        }
        
        .itemContainer div{
                float:left;
                margin: 5px 10px 5px 10px ;
                width:45px;
        }
        
        .itemContainer div.itemdecrement {
                width:5px;
                margin-right:0px;
        }
        
        .itemContainer div.itemincrement {
                width:5px;
                margin-left:0px;
        }
        
        .itemContainer div.itemQuantity {
                width:10px;
                margin-right:5px;
        }
        
        .itemContainer a{
                text-decoration:none;
        }
        
        .cartHeaders{
                width:100%;
                float:left;
                font-size:10px;
        }
        
        .cartHeaders div{
                float:left;
                margin: 5px 10px 5px 10px;
                width:45px;
        }
        
        .cartheaders div.itemdecrement {
                width:5px;
                visibility:hidden;
                margin-right:0px;
        }
        
        .cartheaders div.itemincrement {
                width:5px;
                visibility:hidden;
                margin-left:0px;
        }
        
        .cartheaders div.itemRemove {
                visibility:hidden;
        }
        
        .cartheaders div.itemQuantity {
                margin-left:-5px;
                margin-right:20px;
                width:10px;
        }
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fancybox/jquery.fancybox-1.2.6.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox/jquery.fancybox-1.2.6.css" media="screen" />
<script type="text/javascript">
                $(document).ready(function() {
                $("a.popup").fancybox({
                        'hideOnContentClick': false
                });
                });
                
        </script>
    
<script type="text/javascript" src="simpleCart.js"></script>
<script type="text/javascript">
        simpleCart.email = "email@email.com";
        simpleCart.checkoutTo = PayPal;
        simpleCart.currency = GBP;
        simpleCart.taxRate  = 0.00;
        simpleCart.shippingQuantityRate = 0.10; 
        
        simpleCart.cartHeaders = ["Name", "Type", "Code", "Price" ,"decrement" , "Quantity", "increment", "Total" ];
</script>
</head>
<body> 
<div id="basket"><div class="simpleCart_items" ></div></div> 
<p> 
SubTotal: <span class="simpleCart_total"></span> <em>(items: <span class="simpleCart_quantity"></span>)</em> <br /> 
Shipping: <span class="simpleCart_shippingCost"></span> <br /> 
Final Total: <span class="simpleCart_finalTotal"></span> <br/> 
<input type="button" class="simpleCart_checkout" value="Checkout &raquo;"/> <a class="popup" href="#basket">View basket &raquo;</a> 
</p>  
<ul>   
    <li class="simpleCart_shelfItem">
        <h2 class="item_name">Test Item</h2>
        <input type="hidden" class="item_type" value="Type 1" />
        <p>Item# - 00001<input type="hidden" class="item_code" value="00001" /></p>
        <p>Size: 14mm<input type="hidden" class="item_size" value="14mm" /></p>
        <h4>&pound;<span class="item_price">187.95</span></h4>
        <p><input type="text" class="item_quantity" value="1" size="3" /></p>
                <p><input type="button" class="item_add" value="add to basket &raquo;" /></p>
        <input type="hidden" class="item_shipping" value="5.43" />      
    </li>
</ul>    
</body>
</html>

Fumigator · 12-14-2009, 03:46 PM

If you had a demo site of the problem somewhere we could play around with it to see what you mean that would help a lot.

many_tentacles · 12-14-2009, 04:15 PM

http://www.tombrennand.net/tiaras/tiara_detail.aspx

If you add a tiara to the basket, you'll see it add to the quantity in the top right. Then if you click "View basket" and use the + or - buttons to adjust the quantity, the figure in the top right changes but the figure in the fancybox popup doesn't.

Hope this helps.

Thanks

hdewantara · 12-16-2009, 05:51 PM

I haven't used both jQuery's plugins before,
but after spying your page deep down,
I got this (focus on item quantity only):

The item quantity on top right of page, see line 137:

Code:

...(items: <span class="simpleCart_quantity"></span>)...

On the other hand,
what pasted into <div class="simpleCart_items" ></div> (line 130) is something like:

Code:

...<a href="javascript:;" onclick="simpleCart.items['c2'].decrement();">-</a>
</div>
<div class="itemQuantity">7</div>
<div class="itemincrement">
<a href="javascript:;" onclick="simpleCart.items['c2'].increment();">+</a>
</div>...

So, should the red classes have the same name?

many_tentacles · 12-16-2009, 07:24 PM

One is the total number of all items and the other is the quantity of each particular item so that shouldn't have a bearing on the problem.

try this link... I've incorporated the cart into the page as well as the popup. You'll be able to see the one in the page updating as you click the + and - buttons... even the ones in the fancybox popup.

http://www.tombrennand.net/cart.html

Thanks

hdewantara · 12-18-2009, 01:13 AM

Right, it is not.

I guess there must be a kind of updatefb() function
within fancybox. See the a small test below:

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">



<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="cart_files/jquery.css" media="screen">

<script type="text/javascript" src="cart_files/jquery_002.js"></script>

<script type="text/javascript" src="cart_files/jquery.js"></script>



<script type="text/javascript">



function toggletextf(){

  var 

    a=document.getElementById("toggle");

  switch (a.innerHTML){

    case "hello" : a.innerHTML="welcome"; break;

    default      : a.innerHTML="hello";

  }

  updatefb();

}



function updatefb(){

  var

    a=document.getElementById("fancy_div");

  if (a==null) alert("can not detect fancy_div");

  else a.innerHTML=document.getElementById("basket").innerHTML;

}



//load fancybox jQuery style.

$(document).ready(function(){

  $("a.popup").fancybox({

    'hideOnContentClick': false,

  });

});

                

</script>

    

</head>



<body> 



<!--inline model fancybox placeholder-->

<div id="basket">

  <a id="toggle" href="javascript:toggletextf();">hello</a>

</div>



<!--inline model fancybox link -->

<a class="popup" href="#basket">View fancybox</a>



</body>

</html>

many_tentacles · 12-18-2009, 02:41 PM

Genius!

I think I may have been looking for something a little more complicated but even so, your method worked a treat.

Code:

function updatefb(){ 
  document.getElementById("fancy_div").innerHTML=document.getElementById("basket").innerHTML; 
}

Thanks!

hdewantara · 12-18-2009, 07:48 PM

Thanks to old plain javascript