SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Mar 2002
    Posts
    608
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question re: .live and updating a dynamic image

    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.

    Code:
    $("#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'><span id='new_image'><img src='http://www.mysite.com/images/product_buy_2_transparent.gif' BORDER='0' align='right'></span></a></li>  ";
    To capture the click of the dynamically generated playlist item, I use this:

    Code:
    $("#jplayer_playlist ul a").live("click", function() {
    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:


    Code:
                    
                      jQuery("#show_update").html("<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. #2
    SitePoint Guru
    Join Date
    Mar 2002
    Posts
    608
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are there other jquery functions I should read up on that might provide a clue?

    Thank you.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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:

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

    or, if you want to replace the link entirely:

    Code javascript:
    $(this).replaceWith('<strong>Code to replace the entire link</strong>');
    Last edited by paul_wilkins; Dec 12, 2010 at 14:57.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Guru
    Join Date
    Mar 2002
    Posts
    608
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jbh View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru
    Join Date
    Mar 2002
    Posts
    608
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •