How to filter out <p> from ajax imported data in the random quote

1


this is my project and when I try to post to twitter it posts with <p> tags, what’s the simplest way to filter them out?

2

Yeah, I hate when they send html in the string. A quick and dirty solution that would work for simple tags would be some regex, like: myString=myString.replace(/<\/?[^>]+(>|$)/g, "")

Looking really quick at your code, I notice that you have that ajax call written out twice. You could wrap that in a function so you only have to write it out once.

4

please check my codepen now, I’ve tried to load the event both on load and on click from one source but I’m unable to do so, can you please show an example

5

You’re just not getting how to modularize things into functions. I don’t want to write it out for you, but this is a basic schema:

$(document).ready(function() {


  // this is just a function declaration,
  // it won't run until you call it.
  function newQuote() { 
    $.ajax({
      url: MY_URL,
      success: function(response) {
        // in here, you process the response and send it to the screen
      } 
    });
  }


  // this tells JS what to do if the quote button is clicked
  $("#getquote").click(function() {
    // in here you should call your newQuote() function
  });


  // this tells JS what to do if the twitter button is clicked
  $("#twitter").click(function() {
    // in here you should do your tweet thing
  });
  

  // so far, all your code has done is set things up
  // it hasn't done anything
  // now you run the function to load the first quote
  // the click handlers (above) will fire if a button is pressed
  
  newQuote();

});

This way all your “getting the quote and putting it on the screen” is put into a container (a function) and you only have to write it once. Then you call that function whenever you need that task done.

And your click handlers ($("#getquote").click(function() for example) should be outside that function, just in the main part of the code. Remember that these don’t do anything. They are just telling JS what to do if that button is fired.

Also, your code

$("body").css("background-color", "#eee");

should be in your CSS as

body {
  background-color: #eee;
}

What you did works, but it is really CSS. You are using JS to change the CSS. There is nothing wrong with that if you have a good reason (like if I wanted JS to calculate different BG colors or change it while the code is running) but it is a little odd to do it just to assign a static BG color.

I don’t want to just give you the code and deprive you of the learning, but let me know if something wasn’t clear.

6

ok that’s clear now and I fixed it, thanks a ton, but I also noticed one thing:

when i get quotes like this

“Talent hits a target no one else can hit; Genius hits a target no one else can see.”

twitter only posts it to the word hit then considers the ; end of statement, how to change this?

7

That’s a good catch.

Certain charecters don’t do well in urls. Whenever you you put an untested string to a url, it’s a good idea to wrap it in encodeURI(), as in:

        $("#twitter").attr(
          "href", "https://twitter.com/intent/tweet?text=" +
          encodeURI($("#quote").text()+" -"+$("#author").text())
        );

However, encodeURI doesn’t seem to encode all the characters (including semicolons) - some of them are valid URL chars, just with special meanings. I think to get it to encode all the chars, you need encodeURIComponent(). This should only be used on non-URL information (like we are here), not on an actual URL. Here we are using it to convert the quote to something URL safe. But you wouldn’t want to wrap it around a normal URL because you might loose some important chars.