Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET jQuery
I am creating fly to basket on Online Shopping "Add To Cart", For flying to basket i am using one jQuery. Below mentioning...
<script type="text/javascript">
$(document).ready( function(){
	$('.addProduct').each(function(){
		var img = $("#ctl00_ContentPlaceHolder1_imgProduct");
		$(this).click(function(){
			flyToElement($(img), $('#ctl00_lbtnMyCart'));
		    return false;
		});
 
	});
	$('.removeProduct').each(function(){
		var img = $(this).closest('li').find('img:first');
		$(this).click(function(){
			flyFromElement($(img), $('#basket'));
			return false;
		});
	});
});
 
function flyToElement(flyer, flyingTo, callBack /*callback is optional*/) {
	var $func = $(this);
 
	var divider = 3;
 
	var flyerClone = $(flyer).clone();
	$(flyerClone).css({
		position: 'absolute',
		top: $(flyer).offset().top + "px",
		left: $(flyer).offset().left + "px",
		opacity: 1,
		'z-index': 1000
	});
	$('body').append($(flyerClone));
 
	var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
	var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;
 
	$(flyerClone).animate({
		opacity: 0.4,
		left: gotoX,
		top: gotoY,
		width: $(flyer).width()/divider,
		height: $(flyer).height()/divider
	}, 700,
		function () {
			$(flyingTo).fadeOut('fast', function () {
				$(flyingTo).fadeIn('fast', function () {
					$(flyerClone).fadeOut('fast', function () {
						$(flyerClone).remove();
						if( callBack != null ) {
							callBack.apply($func);
						}
					});
				});
			});
		});
}
 
function flyFromElement(flyer, flyingTo, callBack /*callback is optional*/) {
	var $func = $(this);
 
	var divider = 3;
 
	var beginAtX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
	var beginAtY = $(flyingTo).offset().top + ($(flyingTo).width() / 2) - ($(flyer).height()/divider)/2;
 
	var gotoX = $(flyer).offset().left;
	var gotoY = $(flyer).offset().top;
 
	var flyerClone = $(flyer).clone();
 
	$(flyerClone).css({
		position: 'absolute',
		top: beginAtY + "px",
		left: beginAtX + "px",
		opacity: 0.4,
		'z-index': 1000,
		width:$(flyer).width()/divider,
		height:$(flyer).height()/divider
	});
	$('body').append($(flyerClone));
 
	$(flyerClone).animate({
		opacity: 1,
		left: gotoX,
		top: gotoY,
		width: $(flyer).width(),
		height: $(flyer).height()
	}, 700,
		function () {
			$(flyerClone).remove();
			$(flyer).fadeOut('fast', function () {
				$(flyer).fadeIn('fast', function () {
					if (callBack != null) {
						callBack.apply($func);
					}
				});
			});
		});
}
		</script>
 
My Add to Cart div is
<a href="#" class="addProduct">
    <asp:ImageButton ID="ibtnAddToCart" runat="server" OnClick="ibtnAddToCart_Click"
        ImageUrl="~/images/add-to-cart.gif"  /></a>
 
I have onclick event
protected void ibtnAddToCart_Click(object sender, ImageClickEventArgs e)
{
     this.addCart();
}
 
Flying to basket is working, But Event is not firing , If any have solution for this situation..
Please help me..
Posted 28-Apr-13 22:39pm
v3
Comments
Tadit Dash at 29-Apr-13 11:26am
   
Please add one comment in my answer. We will talk there.
And I don't get you what exactly is the requirement. Please add one comment in my answer box explaining about it in details.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You need to return true in order to fire the code behind function.
So, the below click events should return true, instead of false.
 
Please try and let me know.
$(document).ready( function(){
	$('.addProduct').each(function(){
		var img = $("#ctl00_ContentPlaceHolder1_imgProduct");
		$(this).click(function(){
			flyToElement($(img), $('#ctl00_lbtnMyCart'));
		    return true;
		});
 
	});
	$('.removeProduct').each(function(){
		var img = $(this).closest('li').find('img:first');
		$(this).click(function(){
			flyFromElement($(img), $('#basket'));
	            return true;
		});
	});
});
Comments
Ankur\m/ at 29-Apr-13 9:06am
   
[copied from answer]
If we are putting return true. It will work. But at same time once again adding cart with same product/ quantity drop down index changing. Its not working..If you have any solution please help me....
Tadit Dash at 29-Apr-13 9:26am
   
Thanks @Ankur\m/ for notifying me. I will reply to OP.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

I find One solution for fly to basket with jQuery and ASP.net
 
I used above jQuery. But return as true. Then @ Click event
protected void ibtnAddToCart_Click(object sender, ImageClickEventArgs e)
{
  
}

I used thread.sleep(700);after this.addCart() function. Now its working fine for fly to basket animation.
 
Still i am facing one problem. i have one quantity loading drop down list, When ever this quantity drop down list changing and Click on add to cart. My fly to basket not working. If any one have any solution to this problem. Please help me...
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

I got Final Solution....Now fly to Basket is working fine at all conditions. I applied trigger to drop down list control[
<asp:postbacktrigger controlid="ddlQty" xmlns:asp="#unknown" />
] and Thread.sleep(700) after inserting to add to cart....Thanks to Mr.Tadit Dash
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Marcin Kozub 310
1 OriginalGriff 248
2 Sergey Alexandrovich Kryukov 215
3 Richard MacCutchan 202
4 Praneet Nadkar 197
0 OriginalGriff 8,048
1 Sergey Alexandrovich Kryukov 7,287
2 DamithSL 5,614
3 Manas Bhardwaj 4,986
4 Maciej Los 4,910


Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 30 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100