Question re: .live and updating a dynamic image

JavaScript
1

Hey,

I have a shopping cart for music that lets users sample tracks from a playlist. Each track has a ‘buy now’ button (the bold code below). The code that generates the tracks is the first section of code I will post. The goal is to dynamically replace the ‘product_image’ button in bold, for the track clicked on, with a checkmark image that we have (checkmark.png).

Below is the code that I use to generate the playlist tracks along with their individual ‘buy now’ button.



$("#jplayer_playlist ul").empty();
        for (i=0; i < myPlayList.length; i++) {
            var listItem = (i == myPlayList.length-1) ? "<li class='jplayer_playlist_item_last'>" : "<li>";
            listItem += "<a href='#' id='jplayer_playlist_item_"+i+"' tabindex='1'>"+ myPlayList[i].name +"</a> <a href='#' id='jplayer_playlist_item_"+i+"' class='playlistItem'>[B]<span id='new_image'><img src='http://www.mysite.com/images/product_buy_2_transparent.gif' BORDER='0' align='right'></span>[/B]</a></li>  ";

To capture the click of the dynamically generated playlist item, I use this:


[B]$("#jplayer_playlist ul a").live("click", function()[/B] {

When I receive word from my json response page that the item was added, I use the following code to dynamically send a message to users:



                
                  jQuery[B]("#show_update").html[/B]("<font size='2'><b>The item has been added to your cart. &nbsp; &nbsp; &nbsp; &nbsp; <a href='cart.php'>View Cart</a> &nbsp; &nbsp; <a href='checkout.php'>Checkout</a></b></font>");

I bolded the .html part to show you how I can update divs or spans to reflect a message to alert them if the product was added to the cart or if the action failed for whatever reason.

So the question is, how do I use something similiar to .html and update the span, in the first block of code that is bolded, up at the top, to change the ‘buy now’ product image with a ‘checkmark’ image?

The idea is that we can not only alert them that the product was added - but make it impossible for them to try again while making it a nicer visual experience for the user. I can update static div/span elements once the JSON response comes back after a track is clicked on. Just not the unique track that was clicked on.

Thanks.

2

Are there other jquery functions I should read up on that might provide a clue?

Thank you.

3

Inside the click function, the this keyword will be in the context of the clicked element, that being the anchor, so you can follow the show update code with:


$(this).html('Text to show instead of the link text');

or, if you want to replace the link entirely:


$(this).replaceWith('<strong>Code to replace the entire link</strong>');
4

First of all, thank you. This does work within the click function.
My one concern, though, is how to make this work after a click and after I process a json response? All of my .html functions take place during my .getJSON function.

Is it possible to validate that it was successfully added to a cart before removing the ‘buy now’ button? Most of the time it is not critical, I am just curious if it is physically possible to do so.

Maybe I could track the track id and use a conditional, such as “If track = #1, replace image”

Is that the only logical way to make that happen?

Thanks for your time. Worst case, it still looks and works great and should not be much of an issue. I’m simply curious and figure it’s worth asking as I might learn something new.

Have a good day.

5

You could use the AJAX callback to trigger the updates.

The only cause for concern there though is if the AJAX process should fail for any reason.

A standard technique to deal with that is for the scripting to presume success and to provide the on-screen update immediately (user experience, “Wow, this is fast!”) and then if AJAX does fail, to revert the update back to what it was before.

6

I have a variable, which I did not post, called track_id. It allows me to know which track Id was selected.

I’ll try to use that to manipulate the proper track, which has the checkbox, back to a ‘buy now’ button should the json show a ‘duplicate’ or ‘error’ response.

Thank you.