<div class="container-fluid">
<div class="row text-center gotTitle"><h2>Game of Thrones Quotes</h2></div>
<div class="row text-center">
<div id="generated" class="col-xs-12 well message">Which character would you like?</div>
</div>
<div class="row text-center">
<div class="col-xs-12">
<select id="charSel">
<option value="">Select Character</option>
<option value="bronn">Bronn</option>
<option value="brynden">Brynden Tully</option>
<option value="cersei">Cersei Lannister</option>
<option value="hound">The Hound</option>
<option value="jaime">Jaime Lannister</option>
<option value="littlefinger">Littlefinger</option>
<option value="olenna">Olenna Tyrell</option>
<option value="renly">Renly Baratheon</option>
<option value="tyrion">Tyrion Lannister</option>
<option value="varys">Varys</option>
</select><br />
<button id="getMessage" class="btn btn-primary">Get Message</button>
</div>
</div>
</div>
$(document).ready(function() {
let state = { currentPerson: ' ' };
$('#charSel').change(getCharSel);
function getCharSel(e) { state.currentPerson = e.target.value; }
$("#getMessage").on("click", function() {
$.getJSON("https://got-quotes.herokuapp.com/quotes?char=" + state.currentPerson, function(json) {
var startBlock = "<blockquote><p>";
var midBlock = "</p><footer>";
var endBlock = "</footer></blockquote>";
$(".message").html(startBlock + json.quote + midBlock + json.character + endBlock);
var startTweet = '<a href="https://twitter.com/intent/tweet?text=' + json.quote + " - " + json.character + '" target="_blank"> Tweet This </a>';
$("#tweetButton").append(startTweet);
});
});
});
I have no additional CSS (beyond Bootstrap). I’m using CodePen. Whenever I load the page, it pulls from the url. Whenever you select a character, it applies a filter to the url, HOWEVER it doesn’t pull new data whenever I click Get Message
again. It fetches for a new quote, I used the Inspect element on Chrome, but nothing new shows up. Whenever no character is selected, it’ll pull new quotes all day long. Please, someone, anyone, help?