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!!!
cvarick02Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Here's a fiddle that'll work for you.

http://jsfiddle.net/ChrisStanyon/RJgk4/

It assumes a couple of things. It assumes that each parent wrapper has a class of span10 (it needs to know how far up the tree to travel before heading back down to grab the post title).

I've also made use of the data property on each of your images. Assuming you can edit the html, simply add a data-social attribute to each image and the use $(this).data('social') in your jQuery
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
cvarick02Author Commented:
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!
0
Chris StanyonWebDevCommented:
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() );

:)
0
cvarick02Author Commented:
Thanks a lot Chris, that makes a lot of sense.

Also, yeah the span issue was a typo.

I appreciate the extra effort!
0
cvarick02Author Commented:
Great answer and walked me through some additional questions.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.