I'm dynamically loading an API url and it stops loading new data

I'm dynamically loading an API url and it stops loading new data
0

#1
<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? :frowning:


#2

  1. When you click Get Message button again, as shown on the console in my snapshot, it sometimes fetches the same quote and the html doesn’t change so it seems like it didnt get anything but it did.
  2. I think you can write a conditional for when no character is selected. It shouldn’t fetch anything but instead output a message saying you must select a character to see a quote.

Hopefully I understood the problem you stated and was able to help a bit :slight_smile:


#3

I have that condition stated. Well, kind of. If you hit Select Character it “fetches” a blank area in the filter for the API, which is the same thing. I think it was honestly a caching issue. Thank you, though!