0

So i have this JavaScript code that is meant to constantly recieve the output of a file in my website

$(function() {
    function reloadTable() {
        $.get("pot1.php", function(data) {
            $("#pot").html(data);
        });
    }
    reload = setInterval(reloadTable, 1000);
});

And this is the div that uses the id"pot"

<div id="pot">
    <div id="timeleft">
        <h2 class="text-primary text-center"><span class="tl1" id="tl1"><?php include('tl1.php');?></span></h2>
    </div>
    <div>
        <h1>Jackpot:
            <font color="#598749"><span class="pot1"><?php include('pot1.php');?></span></font>
        </h1>
    </div>
    <?php include('/spinfunction/raffleanim.php'); ?>
</div>

But it doesnt seem to be working for some reason, any help?

Terry
  • 48,492
  • 9
  • 72
  • 91
Strykes
  • 43
  • 5
  • Congratulations on that ? – adeneo Oct 21 '16 at 23:31
  • On Stack Overflow the point is to ask a question regarding issues you're having with code, not just show it of and tell us what you have? – adeneo Oct 21 '16 at 23:32
  • Its not working – Strykes Oct 21 '16 at 23:34
  • 1
    Neither is my sob brother in law, so what ? – adeneo Oct 21 '16 at 23:35
  • Point being, what "isn't working" specifically, have you checked the browser console for errors, if so, what did you see, have you included jQuery, does it show anything at all? "Not working" is not a very good description of a problem? – adeneo Oct 21 '16 at 23:38
  • try wrapping it around $(document).ready() – Geeky Oct 21 '16 at 23:56
  • 1
    @Geeky wrapping a function in $() has a similar effect to $(document).ready() it's just not as readable if you're not familiar with the pattern (so is generally best to avoid IMO). http://stackoverflow.com/questions/9396415/differences-between-document-ready-and-function – Brian Oct 22 '16 at 00:04
  • Thanks Brian for the reference i dint know this – Geeky Oct 22 '16 at 00:13

1 Answers1

0

Have you checked that it's not being cached by the browser?

Have you also ensured that the AJAX request isn't 404ing and is actually receiving valid data?

It looks like it'd be very "cachable" as it's a GET request and doesn't have a query string.

A few things that might prevent caching:

  • Return headers from the server to prevent caching
  • Change it to a POST request
  • Append a different query string to each request

For more info on these

Headers:

https://stackoverflow.com/a/21609642/5302749

Add these before your response:

header('Expires: Sun, 01 Jan 2014 00:00:00 GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', FALSE);
header('Pragma: no-cache');

POST request https://api.jquery.com/jquery.post/ -

Pages fetched with POST are never cached, so the cache and ifModified options in jQuery.ajaxSetup() have no effect on these requests.

Appending a different query string each time As @Barmar mentioned you can also provide cache: false as an option I believe some versions of jQuery won't allow you to pass the option directly to $.get so I've changed it to $.ajax, also error handling is always a good idea so I've added in a .fail callback.

   $(function() {
       function reloadTable(){
            $.ajax({
                url: "pot1.php",
                cache: false,
            })
            .done(function( data ) {
                $( "#pot" ).html( data );
            })
            .fail(function(jqXHR, textStatus, errorThrown){
                console.log('Error: ' + textStatus ); // error handling here
            });
       }
       reload = setInterval(reloadTable, 1000);
   });

Or manually adding a parameter (this only looks smaller as no error handling is included) - I think it's better to not reinvent the wheel and just use jQuery's built in functions where possible. 

   $(function() {
       var reloadCount = 0;
       function reloadTable(){
            reloadCount++;
            $.get("pot1.php?reloadCount=" + reloadCount, function(data) {
                $("#pot ).html(data);
            });
       }
       reload = setInterval(reloadTable, 1000);
   });
Community
  • 1
  • 1
Brian
  • 2,384
  • 13
  • 17
  • 1
    Another option is to use `$.ajax` with the `cache: false` option. It works by adding a random URL parameter like you're doing. – Barmar Oct 22 '16 at 00:32