Page 1 of 1

Help with Jquery ajax

Posted: Thu Jun 12, 2008 4:17 am
by timsewell
Hi

I'm taking my first, faltering steps with jQuery and I have managed to ajax-ify the print-buying part of my photography website. However, I now want to change my cart viewing page so that when a user changes the quantity of an item the subtotal relating to that item will change using ajax linked to the form elements .change event.

Problem is that the cart viewing page consists of any number of forms, one per unique item, dynamically generated by PHP, so if I target the server response to the subtotal span it will update every one. I'm sure there must be a way to dynamically alter the target span using jQuery selectors but I am having difficulty finding a clear explanation of how to do it.

Can anyone point me to a reasonably understandable learning resource which might help me?

Re: Help with Jquery ajax

Posted: Thu Jun 12, 2008 5:14 am
by Eran
There are a couple of ways to do it:
You could uniquely identify the items in the markup - for example wrapping each item with a div that has a unique id attribute. The you could find your span inside that div using selectors:

Code: Select all

 
$('span','div#' + itemId).html(subtotal); //itemId is the unique item identifier, and quantity is the updated subtotal as you described it
 
Alternatively you can traverse the DOM to find the span related to the changed quantity field. I don't know how your markup looks like but if you post it here I could offer a solution.

I have one question though - why do you use ajax to update the subtotal? this should be a simple calculation based on the item price, no? you could have the prices already available next to the items displayed (in hidden input fields), and then you could calculate immediately.

Re: Help with Jquery ajax

Posted: Thu Jun 12, 2008 5:33 am
by timsewell
Thanks - that has given me some food for thought. The reason I can't do it on the page with hidden fields is that my logic for updating the shopping cart table is held in a separate php script so the form's action calls that script, updates then returns to the view page. What I'm trying to do away with is the page refresh each time an item's quantity is updated.

Re: Help with Jquery ajax

Posted: Thu Jun 12, 2008 2:14 pm
by Eran
The best way would be to encapsulate the logic that returns the price in a function or a class, and include it in the script that shows the form. That way you could prepare the hidden inputs. It just seems better in my opinion for user experience to have the price update instantly then waiting for an ajax call to return.

Re: Help with Jquery ajax

Posted: Thu Jun 12, 2008 3:58 pm
by timsewell
Thanks pytrin.

So do you mean that I should have a javascript function using an array of prices to calculate subtotals according to quantities on the page itself, perhaps triggered .onchange, then maybe transfer the new values to the shopping cart via ajax in the background .onblur (in case the user leaves the page in a non-standard way, ie. with the back button or something), not requesting any kind of return message from the server? And I suppose I can have the current method, which is simply an 'Update' button in <noscript> tags.

I think I need to do some reading. Any recommendations?

Re: Help with Jquery ajax

Posted: Thu Jun 12, 2008 4:09 pm
by Eran
What you propose sounds about right if the shopping cart and the quantities calculations are on different pages - but you could easily have them on the same page, so why use ajax at all in this case? Most shopping carts I've seen have the quantities near the item description and the amounts all in the same page. What different pages are we talking about here?

This site is a great start for jQuery beginners - http://www.learningjquery.com/.
You should also look into the onbeforeunload event, which is triggered just before a user leaves the page (similar to how Gmail prompts you about losing changing if you try to navigate from an open message composition) - http://pro-thoughts.blogspot.com/2006/0 ... event.html

Re: Help with Jquery ajax

Posted: Thu Jun 12, 2008 4:17 pm
by timsewell
Hi

Visually the item descriptions, quantities and amounts are on the same page (this being the cart summary page, not the product page). The 'business logic', dealing with database queries etc. is held in a separate PHP script as I am attempting to only include presentation logic on browser accessible pages.

I'll certainly be looking at that site. Thanks again.

Re: Help with Jquery ajax

Posted: Mon Jul 21, 2008 9:06 pm
by cherryaa
Hope you don't mind me sticking my oar in - and thank you, pytrin, for the onbeforeunload link; that's so useful!

Re your original question, Tim: I've never ajaxed the price list in, but I do apply a lot of jQuery to dynamic data. I use php to generate a unique id with each iteration - usually something like id="price<?php echo $i; ?>" which is unimaginative but easy!.

You can also use php to generate the appropriate jQuery commands, assuming your jQuery's on a php-parsed page (or you know how to fwrite, which I don't). Otherwise you can add a matching javascript iteration to write the jQuery for each created selector.

Cherry.