Jquery not updating href attr (random quote generator project)

JavaScript
#1

So I am attempting to do the part about tweeting out the quote that is generated. I have the twitter button present and to start with it has a default href of: href=“https://twitter.com/intent/tweet?text=Hello%20world” just for testing.

When clicking the tweet button it opens another window with a tweet that has exactly what you would expect.

What I have done is created a jquery to hopefully update that href to instead of saying “hello world” in the tweet, to have the quote string.

The problem is that it is not updating.

Here is my jquery line:
$(".twitter-share-button").prop(“href”, newlink);

I have also tried:
$(".twitter-share-button").attr(“href”, newlink);
$("#twittershare").attr(“href”, newlink); (using the anchor link’s id attribute instead of the class)

I also tried to use replaceWith and I couldn’t figure that out either.

Still not having any luck… I click it after updating the quote and it still has the “hello world” in the pre-made tweet.

here is my codepen: https://codepen.io/travyy/pen/qYpXGQ

and yes I have a window alert. That was just to make sure that I have the correct link in the javascript variable which it seems that I do.

I assume its either something with the twitter button I am using or maybe you cant update href attr after the page is loaded or something weird like that… any ideas?

#2

Hey @Travyy think you don’t need to use encodeUri, you can concatenation me the url + quote string

#3

@Lawyerscode I think I read somewhere on the twitter pages that it needed to be formatted like that. I took the link that pops up after you hit new quote and put it into browser and it gives the right link with the right pre-filled text. And I think even if that was the case, it would still get rid of the hello world text, no?

#5

another solution a friend suggested me was to use an onclick for the link and to call a function to build the link that I need except the only issue with that is the value I need for the link uses a random number generated in the already existing function so I don’t see a way to get that same random value out of that function to use in a new different onclick function.

#6

If you click your ‘new quote’ button, it is doing what it should be with the twitter button, hopefully that should help you resolve.

I am no good with jQuery, I have used on JS to resolve the issue. This is how I did it. Not sure if it is good or bad, but it works

function tweetQuote(){
  var tweetUrl = "";
  var quote = generateQuote().quote;
  var author = generateQuote().author;
  var finalUrl = window.open("https://twitter.com/intent/tweet?text= "+ quote + "." + " ~ " + author, 'Tweet Quote');   
}
#7

The probleme is this code:

window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));
1 Like
#8

Yeah I commented that out and that did fix it. Weird. That was what the twitter page told me to use to bring in the function that creates the little blue “tweet” button. Its supposed to detect the class=“twitter-share-button” and make the link into a button. Because now the link isn’t a button its just a link. That’s odd.

#9

You can add boostrap button classes to you link

<a class="btn btn-primary" href="#" role="button">Link</a>
1 Like
#10

yep I just did that. I just liked the little twitter icon being there :confused::joy:

#11

It’s possible with Fontawesome icon https://fontawesome.com/icons/twitter?style=brands

1 Like
#12

oh that’s really cool. I got that to work, it looks great now! Thank you :slight_smile:

1 Like
#13

You’re welcome and keep going

#14