Problems finalising Ajax, PHP shopping cart

[simplypixie]

I am new to Ajax and have only been learning jQuery on and off for a few months so I apologise if this should be simple. I have followed a tutorial to get shopping cart functionality working using PHP, jQuery and Ajax and it is nearly there but I have a few issues that I just can't seem to work out.

1. I am using an iframe / popup effect for when items are added to the shopping cart using Fancybox and even though it appears it is very slow and it doesn't adjust to the settings I have specified.

2. Once an item is added, if any adjustments are made to the basket it redirects to the actual shopping cart page rather than reloading in the iframe.

3. I am not sure how to update the quantity and total items in the permanent shopping cart div in the sidebar of the site's pages without having to refresh the page (I have no code for this yet so looking for pointers).

When viewing the shopping cart (from a link) the iframe appears as it should and any changes made reresh in the iframe, this is the code for this part:

$(".shopping_bag").fancybox({
		'width'				: '75%',
		'height'			: '75%',
		'autoScale'			: false,
		'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'type'				: 'iframe'
	});

The problematic code is

$("form.add_to_bag").bind("submit", function() {
			var orderCode = $("input[name=order_code]", this).val();  
			var quantity = $("input[name=quantity]", this).val();
	    $.ajax({
	        type        	: "GET",
	        cache       	: false,
	        url         	: "includes/cart/cart_action.php?order_code=" + orderCode + "&quantity=" + quantity,
	        'width'				: '75%',
	        'height'			: '75%',
	        'autoScale'		: false,
	        'type'			: 'iframe',
	        data        : $(this).serializeArray(),
	        success: function(data) {
	            $.fancybox(data);
	        }
	    });
	
	    return false;
	});

I do get an error in the console when I add to the shopping basket as well:

Uncaught TypeError: Cannot call method 'width' of undefined

I hope this makes sense and sorry if this is a mess but any help would be greatly appreciated and let me know if you need any more code.

[AleMonteiro]

Hi, you are setting 'width', 'height' and others attributes to the ajax options, but they doesn't exists. The ajax method has nothing to do with the layout, it just makes an assync call.

[simplypixie]

Thank you but could you tell me how I get those attributes into the fancybox which is where they are supposed to be? i.e. in

$.fancybox(data);

Or would I do it like this

$.fancybox(data,
{
'width' : '30%',
'height' : '30%'
}
);

[AleMonteiro]

Data is the new html you want to display?

If so, I guess you can do something like this:

$(".shopping_bag").html(data).fancybox({
		'width'				: '30%',
		'height'			: '30%'
	});