CODEWITHSUNDEEP
phphtml
4 Leave Cover
4 Leave Cover

Reputation: 1276

How to refresh a section of HTML page

I require a section in my HTML page which will update whenever user perform a successful data entry. The data entry comes from input from user into MySQL database, then I will query the table filter by status is Success and sort by creation date DESC.

I do not want to refresh the whole page, just the section/div (I don't know which practice to use). What are the best method to achieve this? Ajax? iframe?

Upvotes: 0

Views: 3557

Answers (2)

norcal johnny
norcal johnny

Reputation: 2115

You can try something like this.

<!DOCUMENT>
<html lang="en">
 <head>     
  <title>Auto Load and Refresh Div Every 10 seconds</title>     
  <style>
    #auto_load_div>div{width:100%;max-width:320px;}
  </style>     
 </head>
 <body>     
     <div id="auto_load_div"></div>
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
     <script>
      function auto_load(){
        $.ajax({
          url: "data.php",
          cache: false,
          success: function(data){
             $("#auto_load_div").html(data);
          } 
        });
      }     
      $(document).ready(function(){     
        auto_load(); //Call auto_load() function when DOM is Ready     
      });     
      //Refresh auto_load() function after 10000 milliseconds
      setInterval(auto_load,10000);
   </script>
 </body>
</html>

Also like this.

HTML

<div id="divID"> <!-- THE DATA FROM THE FORM VIA PHP --> </div>
<form id='foo' onsubmit="return false">
 <input type='text' name="yourname">
 <input type='submit'>
</form>

display the response in the html to which u gave an id.

JQUERY

$('#foo').submit(function(event){
  $.ajax({
    url: 'index.php',
    type: 'post',
    dataType:'html',   //expect return data as html from server
   data: $('#foo').serialize(),
   success: function(response, textStatus, jqXHR){
      $('#divID').html(response);   //select the id and put the response in the html
    },
   error: function(jqXHR, textStatus, errorThrown){
      console.log('error(s):'+textStatus, errorThrown);
   }
 });
});

write ur html here... i am just printing the post variable here... u can use <table> (html) as required

index.php

echo $_POST['yourname'].

Upvotes: 2

Pragun
Pragun

Reputation: 1241

Ajax will be best suited for your application. However, from whatever you've stated, I think you'll be needing to deal with web-sockets as you'll have to continuously listen to the database changes. Try to find out how do you implement it in php if you haven't done it yet.

Upvotes: 0

Related Questions