How to update an array table dynamically with ajax and jquery?

Question

I have two files php (gettable.php and index.php) the index file display the result obtained by gettable.php every one seond, I want update the content of my table dynamically in the index (only new or changed value must be changed) using ajax, I am beginner in ajax.

Help me please thank you

gettable.php

    //
    //
    // I load data from the server(xml file) 
    $xml = simplexml_load_string($result);

    foreach($xml as $node)
    {
        $name = "";
        $value = -1;

        foreach($node->attributes() as $a => $b) {
            if($a == "name")
            {
                $name = (string)$b;
    }
    else if($a == "value")
    {
        $value = (string)$b;
    }
        }

        $vars[$name] = $value;
    }

    ?>
    <table border="1">
    <tr>
    <th>id</th>
    <th>abc</th>
    <th>def</th>
    </tr>
    <tr>
    <td><?php
    echo "<p>x: ".$vars["x"]."</p>";
    ?>
    </td>
    <td><?php
    echo "<p>y: ".$vars["y"]."</p>";
    ?>
    </td>
    <td><?php
    echo "<p>z: ".$vars[z"]."</p>";
    ?>
    </td>
    </tr>
    </table>

file index.php

    <html>  
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script language="JavaScript">
    $('#data').load("gettable.php");
    setInterval( "SANAjax();", 1000 ); 

    $(function() {
        SANAjax = function(){

        $('#data').load("gettable.php");

        }
    });


</script>
</head>
<body>

    <div id="data">
        <?php include_once('gettable.php'); ?>
    </div>

</body>

Kundan Singh Chouhan · Accepted Answer · 2012-08-29 18:27:39Z

1

The script code should like this

$(function(){
  function loadData(){
    $('#data').load("gettable.php");
  }

  setInterval(function() { loadData(); }, 1000 ); 

});

answered Aug 29, 2012 at 18:27

Kundan Singh Chouhan

14.4k4 gold badges30 silver badges33 bronze badges

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

5 Comments

Mils Over a year ago

Thank you, but this code just to display data every one second and I want to modify just the modified values in my table.

Kundan Singh Chouhan Over a year ago

it relods the div in each 1 second so the values get modified autometically.

Mils Over a year ago

Yes, but I do not want reload the data that are unchanged, I want to load only the values that are modified not all the table. It's possible ?

Kundan Singh Chouhan Over a year ago

In that case you will have to return JSON format values. The html markup would be in "index.php" file. We can call the php file that return the json data and parse this to index.php via ajax.

Mils Over a year ago

Thank you again. Could you simplify your response? Because I am beginner with these two languages.

Collectives™ on Stack Overflow

How to update an array table dynamically with ajax and jquery?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related