How to implement reloading the page without ACTUALLY reloading the page?

How to implement reloading the page without ACTUALLY reloading the page?
0.0 0

#1

https://gist.github.com/sekoku/501f5713046cbb5f927b3bbd11b5900a

This is what I have so far. Ignoring that CSS isn’t doing anything, I’ve gotten the API I’ve chosen to “stringify” and output as text. That’s one step down and hurrah.

But the problem I’m running into and not sure how to go about is reloading the page without ACTUALLY reloading the page and just having the API be called to output another quote?

Using location.reload would refresh the entire page, wouldn’t it? But using it with .html as a Jquery doesn’t work because Jquery won’t allow <a> anchors to be HTML’ized (unless I’m doing it wrong?)

And I’m not really sure how to strip the quotes off the object’s return, since they’re a part of the JSON.

I don’t see anything on Google about this particular problem, so: Where am I going wrong? I think I may have just made this wayyy more complicated than it should while chasing the implementation of getting the API to even output?


#2

Hey, if you wrap your JSON call in a function, you can simply call that function multiple times (e.g. on button being clicked)


#3

You mean a the JOSN argument function within another function for the sake of calling that function that the JSON’s function is in to reload it?

I dunno why I didn’t think of that, but I’ll try it out.


#4

Did you check the example project before starting? You can check it out as long as you don’t look at the code.


#5

You can use .html method for displaying links like this:

var one = '<a href="' + response.data + '">Some Text</a>';

$('#someDiv').html(one);

#6

I guess I’ve been doing it wrong. For me I was trying with:

$('targetID').html('<a href="https://link.goes.here">Stuff here</a>' but apparently mixing '' and "" together has Javascript and JQuery go insane. :confused:


#7

I have to be thinking about this wrong? I’ve been thinking about this for two weeks or so and I can’t seem to figure it out:

$(document).ready(function(button.onclick){ $.getJSON("http://quotes.stormconsultancy.co.uk/random.json" + "?callback=?", function(json){ $(".quote-class").html(JSON.stringify(json.quote)); $(".author").html(JSON.stringify(json.author)); $(".permalink").html(JSON.stringify(json.permalink)); }); });

This is the rewritten code. To me it makes sense in a “on page ready: Load this function.” So my placeholder values will be there before the button is clicked. Yet <div class="target1"><button>Get Another Quote?</button></div> when used won’t apparently load the function?

I’m assuming because button.onclick isn’t valid as a function argument?


#8

Just putting button.onclick in there as parameter doesn’t work. You should do it like this:

$(document).ready(function(){
function fixQuote(){
$.getJSON("http://quotes.stormconsultancy.co.uk/random.json" + "?callback=?", function(json){
$(".quote-class").html(JSON.stringify(json.quote));
$(".author").html(JSON.stringify(json.author));
$(".permalink").html(JSON.stringify(json.permalink));
});
}

$("#idOfButton").on("click", fixQuote);

});

#9

I gotta be confusing my JS and Jquery then. Because isn’t onclick a valid form of triggering the function? Jquery doesn’t have it, but it’s a form of Javascript that is able to be put into “<button onclick=“function”>” as a style?


#10

You can do this <button onclick="functionName">, and also in your JS: button.click(function(){});. But what you did was adding button.onclick as a parameter to the function which is simply not the correct syntax.


#11

What’s the difference with my initial method (outside it taking json as an argument and loading the quotes instantly before setting it to reload) and your method?

What I’m seeing is that “when the the document is ready be ready to call this function.” Which is fine. But I need to get the quotes first, which pulls before the function.

$.getJSON("http://quotes.stormconsultancy.co.uk/random.json" + "?callback=?" /*Callback's required to get the API to be used on our page. Why, I duno. Just how it is.*/, function(json) { //console.log(json); //Sanity Check to see if the JavaScriptObjectNotation ApplicationProgrammingInterface is being loaded Use CSS to move these around? $(".quote-class").html(JSON.stringify(json.quote)); $(".author").html(JSON.stringify(json.author)); $(".permalink").html('

From ' + JSON.stringify(json.permalink) + '

'); //Okay, we can HTML-ize JQuery with this line. Can I make it a clickable link? IDK. } );

From the way I’m reading it: “BEFORE the document is ready, go call this URL and pull a random JSON object from it we can use (it’s set to random so we don’t have to code it ourself) then stringify it” which runs into an issue of pulling the “”'s out of the object since those are included with the property(?) descriptions.

If I want to reload the page, I need something like…

function getNewQuote (json) { //API and parsing the API here }

Right? I’m trying to understand how to put my method with your method. I mean there’s a method of doing this in JS with HTTP GET’s that FCC never explained, which I don’t quite get from reading about it. So I figure they want us to use JQuery but I’m not totally understanding Jquery and it’s implementation of this HTTP GET request since the whole $('"thisIsWhatIWantYouToManipulate").doThis("manipulationHere") throws me.


#12

Hey, do you have a codepen? First, I don’t think you should use JSON.stringify on json.quote (and the others).

So do you get a response back (sanity check :slight_smile:)?

You are correct that you want to have a function that does this. So what you could do:

function getNewQuote(){
  $.getJSON(.... whatever you already have ....);
}

$("#refreshButton").on("click", getNewQuote);

getNewQuote(); // will run once the pageis loaded

#13

Nah, last time I tried using CodePen instead of an editor it was a huge pain getting Font Awesome to load because it hides the library calls behind options and doesn’t include them in the code so I’m trying to do this before jamming everything into CodePen to submit.

I guess I forgot about the function call. I can just use your method and then stringify the properties to get the quotes. That just leaves making the quote ID a hyper-text/link and removing the quotes from the properties.


#14

Yes, codepen can be quite annoying. You can easily make a link by doing something like this:

$("#whereLinkShouldBePlaced").html("<a href='" + json.permalink + "'>Click me!</a>");

No idea what you mean by removing the quotes from the properties.


#15

What it’s returning:

"There are two ways of constructing a software design; one way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult." "C. A. R. Hoare"

What I want it to return:

There are two ways of constructing a software design; one way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.
C. A. R. Hoare

Thereby I can stylize the “”'s for the quote and not have the writer be included with quotes since the JSON properties include the quotes as a way of containing the property for the method.


#16

Isn’t that due to JSON.stringify()? If you remove the JSON.stringify, what happens?


#17

Okay. stringify just literally turns it into a string. Keeping .html will return the property without the “”'s and I can just manipulate that with CSS and maybe ' \"' + json.property + '\"' as the method.


#18

That worked. Okay, I’m getting somewhere now. Problem for me is figuring out why a button after a <br /> isn’t possible?

<div class="permalink">This should show the quote's link<br /><button>test button to be in-division</button> <button id="idOfButton">Get Another Quote?</button></div>

Doesn’t have the test button to be in-division show up? The FCC tutorial lets me <button>Text</button><button>Text2</button> but doesn’t clue me in on if I’m doing anything wrong?

Is there anyway to check where the HTML may be invalid? Because Brackets is telling me my stuff is okay AFAIK and I’m not sure why a second button wouldn’t render.