▼
Streaming live at 10am (PST)

Refresh DIV without reloading page

#1

Hi All,

I’m searching for an easy way to reload / refresh a DIV without reloading a page.

I did a Google search and got scared away by the PHP and Ajax examples I found. I’m not a developer and I had a friend do a lot of the custom code you see on this site.

Read-only link:
https://preview.webflow.com/preview/radio-wav?preview=6d7036ff2b5afb6fb6297e556e7a4eb0

Published link:
http://radio-wav.webflow.io/

I would like to refresh div.container_radioshows every 10 minutes

#2

Something like this perhaps?

setInterval(function() {
  $('.container_radioshows').load(location.href + ' .container_radioshows');
}, 10 * 60000); // 60000 = 1 minute
#3

Thanks, @samliew.

I think that works, but I realized this is slightly more complicated than I first thought.

I also need the below function to execute every time the div (re)loads. This is the JS that determines if the collection list items inside the div should be displayed or hidden.

//show collection list item if it matches current day/time

function checkDisplayShow(item){
  var str = arrayDay[day]; //check day of week
  if(hours >= utcFrom && //check start time
     hours < utcTo && //check end time
     str == "true")
  {
    item.className = item.className += " itemDisplayBlock"; //show collection item
  }
}

Can we combine this function with the one you gave to me?

Can we add a line of code that hides the collection items if it does not match day and time (by replacing class .itemDisplayBlock with the class .itemDisplayNone)?