asked on

Assigning the post title of a blog to variable with .click

Hi,

I want to add tracking to the homepage of a blog so when the tweet button is clicked on that homepage it collects the title of that blog post tweeted and sends an event to Google Analytics. I know how do it with Google Analytics but having trouble fetching the name of the post it is clicked on.

Desired Output

I would like to just have it alert() me with the type of image it is and the post in which it was clicked on.

Example: facebook TEST post 123 or twitter TEST post 456 or one of the other variations

Here is a JSFiddle I was testing this in. I get 3 alerts the first one has the right social network but has the wrong h2, it says [Object object] and the 2nd and 3rd notification has facebook listed as the social network even if i click on twitter.

Here is the jquery code I was trying

$(".span10, .social, img").click(function() {
    var socialNet = $(this).attr("src");
    var postTitle = $(this).closest("h2");
    if (socialNet === "/wp-content/themes/bootstrap/assets/img/twitter-hover.jpg") {
        alert("twitter" + postTitle);
    }
    else {
        alert("facebook" + postTitle);
    }
});

Open in new window

Here is the example HTML

<div class="span10">
    <div class="post-date">August 30, 2013</div>
    <div class="post-title">
         <h2><a href="http://www.domain.com/news/test">TEST post 123</a></h2>

    </div>
    <div class="post-content excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit tortor quis sem elementum molestie. </p>
    </div>
    <div class="social">
        <p class="learn-more"> <a href="http://www.domain.com/news/test">Learn More</a>

        </p>
        <p class="share"></p>
        <p>Share:</p>
        <!-- TWITTER -->
        <!--<a href="//javascript twitter share code;"> -->
        <img src="/wp-content/themes/bootstrap/assets/img/twitter-hover.jpg">
        </a>
        <!-- FACEBOOK -->
        <!--<a style="cursor:pointer" onclick="javascript facebook share code">-->
        <img src="/wp-content/themes/bootstrap/assets/img/facebook-hover.jpg"></a>
    </div>
</div>

<div class="span12">
    <div class="post-date">August 28, 2013</div>
    <div class="post-title">
         <h2><a href="http://www.domain.com/news/test2">TEST post 456</a></h2>

    </div>
    <div class="post-content excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit tortor quis sem elementum molestie. </p>
    </div>
    <div class="social">
        <p class="learn-more"> <a href="http://www.domain.com/news/test2">Learn More</a>

        </p>
        <p class="share"></p>
        <p>Share:</p>
        <!--<a href="//javascript twitter share code;">-->
        <img src="/wp-content/themes/bootstrap/assets/img/twitter-hover.jpg">

        <!--<a style="cursor:pointer" onclick="javascript facebook share code">-->
        <img src="/wp-content/themes/bootstrap/assets/img/facebook-hover.jpg"></a>
    </div>
</div>

Open in new window

Please let me know if you have any other questions about the problem or need me to clarify something.

THANK YOU!!!

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cvarick02

ASKER

Thanks a lot! I made one change since I can't change any of the HTML. This is working now but do you see any problems that I might be missing? (Code is below)

Also, as you can see I am kinda new with jQuery so I got one more question that I would like to add to my notes. Why didn't you use .closest()? By the documentation I thought that would be perfect for this which is why I was surprised and came here when it didnt work. Is .closest() used for traversing the dom in a different way?

var socialNet;
var postTitle;
$(".span10 img").click(function () {
    if ($(this).attr("src") === "/wp-content/themes/bootstrap/assets/img/twitter-hover.jpg") {
        socialNet = "twitter";
    }
    else {
        socialNet = "facebook";
    }
    postTitle = $(this).parents('.span10').find('.post-title h2 a').text();
    alert(socialNet + " | " + postTitle);
    });

Open in new window

Thanks again Chris I really appreciate it!

Chris Stanyon

The closest() function will find the closest ancestor that matches your selector. As you're clicking on the img, it only has 2 ancestors - .social and .span10. I could have used closest in the same way I used parents() though:

var postTitle = $(this).closest('.span10').find('.post-title h2 a').text();

The only potential issue I see in your code is the hard coding of the src value. If image names or locations change you'll need to revisit your jQuery code. One other thing - don't know if this is a typo or not, but in your HTML above, your wrappers have different classes - span10 and span12 - if that really is the case you're going to struggle using $(".span10 img").click()

One final note. When you do this:

var postTitle = $(this).closest("h2");

postTitle becomes a jQuery object, not the text, so you can't just echo it or alert it. You'd need to do:

alert ( postTitle.text() );

:)

cvarick02

ASKER

Thanks a lot Chris, that makes a lot of sense.

Also, yeah the span issue was a typo.

I appreciate the extra effort!

cvarick02

ASKER

Great answer and walked me through some additional questions.