Refresh DIV without reloading page

Design help Custom code
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)?

4

Hey @samliew, I’m using something very similar to this in a project at the moment to reload a specific part of the page when a user submits a form (so that it displays what they have submitted)… and issue I have run into is that I have accordions in the section I am reloading. Once when the reload is triggered by the form submission the div reload (displaying the submitted content), however the accordion wrapper no longer functions. The control icon disappears and the accordion can no longer be expanded. If I then refresh the page it works again. Is there a way I can get around this?

Thanks a lot in advance!

My read only like is here: https://preview.webflow.com/preview/patient-spring-site-design?utm_medium=preview_link&utm_source=designer&utm_content=patient-spring-site-design&preview=b939599d631497cc56b097a9868d964f&pageId=5f1ae06e335f4adeb2ba37ad&itemId=5f215b1741cfc15cab3468d6&mode=preview

5

jQuery.load() is probably the easiest way to load data asynchronously using a selector, but you can also use any of the jquery ajax methods (get, post, getJSON, ajax, etc.)

Note that load allows you to use a selector to specify what piece of the loaded script you want to load, as in

$("#mydiv").load(location.href + " #mydiv");

Note that this technically does load the whole page and jquery removes everything but what you have selected, but that’s all done internally.

6

Thank you. It’s works for me.

7

You’re welcome!

8

im looking for a way to refreshing containers not entire web page automatically each 2 minutes for my news site. so this code is work for it? and how use this code?(im not a dev😵‍💫), thanks!