Execute PHP without page refresh

tessthepup · February 1, 2020, 7:24pm

Good Evening I am back again

I have been researching how to run a seperate php script without reloading the page and also display a spinner in the foreground whilst the script is running.

I have tried a few examples from google searches but for the life of me can not get the code to work.

Does anyone have any tried and tested code they would care to share?

Thanks

Strider64 · February 1, 2020, 10:15pm

Unless you are really crunching numbers, I don’t see you needing a spinner with today’s high bandwidth? I pull in data for my trivia game -> Vanilla Javascript Trivia

I have a Github repository of my scripts and php -> Trivia Repo

I wouldn’t search Google, I would search Github as I pretty positive that you will find what your need.

tessthepup · February 2, 2020, 10:18am

I found this on Github after a bit of digging and first thoughts were that would suit my needs but alas it does not work and does not execute the file correctly or at all as nothing is loaded into the database after an age of waiting.

loading-with-ajax

I have modified the code slightly to suit my page

echo '<form method="get">'; echo ' <pre>'; echo ' <input type="button" id="load" value="show"></pre>'; echo ' <center> <h1 id="content"></h1></center>'; echo ' </form>';

and then before the </body> tag I have

<script>
$('#load').click(function (){

// Adding loading GIF
 $('#content').html('<img id="loader-img" alt="" src="https://media1.tenor.com/images/8ac12962c05648c55ca85771f4a69b2d/tenor.gif?itemid=9212724" width="50" height="50" align="center" />');

 // Ajax Request
 $.ajax({
 type: "GET",
 data: "no data here XD",
 url: "import.php",
  success: function (data)
  {
 // This replace the retrieved data to the div after the setTimeOut function
      setTimeout(function ()
      {
        $('#content').html(data);
      }, 3000);
  }
    });
});
    </script>

Any clues as to where I am going wrong?

Thanks

phdr · February 2, 2020, 10:51am

The order of the code you found cannot be changed, since it is not waiting for the document to be ready before attaching the click event to the form field.

To make the code work with that piece of javascript moved, you need to add a document ready test around it - https://learn.jquery.com/using-jquery-core/document-ready/

tessthepup · February 2, 2020, 11:47am

do you mean like this?

<script>
$( document ).ready(function() {

$('#load').click(function (){

// Adding loading GIF
 $('#content').html('<img id="loader-img" alt="" src="https://media1.tenor.com/images/8ac12962c05648c55ca85771f4a69b2d/tenor.gif?itemid=9212724" width="50" height="50" align="center" />');

 // Ajax Request
 $.ajax({
 type: "GET",
 data: "no data here XD",
 url: "import.php",
  success: function (data)
  {
 // This replace the retrieved data to the div after the setTimeOut function
      setTimeout(function ()
      {
        $('#content').html(data);
      }, 3000);
  }
    });
});

});

</script>

tessthepup · February 2, 2020, 2:00pm

ok this code works and gives a satisfactory result

<script type="text/javascript">
      function refreshData(){
      var display = document.getElementById("content");
      var xmlhttp = new XMLHttpRequest();      xmlhttp.open("GET", "import.php");
      xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xmlhttp.send();      xmlhttp.onreadystatechange = function() {
      location.reload();

        if (this.readyState === 4 && this.status === 200) {
          display.innerHTML = this.responseText;
        } else {
          display.innerHTML = "Loading...";
        };
      }
    }  
</script>