Page 1 of 1

Another jQuery question - link staying .show(n)

Posted: Tue Mar 06, 2007 11:20 am
by Luke
I love jQuery more by the day... what a freaking awesome library. Anyway, I'm having an issue I was hoping somebody could help me with. I have a little "mini-cart" that displays when you click a "view cart" link. It pulls a remote page called /page/minicart into a div to show the cart. When you click "add to cart", it adds to the cart asynchronously and then pops up the minicart div automatically to show that it's been added. After 5 seconds, it closes the minicart again. The problem is that it leaves the "close cart" link open when it closes automatically. If you click "close cart" it does what it's supposed to.

Code: Select all

      function prepareData()
      {
           $("#product_display").prepend("<p class='attention' id='loadingText' style='display: none;'>Adding to cart...</p>");
           $("#loadingText").fadeIn("fast");
      }

      function updatePage()
      {
          $("#minicart_container").load(
              "/page/minicart",
              {nocache: "true"},
              function(){
                  $("#loadingText").fadeOut("fast");
                  $("#viewcart_standard").click();
              }
          );

          var t=setTimeout("$('#minicart .close a').click();",5000);
      }

      $("#productform").submit(function(){
          var options = { 
              beforeSubmit:  prepareData,
              success:       updatePage,
              url:           "http://store.mystore.com/add_to_cart"
          };
          $(this).ajaxSubmit(options);
          return false;
      });

      /* Minicart displayer */
      $("#viewcart_standard").attr("href", "javascript:;")
      .html(' View cart <img src="images/icons/cart_right.png" width="16" height="16" alt="Shopping Cart">')
      .click(function(){
          $("#minicart").show();
          $("#minicart_container").show("slow");
          $(this).hide();
          $(".close_cart").show();
      })
      .parent().append(' <a href="javascript:;" class="close_cart">Close cart</a> ');

      $(".close_cart").hide().click(function(){
          $("#minicart .close a").click();
      });

      $("#minicart .close a").click(function(){
          $("#minicart").hide("slow", function(){
              $("#viewcart_standard").show();
              $(".close_cart").hide();
          });
      });

Code: Select all

  <div id="shopping_bar">
		<a href="/page/LOGN">Login / Create Account</a> |
		<a href="/page/OINF">Checkout</a> |
		<a href="/page/BASK" id="viewcart_standard">View Cart</a>
  </div>
  <div class="clear_right"></div>
Maybe I should change the "#viewcart_standard" link to a toggle and then change it's html from view cart to close cart?

Posted: Tue Mar 06, 2007 2:44 pm
by nickvd
That's exactly what I would do in your situation. I try to avoid having any html in my javascript, unless required (which is theoretically rare)

Posted: Tue Mar 06, 2007 11:12 pm
by Kieran Huggins
Maybe you're assigning the behaviour before the element exists, so the behaviour is assigned to "no" element.

instead of:

Code: Select all

      /* Minicart displayer */
      $("#viewcart_standard").attr("href", "javascript:;")
      .html(' View cart <img src="images/icons/cart_right.png" width="16" height="16" alt="Shopping Cart">')
      .click(function(){
          $("#minicart").show();
          $("#minicart_container").show("slow");
          $(this).hide();
          $(".close_cart").show();
      })
      .parent().append(' <a href="javascript:;" class="close_cart">Close cart</a> ');

      $(".close_cart").hide().click(function(){
          $("#minicart .close a").click();
      }); 
try

Code: Select all

      /* Minicart displayer */
      $("#viewcart_standard").attr("href", "javascript:;")
      .html(' View cart <img src="images/icons/cart_right.png" width="16" height="16" alt="Shopping Cart">')
      .click(function(){
          $("#minicart").show();
          $("#minicart_container").show("slow");
          $(this).hide();
          $(".close_cart").show();
      })
      .parent().append($(' <a href="javascript:;" class="close_cart">Close cart</a> ').hide().click(function(){$("#minicart .close a").click();}));
(no clue if it will work.. just a hunch)

I'm making use of the awesome "build a DOM element from this code and wrap it in jQuery" use of the $() function...

Man, I love this framework ;-)

Posted: Tue Mar 06, 2007 11:33 pm
by Luke
me too... it makes javascript sexy Image

Posted: Tue Mar 06, 2007 11:46 pm
by Kieran Huggins
to be fair, javascript was always sexy.... jQuery helps it put out a lot faster though -- it's the peach schnapps of frameworks! ;-)

BTW - I love it so much I'm attempting to develop "kQuery" - a data model framework in PHP (with a very familiar syntax) :-)

Posted: Tue Mar 06, 2007 11:56 pm
by Luke
Kieran Huggins wrote:to be fair, javascript was always sexy....
Then how do you explain this?

Posted: Wed Mar 07, 2007 12:48 am
by Kieran Huggins
Pretty phallic if you ask me... I know many women who would be disturbingly aroused by that image!