CODEWITHSUNDEEP
domfetch
vdmclcv
vdmclcv

Reputation: 155

How to prevent previous data from going away before new one is fetched?

all,

I have a simple app that fetches data on button click from remote API and fills in text into HTML elements when data is fetched. The problem is that once I click button, the old data is gone and there is a delay between new data rendering and old data, during which the page looks not good.

How should I modify my code to prevent old data from going away until I am ready to write new one?



document.querySelector('#next-album').addEventListener('click', (e) => {
  e.preventDefault();
  fetch('http://localhost:3000/random')
    .then((response) => response.json())
    .then(data => {
      displayRandomAlbum(data);
      displayAlbums(data.artistAlbums, relatedArtistAlbumsContainer);
      displayAlbums(data.onThisYear, relatedYearAlbumsContainer);
    });
});

Upvotes: 0

Views: 253

Answers (1)

R44
R44

Reputation: 185

Seems like you are having problem with Postback.

Add stopPropagation to your code, like this:

...
e.preventDefault();
e.stopPropagation();
...

This is to avoid default postback behavior of button

Upvotes: 1

Related Questions