Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts

    jquery fancybox - inline content not updating...

    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>

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    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

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    367
    Thanks
    9
    Thanked 53 Times in 52 Posts
    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?

  • #5
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    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

  • #6
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    367
    Thanks
    9
    Thanked 53 Times in 52 Posts
    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> 

  • Users who have thanked hdewantara for this post:

    many_tentacles (12-18-2009)

  • #7
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    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!

  • #8
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    367
    Thanks
    9
    Thanked 53 Times in 52 Posts
    Thanks to old plain javascript


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •