Quote Generator tweeter-trouble with url query

I have a function that goes to the quote and grabs the value. Then I’m trying to call this function, get the return value, and add it to the end of my twitter call url, but I keep getting undefined. I’ve also tried not using a function, and just an expression. Both examples are below.

First I get the data
> var getQuote = function(){

  var text = $('#quote-text-box').html()
if (text != ""){
  return text
  }
}

//returns the quotation in a string

Then I want to add it to the rest of the string to add to the tweet box

$('.twitter-share-button').attr('href', (index, value) => { 
     //value is twitter.com
   let q = getQuote() 
   OR
   let text = $('#quote-text-box').html()

   let make_string = value + "/intent/tweet?text=" + text + q || 
  text

}

I doesn’t work. Ive gone as far as I can w/o help on this issue. I’m stuck.

Your attr function runs when the button is rendered, not when it is clicked. Is that what you want? There won’t be any quote text at that point, since your api call hasn’t come back yet.

But the api call fires on load, and the twitter button is below the call. Anyway, maybe hoisting screws it up.

Anyway, I changed some things, and now it’s working, but only on my local machine. It does not work on CodePen.

$('.twitter-share-button').click(function(e){
 let value = "https://twitter.com";
 let text = $('#quote-text-box').html()

 let make_string = value + "/intent/tweet?text=" + text
 
  $('.twitter-share-button').attr('href',make_string)

  })

This grabs the quote and puts it inside the box. But it doesn’t even work with CP. e.preventDefault() doesn’t work with CP.

Your very brief comment did help me. Any other ideas?

Have you tried setting the tweet button’s href inside getJSON? Like

getJSON(url, function(json) {
  let text = json.quoteText;

  $('twitter-button').attr('href', 'twitter.com/.../text=' + text);
})

@kevcomedia
I did try this after U suggested it. It doesn’t seem to work.

I’m not sure if it’s just codePen? Basically, on my own machine I just have a blank a and I’m adding the query to the string and somehow magically it is getting transported into the tweet.

On CP, the twitter widget is taking over and making the entire thing behave totally different. I’m not sure how to deal with this.

I think you need to add target="_blank" to your <a>.

Like exactly that piece of code? B/c that doesn’t change anything.

What do U mean in general?

It seems like I must be missing some twitter functionality.

I never used the twitter widget, but if you’re using https://twitter.com/intent/tweet?text=..., you could just use a plain <a>.

Try removing just the <script> tag for the twitter widget.

1 Like

@kevcomedia
Well I was going to say DUH!! That was the first thing I tried, way b4 posting here. I removed the widget and it broke everything.

BUT, a combination of the twitter functions inside the ajax call, and the removal of the widget, made it work!! (At least I think it does. Can U check it out?) So, in your extreme brevity, U solved my prob. Thanks!!

Although I still need to add in the proper twitter button. And make the api https.

Compared to most of the other posters my code is way simpler, so I’m confused about if I am done.

You can always style your twitter button to make it look like a “proper” one :wink:

Works for me! Just a suggestion after looking at your code: you seem to be mixing a lot of styles. You randomly use var, and randomly use let, and have a random semicolon or two, have inconsistent white-spacing, and randomly format. My suggestion is to pick a style and stick with it. Use either mostly var and let only for explicit block scoping, or only use let, and never var. Consistency can greatly improve readability of your code. (Also, codepen has a nice tidy feature on the top arrow dropdown which could do a lot of work for you!)

1 Like

I’ve tried to make the button look right but couldn’t do it. At least not as good as the widget does.

I made a work around but it’s not as good. Is there an icon for the actual tweet button? I couldn’t find one.

Pasting back and forth between the editor and CP makes the spacing terrible. And I try to use let inside functions and var outside. I changed all the inconsistencies. Don’t know if that’s proper. I was told let is limited in scope. Otherwise I’d use var for everything.

Before I submit it for final review I’ll need fix it up a bit more