Response title
This is preview!
I'm fairly new to jQuery and I'm definitely a beginner (there's my warning!), but I'm sure that what I'm trying to achieve is a walk in the park for the experienced lot on here.
Basically I'm building a website (with several hundred products) that has a 'Shortlist' feature (think of it as a Shopping Cart if you like). Whenever a product is display on the website, there is an option to 'Add to Shortlist'. The backbone of this is a simple PHP script that is working perfectly; however I want to make the user experience easier and more fluid so I'm attempting to introduce some AJAX to the 'Add to Shortlist' links.
Currently the links are just standard HTML which takes the user to a PHP page which adds the Product ID to an array and then returns them straight back to where they were. For example the links are '<a href="/shortlist/add/(product_id)">'. The product_id part is PHP.
At the top right of each page is a DIV called '#shortlist_box'; this contains a very simple count of the number of items in a user's Shortlist.
What I want to happen is that the user clicks the 'Add to Shortlist' link, at which point the AJAX sends off the PHP request to add the product_id to the array etc. (as mentioned above), and then the AJAX should update the 'Add to Shortlist' link/DIV to show 'Product Added'. It also needs to 'refresh/reload' the content in #shortlist_box so that it now reflects the fact that a product was just added.
There is one caveat to this however – on any given page there could be 30 products, all of which need a link to add them to the Shortlist. So it can't just be a one-off line of Javascript that only needs to deal with one link and one "#add_to_shortlist_box" DIV.
Here's an image of an example page in case I haven't explained myself well enough!
Any help would be hugely appreciated.
1