JQuery to change the href attribute of a link tage

Question

I am trying to put together a simple proof of concept with a Pinterest PinIt button. We have a product page that displays an image of an item in one color but the user can click a button and see the same product in another color. When the button is clicked, I need to change the link in PinIt button to reflect the current color so if the user tries to Pin the item, it pins the current selected color. Below is a snippet of the code I currently have. I may have missed an escape character or two when I was removing the names and urls or our test servers. (The names have been changed to protect the innocent)

When I click the Show Black button and then click Pin It, it still shows the white image. I'm pretty new to JQuery so any help would be greatly appreciated.

JS:

$("#button").click(function () {
        var productPage = "http://myproductpage.com";
        var productImage = "http://MyproductimageBlack.jpg";
        var productDescription = "MyProduct";

        var linkValue = "http://pinterest.com/pin/create/button/?url=" + productPage + "&media=" + productImage + "&description=" + productDescription;

        $('#PinLink').attr('href', linkValue);
});

Markup:

<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fmyproductpage.com%3D524&amp;media=http%3A%2F%2myproductimagewhite.jpg&amp;description=MyProduct" id="PinLink" class="pin-it-button">
  <img src="//assets.pinterest.com/images/PinExt.png" title="Pin It!" alt="Pin It!" />
</a>

<input type="button" id="button" name="button" value="Show Black"/> 

Answer 1

$(function() {
    $("#button").on('click', function() {
        $('#PinLink')[0].href = $('#PinLink')[0].href.replace('myproductimagewhite' ,'MyproductimageBlack');
    });
});

If it's dynamic do :

$(function() {
    $(document).on('click', '#button', function() {
        $('#PinLink')[0].href = $('#PinLink')[0].href.replace('myproductimagewhite' ,'MyproductimageBlack');
    });
});

Answer 2

Your code seems right. But there may be two causes of failure:

1. #button needs a live event if it appears to dom later. If you want this then use

   $('body').on('click', '#button', function() {
     // your code
   });
   

2. You don't wrap your jquery code within $(function { }) or $(document).ready(function() {..}) i.e ready function

Answer 3

Your code seems okay. Maybe the button code is not having any effect because it is run before the button actually exists in the DOM? Try to move it to the end of the page, or enclose in in a $(document).ready(function() { // code here }) block. Also, use encodeURIComponent to encode theproductPage and productImage before adding them to the URL.

Answer 4

Try encodeURIComponent() to encode the URL.

$("#button").click(function ()
{
    var productPage = encodeURIComponent("http://myproductpage.com");
    var productImage = encodeURIComponent("http://MyproductimageBlack.jpg");
    var productDescription = encodeURIComponent("MyProduct");

    var linkValue = "http://pinterest.com/pin/create/button/?url=" + productPage + "&media=" + productImage + "&description=" + productDescription;

    $('#PinLink').attr('href', linkValue);
});