JavaScript and client side scripting.
Moderator: General Moderators
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » 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.
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?
nickvd
DevNet Resident
Posts: 1027 Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:
Post
by nickvd » Tue Mar 06, 2007 2:44 pm
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)
Kieran Huggins
DevNet Master
Posts: 3635 Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:
Post
by Kieran Huggins » Tue Mar 06, 2007 11:12 pm
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
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Tue Mar 06, 2007 11:33 pm
me too... it makes javascript sexy
Kieran Huggins
DevNet Master
Posts: 3635 Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:
Post
by Kieran Huggins » Tue Mar 06, 2007 11:46 pm
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)
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Tue Mar 06, 2007 11:56 pm
Kieran Huggins wrote: to be fair, javascript was always sexy....
Then how do you explain
this ?
Kieran Huggins
DevNet Master
Posts: 3635 Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:
Post
by Kieran Huggins » Wed Mar 07, 2007 12:48 am
Pretty phallic if you ask me... I know many women who would be disturbingly aroused by that image!