Auto-Refreshing Div with Jquery - Settimeout or Another Method

Auto-refreshing div with jQuery - setTimeout or another method?

Another modification:

function update() {
  $.get("response.php", function(data) {
    $("#some_div").html(data);
    window.setTimeout(update, 10000);
  });
}

The difference with this is that it waits 10 seconds AFTER the ajax call is one. So really the time between refreshes is 10 seconds + length of ajax call. The benefit of this is if your server takes longer than 10 seconds to respond, you don't get two (and eventually, many) simultaneous AJAX calls happening.

Also, if the server fails to respond, it won't keep trying.

I've used a similar method in the past using .ajax to handle even more complex behaviour:

function update() {
  $("#notice_div").html('Loading..'); 
  $.ajax({
    type: 'GET',
    url: 'response.php',
    timeout: 2000,
    success: function(data) {
      $("#some_div").html(data);
      $("#notice_div").html(''); 
      window.setTimeout(update, 10000);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#notice_div").html('Timeout contacting server..');
      window.setTimeout(update, 60000);
    }
}

This shows a loading message while loading (put an animated gif in there for typical "web 2.0" style). If the server times out (in this case takes longer than 2s) or any other kind of error happens, it shows an error, and it waits for 60 seconds before contacting the server again.

This can be especially beneficial when doing fast updates with a larger number of users, where you don't want everyone to suddenly cripple a lagging server with requests that are all just timing out anyways.

Auto Refresh a div using jQuery

If you wish to call the function every 5 sec, use setInterval instead.

$(document).ready(function () {
    var interval = setInterval(refresh, 5000);
});

function refresh() {
    $.get('site', function (result) {
        $('#div').html(result);
    });    
}

Also, use clearInterval(interval) to clear out the Interval.

Note : Any interval/timeout/recursive function with such case will fire regardless of whether the .get() request has returned.

Auto refresh a div HTML/jQuery

This php code has to be called from ajax:

$url = "https://bitpay.com/api/rates";

$json = file_get_contents($url);
$data = json_decode($json, true);

// $data[1] = USD
$rate          = $data[1]["rate"];
$usd_price     = 10;     # Let cost of elephant be 10$
$bitcoin_price = round($usd_price / $rate, 8);

You have to call it from your refresh function and that'd would do the work.

auto-refreshing div with jquery

You're having problems because the div's content is loaded before the hiding animation is complete. You can solve it using another callback, like this:

(This is very similar to what Mark wrote, but with anonymous functions)

$(document).ready(function(){
  setInterval(function(){
    $("#random:not(:animated)").hide("slow", function(){
        $("#random").load("inc/backchannel.php").show("slow");
    });//show callback
  } ,10000);//set interval
});//doc.ready

Auto-refresh div text

Your code is mostly correct. However, you want to make sure that you only fire the function only at DOM ready, if your code is in the header. And of course you have to include jQuery.

NOTE: If you place your code just before </body> as it is, it should work.

<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
    function doRefresh(){
        $("#show").load("LOG.txt");
    }
    $(function() {
        setInterval(doRefresh, 5000);
    });
</script>

auto refresh div / or remove the style using only javascrpit

UPDATED

Per comments, I've added a clearTimeout call and replaced the inline onclick handler with a generic addEventListener call as a recommendation.

As an additional suggestion, I'd also recommend that you replace <div class="flex-nav"> with a <nav> tag and potentially <a> with <button> for semantic markup.

---

Added a few lines of CSS and one additional line of JavaScript.

On click, add a .highlight class with a setTimeout call to remove it after a given time.

const image = document.getElementById("c4");
let timeoutID;
document.querySelectorAll(".flex-nav a").forEach(item => item.addEventListener("click", dance));

function dance() {
  image.classList.add('highlight');
  timeoutID = setTimeout(() => { 
    image.classList.remove('highlight');
    clearTimeout(timeoutID);
  }, 1000)
} 

.highlight {
  box-shadow: 0 4px 8px 0 rgba(218, 51, 119, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: dance infinite linear 0.5s;
}

@keyframes dance {
  0% {
    transform: rotate(5deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

<img src="https://picsum.photos/400/100" id="c4">

<div class="flex-nav" id="n1">
<a href="#" style="order:3">2k</a>
<a href="#" style="order:2">4k</a>
<a href="#" style="order:4">1080p</a>
<a href="#C2" style="order:1">8k</a>
</div>

---

Related Topics