Random quote machine tweet problem

1

Hi guys, So I am busy with the random quote machine and almost got the functionality down, but when I want to tweet, the content of the tweet just reads “undefined”. I am not sure what I am doing wrong and can’t seem to fix it… please help

$(document).ready(function(){
  
function newQuote(){
  
  var currentQuote;
  var author;
  
  $.ajaxSetup ({cache:false});
  
    $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=", function(data) {
    var currentQuote = data[0].content;
    var author =data[0].title;

     $("#text-1").html(currentQuote).hide().fadeIn(1000);
     $("#text-2").html("-" + author).hide().fadeIn(1000);    
    }); 

    $("#tweet").on("click",function(event) {
      window.open("https://twitter.com/intent/tweet?text="+currentQuote);
    });
};
  
  
     
  $("#get-quote").on("click", function() {
    newQuote();
  }); 
});

the link to the codepen : https://codepen.io/WynandT/pen/xXpRBZ?editors=1010

2

You can make a twitterUrl variable before the newQuote function, then set its value after you receive a quote.

$(document).ready(function() {
  var twitterUrl;

  function getQuote() {
    // ...
    $.getJSON('...', function(data) {
      currentQuote = data[0].content;
      twitterUrl = 'https://twitter.com/intent/tweet?text=' + currentQuote;
    });
  }

  $('#tweet').on('click', function(event) {
    window.open(twitterUrl);
  });
})

Do not set the click handler inside the newQuote function. Otherwise, when you get a new quote, a new event handler will be bound the the tweet button, and it’ll result in opening a lot of new tabs as you get new quotes.

data[0].content also contains HTML elements (which kind of sucks), so they’ll appear in the twitter window.

3

Thank you, I tried this now, but now when I click the tweet button all I get is a new blank tab that opens. Any Idea why this might be happening?

$(document).ready(function() { 
  
  var twitterUrl;
  
function newQuote(){
  
  $.ajaxSetup ({cache:false});
  
    $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=", function(data) {
    currentQuote = data[0].content;
    author =data[0].title;

     $("#text-1").html(currentQuote).hide().fadeIn(1000);
     $("#text-2").html("-" + author).hide().fadeIn(1000); 
      
      twitterUrl = "https://twitter.com/intent/tweet?text="+currentQuote;
    });
};
  
   $("#tweet").on("click",function(event) {
      window.open(twitterUrl);
    });

     
     
  $("#get-quote").on("click", function() {
    newQuote();
  }); 
  
  
});
4

I’m seeing a twitter form though :confused:. Maybe you can try in a different browser? I’m not sure why you get a blank tab tbh.

You might also want to use encodeURIComponent(currentQuote) instead of just currentQuote when setting the twitterUrl, or the quote’s gonna get cut off in the form when it has characters like semicolons in them.

5

window.open("https://twitter.com/intent/tweet?text=" + $("#quote").html());

This is how i did mine.

window.open("https://twitter.com/intent/tweet?text="

Opens twitter to tweet text

+ $("#quote").html());

This is where i had my quote on my html. It was a p text with a id of quote. So i called it using $("#quote").html(). Then i added it to my tweet by using + (hint the text=").

6

Yes! I tried it with encodeURIComponent, and it seems to be working fine now, except for the random html elements in the tweet, but I can live with that!

Thank you so much!

7

Thank you! will keep this method in mind for future reference

8

So, I got to the point where you are as well, I guess…

I was getting a blank page, undefined or [object Object] in the twitter window. Now I get the html tags <p>Quote so and so…</p>, and & # 8 2 1 6 ;(not sure how to escape this, therefore space) for special characters (" in this case).

I than checked the JS code directly from quotesondesign.com’s twitter link and created a Frankenstein :stuck_out_tongue: with my previous code:

Now the html tags are gone, BUT whenever there is a character such as a semicolon “;”, the tweeted message stops right before it. It gets chopped off.

I than checked quotesondesign.com and their tweets are also getting chopped off when there is a semicolon (probably happens with other characters as well).

Not sure how to proceed now. Is there any way I can display the quotes/text without html tags on my first linked pen? At least it will not get chopped off.

9

That is something I would also wish to know!.. mine still tweets with the html tags and all. I was so frustrated with that challenge and I couldn’t be bothered by the html tags, so I just submitted and went to the next challenge!

10

Fix semicolons and other special characters with encodeURIComponent().

Example:

var quote = '"To be or not to be; that is the question" — Hamlet';
var url = 'https://twitter.com/intent/tweet?text=' 
  + encodeURIComponent(quote);

>>> "https://twitter.com/intent/tweet?text=%22To%20be%20or%20not%20to%20be%3B%20that%20is%20the%20question%22%20%E2%80%94%20Hamlet"

Twitter then decodes the URI-encoded string (using decodeURIComponent() or similar) to display the text, so you get back the original quote.

JavaScript doesn’t natively support converting HTML, but it does support doing stuff with DOM nodes (in fact, that’s one of its main strengths). And DOM nodes contain HTML.

So you can get around it by doing something like this (jQuery):

var quote = '<strong>To be</strong> or <em>not to be</em>';
var myDiv = $('<div>');
myDiv.html(quote);
var quoteWithHtmlRemoved = myDiv.text();

>>> "To be or not to be"

or this (vanilla JS):

var quote = '<strong>To be</strong> or <em>not to be</em>';
var myDiv = document.createElement('div');
myDiv.innerHTML = quote;
var quoteWithHtmlRemoved = myDiv.textContent;

>>> "To be or not to be"
2 Likes
11

I went to tweet and got this

<p>The grid system is an aid, not a guarantee.  </p>
-Josef Muller-Brockmann

You can fix this by using the window.open() technique i shared earlier.

2 Likes