Get text from PHP echo and update DIV using AJAX

Question

I'm learning HTML, PHP, AJAX and jQuery in my degree. In a practise I need to refresh a DIV container every 3 seconds without recharging the whole page.

I must use AJAX to refresh and the response need to be a random number generated in the server using PHP.

I have this:

index.php

<div id="contador">NEED TO OVERWRITE THIS TEXT</div>

number.php

<?php
    echo "Number: " . rand(1,100);
?>

ajaxreload.js

function update() {
  $("#contador").load('Loading...'); 
  $.ajax({
    type: 'GET',
    url: 'number.php',
    timeout: 3000,
    success: function(data) {
      $("#contador").html(data);
      $("#contador").html(''); 
      window.setTimeout(update, 3000);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#contador").html('Timeout...');
      window.setTimeout(update, 3000);
    }
});
}
$(document).ready(function() {
    update();
});

The DIV is being updated each 3 seconds, but it isn't getting the echo response from number.php. I'm getting a very fast "Loading..." message and then "Timeout...". What is wrong? I need to use another thing instead of echo? Another type or URL data? Another AJAX function?

Thank you!

SOLVED: Thank you! Solved in the console :) The problem is that my index.php file are in the root and the number.php and ajaxreload.js in a "scripts" folder. The parameter url: 'number.php' try to load it from the div location (where index.php is) and not where script file is calling

Thank you @dan08 @Keith Chason It was the first time I use the console

What does your console say? I mean do you get the php response? Also why do you set the div and then reset it to null? — Rotimi
– Rotimi, Commented Oct 12, 2017 at 13:58
$("#contador").html(''); You're emptying the contents right after you set it. Also, if you're getting into the error handler, it would make sense to actually check what error is being reported. — Patrick Q
– Patrick Q, Commented Oct 12, 2017 at 13:58
I copy this line from other user question. But deleting this line still getting "Timeout" @PatrickQ — Javier Martin
– Javier Martin, Commented Oct 12, 2017 at 14:02
If I load this PHP file in my browser, I'm getting the answer. But I think it isn't getting the response in the AJAX script @Akintunde — Javier Martin
– Javier Martin, Commented Oct 12, 2017 at 14:03
1. Check your console (network tab) to see how the ajax request is doing (it is failing somehow). 2. Add a console.log(textStatus) in the error function to get more information about the error. Please add the results to your question. — Dan
– Dan, Commented Oct 12, 2017 at 14:03

kchason · Accepted Answer · 2017-10-12 14:09:39Z

3

I don't have an environment in which to test this right now, but my suspicion is that the window.setTimeout(update, 3000); is not what you're meaning to do.

The timeout parameter of the $.ajax function is the amount of permitted time for the request, not the interval in which it runs.

http://www.tutorialsteacher.com/jquery/jquery-ajax-method

If you're trying to have it load every 3 seconds, I'd do use the setInterval function in Javascript:

https://www.w3schools.com/jsref/met_win_setinterval.asp

function update() {
  $("#contador").load('Loading...'); 
  $.ajax({
    type: 'GET',
    url: 'number.php',
    success: function(data) {
      $("#contador").html(data);
      //$("#contador").html(''); This clears your <div>
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#contador").html('Timeout...');
      console.log('TextStatus: '+textStatus);
      console.log('ErrorThrown: ' + errorThrown);
    }
});
}
$(document).ready(function() {
    setInterval(update, 3000);
});

edited Oct 12, 2017 at 14:09

answered Oct 12, 2017 at 14:02

kchason

2,88522 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Javier Martin Over a year ago

Thank you, but I'm still getting "Timeout..." using your code

kchason Over a year ago

That might have to do with what you're retrieving. I updated my answer with debugging values so look at the console on your browser and see if you're getting anything. Also, check to see that your number.php is accessible via the web browser.

Javier Martin Over a year ago

Thank you! Solved in the console :) The problem is that my index.php file are in the root and the number.php and ajaxreload.js in a "scripts" folder. The parameter url: 'number.php' try to load it from the div location (where index.php is) and not where script file is calling

James Over a year ago

It will work using either technique, the difference being that setInterval gives a flat 3 seconds for update to run before calling it again, and setTimeout waits 3 seconds after the ajax request has resolved before calling it again.

Collectives™ on Stack Overflow

Get text from PHP echo and update DIV using AJAX

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related