RQM - New Quote Button only works on Codepen

RQM - New Quote Button only works on Codepen
0

#1

hello, first time posting here since i started a couple days ago.
I think i finally need your help.

This is my Quote Machine. Very barebones still, but got it working, mostly.

On Codepen, everything works, except the twitter-share-button. It redirects but then gets blocked (something CSP).
It works in the browser though.

Second Problem is, that the newQuoteButton does not generate a new Quote when loading the page in my browser.
Only the initial random quote on start will get displayed. Nothing happens when clicking the button. But again: on codepen it works.

I tried a lot of possibilities [ click(), attr.(“onclick”, xyz), and replacing the button tag with input or a, etc] but nothing worked for me.
And i’m pretty sure you can easily point me in the right direction.

Any help much appreciated. Cheers :monkey::monkey:


#2

Using direct links to external websites on Codepen requires a small change. You just need to add target="_blank" to your anchor with id=“twitter-share-button”. This will open an new window instead of directly linking to twitter.

To answer this question, I would need to see the exact code in your project to see how you are linking the files. Can you copy and paste both the html file and the js file that works on your local machine.

You could also try exporting the Codepen code using the Export button at the bottom of the Codepen site when viewing your project in Editor View. The Export features let’s you download a zipped version of your project. Then you can compare your local code to the code Codepen generates to see what is different.


#3

First of all thanks for the reply. You already helped me quite a bit when i looked through the forum.

Here’s my html:

<head>
	<title>Let Me Inspire You!</title>
	<link rel="stylesheet" href="quoteMachine - Style.css">
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
	<script src="script.js"></script>
</head>

<body>
	<div class="grid-container">
			
			<div class="heading">Random Quote Machine</div>
			
			<div class="quote-gridpart">
				<div class="quote">
					<h1 id="quote"></h1>
					<p id="author"></p>
				</div>
				
				<div class="buttons">
					<a href="#" class="button" id="newQuoteButton">New Quote</a>
					<a class="button" id="twitter-share-button">Share</a>
				</div>
			</div>
			<div class="footer">C 2018 Raphael Mayer</div>
	</div>	
</body>

JS:

var url = "https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?";

var putQuote = function(data) {
$("#quote").text(data.quoteText);
var quot = ‘https://twitter.com/intent/tweet?text=’ + data.quoteText + ’ Author ’ + data.quoteAuthor;
if (data.quoteAuthor === ‘’) {
data.quoteAuthor = ‘Unknown’;
}
$("#author").text('Author: ’ + data.quoteAuthor);
$("#twitter-share-button").attr(“href”, quot);
};

$(document).ready(function() {
$.getJSON(url, putQuote, ‘jsonp’);

});
$("#newQuoteButton").on(“click”, function() {
$.getJSON(url, putQuote, ‘jsonp’);
});

They should be almost identical in regards to the clickevent since i just copy pasted.
It seems really weird to me, why it wouldnt just work. I thought: Easy, basic clickevent LOL.

Thanks again for you’re helpful replies. Cheers


#4

In regards to your latest reply, what exactly is the problem you are having. I tested out your Codepen and appears to be working correctly. If I am missing something specific that does not work, please let me know.