Menu
Community /Pin to ProfileBookmark
@KxmodeMay 02.2019 — #You may want to look in jQuery's Ajax method. http://api.jquery.com/jquery.ajax/
In general terms Ajax through jQuery looks like this:
You can then put that inside an event selector.
You can even get fancy by adding a spinner animation while the user waits for the Ajax to finish.
jQuery frees you up from having to develop the JavaScript fundamentals so you can just do the work. 😀
Add variable text to innerHTML
Hi,
This is probably a common question, but I do not know how to ask. It is about fetching data from an api and show on a web page. The results seems to be OK in an alert message, but not presented as a list in the innerHTML.
Any clue what I am doing wrong?
TIA,
[code]
let Text = document.getElementById(“text”)
let URL = “http://127.0.0.1:8081/co”;
function getPost() {
fetch(URL)
.then(res => res.json())
.then((data) => {
data.forEach(function(co) {list += `<li>${co.company}</li>`})
alert(list) <— the list is correct in this variable
Text.innerHTML=(list) <— THE PROBLEM – will NOT show up in the page
Text.innerHTML=(“list”)<— This will show up
})
}
Edited by Sempervivum: Inserted code tags
Sign in
to post a comment3 Comments(s) ↴
0
@KxmodeMay 02.2019 — #You may want to look in jQuery's Ajax method. In general terms Ajax through jQuery looks like this:
<i>
</i>$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});
You can then put that inside an event selector.
<i>
</i>$(document).on("click", "#SubmitButton", function() {
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});
});
You can even get fancy by adding a spinner animation while the user waits for the Ajax to finish.
<i>
</i>$(document).on("click", "#SubmitButton", function() {
$(".spinner-image").show();
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$(".spinner-image").hide();
$( this ).addClass( "done" );
});
});
jQuery frees you up from having to develop the JavaScript fundamentals so you can just do the work. 😀