Help in random quotes

1

i dont understand way its dosent work :cry:

2

OK, a couple of things.

First of all, you must learn to open up your browser console. Ctrl-shft-j, or whatever the Apple equivalent is. If you look in there, you’ll see an error, that Tether is needed for Bootstrap 4. For now, just go and remove Bootstrap 4 and use Bootstrap 3 (or get the url for tether and add that in before Bootstrap.)

Now, you need to organize your code a little better. This is your JS properly indented and with a few console.log statements in there to make it clear what is happening. This is a basic debugging skill - learn how to do this.

$(document).ready(function(){
  $("#getMessage").on("click", function() {
    console.log("getMessage clicked");
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(g) { 
      console.log(g);
      var html="";
      g.forEach(function(a){
        html+="<h1>"+a.content +"</h1>";
        html+="<p>"+a.title+"</p>";});
      $(".red-cell").html(html);
    });
  });
});

When I run this, I still get no response. So, I looked in your HTML. I found this line particularly interesting:

  <button class="btn"id="getMassege" ></button>

Spelling is important. Everyone makes little spelling mistakes like this. They are frustrating. But if something should be working and it isn’t, it is one thing to check.

Then when I run it, finally the button works, and we make the AJAX call, but in the browser console we get a “mixed content” error. That’s because codepen is secured (https) and you are trying to call an unsecured (http) site. Simply change the url to https and now it works.

I went through my process of debugging it in hopes that you will pick up these skills. These are important skills.

Let me know if something wasn’t clear.

4 Likes
3

Thank you! I have been trying to figure out why my code was running. I had even downloaded a special extentsion for chrome to help me with the “Allow-Control-Allow-Origin”. Now mine is running. Thanks!

4

I recently discoverd that codepen has ‘TidyJS’ utility that will indent your code. This can be got to by clicking the arrow in the top right hand corner of the JS window.

1 Like
5

sorry for the late respons but thank you vere much!!!

6

why is it not redirecting in my case !! please help!