CODEWITHSUNDEEP
phpjqueryajax
Monir Khan
Monir Khan

Reputation: 19

how to load data without page refresh using ajax

Here is my code for loading data 

$(document).ready(function() {         
    $.get('get-answers.php', { 
        project_question_id: <?=$project_question_id?>,
        project_id: <?=$project_id?>
    }, function(data) {
        $('#dispaly-answers').append(data);
    });  
});

This code retrieves data from database and working fine. But problem here is that if I add new data on the database, this data doesn't show up without page refresh. So I don’t want to refresh the page to get the data. It should be displayed once new data added to database. Any suggestions on this issue? P.S : I also tried .ajax(), didn’t work.

Here is my $.ajax() request $(document).ready(function() {

 $.ajax( {
type: "GET",                 
url: "get-answers.php",                 
data: { project_question_id: <?=$project_question_id?>,
        project_id: <?=$project_id?>
        },
cache: false,                  

  success: function(data) {   
  $('#dispaly-answers').append(data);                      

           },// success                 

    })// ajax   

});

Does the same as $.get()

Upvotes: 1

Views: 6412

Answers (4)

Sundram Singh
Sundram Singh

Reputation: 11

Try this you just need to replace this file retrieve_query.php and this id query-div with yours.

setInterval(function(){ 
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            $('#query-div').html(this.responseText);
          }
        };
        xmlhttp.open("GET","retrieve_query.php",true);
        xmlhttp.send();
    },1000);

Upvotes: 0

Monir Khan
Monir Khan

Reputation: 19

Here is my final approach $(document).ready(function() {

     setInterval(function(){ 
        $.ajax( {
              type: "GET",                 
               url: "get-answers.php",                 
                 data: { project_question_id: <?=$project_question_id?>,
                         project_id: <?=$project_id?>
                       },
                 cache: false,                   

               success: function(data) {   
                 $('#dispaly-answers').html(data);                      

               },// success                

        })// ajax
    }, 1000);


});

Without creating and calling function getData(), this code working fine. Also I have changed .append(data) to .html(data).

But still I'm not happy with my code because it is constantly retrieving data from database that makes data server busy.

Whatever I wanted to tasks has to be done and it is done.

Upvotes: 0

yukisan
yukisan

Reputation: 21

If your goal is to refresh the page data without refreshing the page, you can put your code in an interval timer and let it auto refresh every x seconds, like below.

setInterval(getAnswer(), 1000);

note: setInterval fires again and again until you clear it, while setTimeout only fires once.

Upvotes: 1

Paflow
Paflow

Reputation: 2347

The Ajax-Function get only called once: In the moment the document is ready (fully loaded). You have to use setTimeout to create a timer, which calls the function every minute or whatever you want. Like this:

function getData() {
    setTimeout(function(){ 
        $.get('get-answers.php', { 
             project_question_id: <?=$project_question_id?>,
             project_id: <?=$project_id?>
        }, function(data) {
            $('#dispaly-answers').append(data);
            getData();
        });  
    }, 3000);
}

Upvotes: 0

Related Questions