Problems with Random Quote Generator

1

I’m again having some problems with my Random Quote Generator. I changed my HTML,CSS and JS so please tell me where the error is . When I click on the button I get the following error in the console : “XMLHttpRequest cannot load http://quotes.stormconsultancy.co.uk/random.json. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.”

Here is my HTML:

<!DOCTYPE html>

<html>
<head>

<title>Random Quote Generator</title>
<!-- To ensure compatability with various devices !-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<!-- Including Amatic Google Font -->
<link href='http://fonts.googleapis.com/css?family=Poiret One' rel='stylesheet'>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Various stylesheets used -->
<link rel="stylesheet" href=main.css>
<!-- font-awesome for the heart !-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
</head>

<body>

<div class="text-heading text-center container">
Random Quote Generator
</div>

<div class='quote-box' id='qt-box'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id='author-box'>
Hello
</div>

<br>
<br>

<div class="btn">
<a href="#" id="button">Generate New Quote</a>
</div>


<footer class="footer-text" id="footer">
<div>
Made with <i class="fa fa-heart" aria-hidden='true'></i> by Rahul Baboota
</div>
</footer>





<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Including main.js -->
<script src='main1.js'></script>

</body>

And my JS

//Function which gets the random quotes

var getQuote = function()
{
$.ajax({

	url:'http://quotes.stormconsultancy.co.uk/random.json',
	datatype: 'jsonp',
	type: 'GET',

	//If the request is succesful!!
	success: function(data)
	{	
		// Adding the quote in the quote box
		$('#qt-box').html(data.quote);

		// Adding the author name
		if (data.author != '')
		{
			$('#author-box').html(data.author);
		}
		else
		{
			$('#author-box').html('Unknown');
		}
	},

	error: function()
	{
		$('#qt-box').html("There was a problem with the API request");
	}
});
};

//Document Ready Function

$(document).ready(function()
{
$('#button').on('click', function(){
	getQuote();
})
});
2

Its a well know issue called CORS or Cross-origin resource sharing. I believe many of us have solved the issue by moving from JSON to JSONP.

Search this website and you will find a lot of questions and answers to the problem. Google will turn up tons of materials, but I think searching here will serve you better.

3

I cant seem to find the solution on this forum. And my datatype is jsonp itself.

4

Try changing datatype: ‘jsonp’ to dataType: ‘jsonp’

article

5

I did that but now it gives me an error:
random.json?jsonp=jQuery1113058…1465933871722&=1465933871723:1 Uncaught SyntaxError: Unexpected token :

6

Well it says its a Syntax error, and that it didn’t like the full colon : in the request string.

I tried your string directly in a browser and that works fine:

http://quotes.stormconsultancy.co.uk/random.json?dataType='jsonp'&type='GET'

gives back:

{“author”:“Phil Karlton”,“id”:43,“quote”:“There are only two hard things in Computer Science: cache invalidation, naming things and off-by-one errors.”,“permalink”:“http://quotes.stormconsultancy.co.uk/quotes/43”}

So I don’t know.

Try to track down where the : is getting put in the string…

7

IIRC, passing jsonp as datatype is alright, but you also need to add ?callback=? in the query url.

jQuery Ajax notes on jsonp says this :

“jsonp”: Loads in a JSON block using JSONP. Adds an extra “?callback=?” to the end of your URL to specify the callback. Disables caching by appending a query string parameter, “_=[TIMESTAMP]”, to the URL unless the cache option is set to true.

8

Not positive but I remember reading jQuery Ajax makes up a random callback and adds it automatically.

Using XHR you do need to manually add in the callback when you use JSONP, and thats the way I have been doing my projects, but Ajax I think is different.

Feel free to correct me if I am ‘out-to-lunch’ on this…

9

I had the same problem too and fixed it using a proxy.

I am using a proxy, so I changed the URL from “http://quotes.stormconsultancy.co.uk/random.json” to “https://jsonp.afeld.me/?url=http://quotes.stormconsultancy.co.uk/random.json”

i.e. essentially, now my request is going to “jsop.afeld.me” with my original url as a get request parameter.

https://jsop.afeld.me seems to be some sort of proxy server (don’t really understand how it is doing its magic)