Another jQuery question - link staying .show(n)
Posted: Tue Mar 06, 2007 11:20 am
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.
Maybe I should change the "#viewcart_standard" link to a toggle and then change it's html from view cart to close cart?
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>