Hello, I have a problem with getting my generated quote onto Twitter share!
I suspect my problem is with getting the generated text onto the twitter intent URL. There’s no response when I click on the tweet button.
Here’s my link to the code pen: http://codepen.io/kelvinlimjk/pen/WomzMd?editors=1010
Thank you so much!
Your tweet button is actually an <a>
tag. Hover over it: it’s a link, not a button. tweetHandler()
never fires because the browser instead navigates to the URL magically injected by (guessing here) that <script async src="//platform.twitter.com/widgets.js" >
at the top. Just changing the anchor tag to a button fixes that problem.
<button class="twitter-share-button" id="tweetbutton">
Tweet
</button>
But there are a few other issues in your code than may prevent it from working. Let me know if you want help/hints.
1 Like
Hello Belcurv!
Thanks for replying! I have tried changing it to a button, but I think there are other issues that still prevents it from working.
I’m getting this response from the console: Is it because of how I write my Json script? I thought the encodeURIcomponent solves the problem with the URI for the commas and others.
jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.
at Function.ga.error (jquery.min.js:2)
at ga.tokenize (jquery.min.js:2)
at ga.select (jquery.min.js:2)
at Function.ga [as find] (jquery.min.js:2)
at r.fn.init.find (jquery.min.js:2)
at r.fn.init (jquery.min.js:2)
at r (jquery.min.js:2)
at HTMLButtonElement.tweetHandler (VM379 pen.js:10)
at HTMLButtonElement.dispatch (jquery.min.js:3)
at HTMLButtonElement.q.handle (jquery.min.js:3)
That error blurb points you to tweetHandler. There’s some … non-jQuery in there.
Thank you for pointing to the right direction!
I managed to solve this challenge
One last question, what is wrong with this jQuery code?
tweet($(message).text);
Good work!
First, $("something")
selects some DOM element, right? Like elsewhere, where you have:
$("#changeMessage") // selects elem with id="changeMessage"
$(".quote") // selects elem with class="quote"
$("#tweetbutton") // selects elem with id="tweetbutton"
Notice that each of the selectors is a string wrapped in quotes. If you omit the quotes, I think jquery just freaks out. If you also omit the $
and just use message
as a regular variable, the JS engine will scan the scope chain for a that variable. That variable needs to be a jQuery object in order to use the .text()
method (link):
var message = $("#msg");
tweet(message.text());
Also, .text()
is a method (function) and needs the parentheses.
You don’t have a DOM element with ID “message”, but you do have “msg”. So you could technically do:
tweet($("#msg").text());
But you already have the quote in your JS - no need to re-capture it from the DOM.
1 Like
Hi belcurv
There is an issue with the tweet function, it does not take the quote message to twiiter page. Please help me fix this bug.
//code of tweet function
function tweet(){
$('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text='+$("#quoteDisplay").text()).attr('target', '_blank');
//code of index.html
<blockquote><div id="quoteDisplay" class="quote-box" >
</div>
</blockquote>
<a class="button" href='https://twitter.com/intent/tweet?text=' onclick="tweet()" id="tweetQuote" title="Tweet this quote!" target="_blank" >
<i class="fa fa-twitter"></i>
</a>
1 Like
Hi
THanks the issue is solved !