Is there a way to replace an entire table with new data using javascript?

Question

I'm making a webpage that shows data from two different locations in the form of a table. I have a select dropdown menu to select the location. On selecting the location, I'd like to change the table contents to match that location.

I already have the HTML string needed for the table contents (in a php variable that I get from a python script when the page loads), I just need to be able to replace the current table data with the new string.

I've looked online but all the answers I find are about replacing data in individual rows.

This is what I have:

HTML:

<select name="site_switch_location" id="site_switch_location" 
onchange="changeTableData()">
  <?php echo $resultData["site_switch_fill"] ?>
</select>

<table id="all_data" align="center">
  <?php echo $resultData["table_fill"][$_SESSION["location"]] ?>
</table>

Javascript:

<script type="text/javascript">
  function changeTableData() {
    var new_location = document.getElementById("site_switch_location").value;
    var table_data = <?php echo $resultData["table_fill"][new_location] ?>;
    document.getElementById("all_data").innerHTML = table_data;
  }
</script>

You have a basic misunderstanding in the way those work. Your php code is run on the server. The result of running it is then sent to the browser. There, javascript is interpreted. So…yes what you want to do is possible, but that's not even the beginning of how it's done. Look for AJAX on the web, it's the generic name of techniques using JS to load/update data asynchronously (that is, after the page has finished loaded) — spectras, Sep 20 '17 at 17:23
Supporting spectras comment, you need to use ajax call to get another table data. In case, if you get both table datas at first time, then you need to need to render two tables and use style display block or none based on your change — Alaksandar Jesus Gene, Sep 20 '17 at 17:27
Is this what you're trying to do? http://jsbin.com/sesomequza/edit?html,js,output — bassxzero, Sep 20 '17 at 17:28
The best way will be to change the address bar url and in php you get the change location and populate the right table. For example your address bar should look like url/India and url/usa here location will be dynamic — Alaksandar Jesus Gene, Sep 20 '17 at 17:29
Thank you all for your comments! I'm learning how to use AJAX right now. However, I was able to solve my issue using Alaksandar's answer. I rendered both tables and just changed the display style property in javascript as I already had all the data in PHP variables. — Rahul, Sep 20 '17 at 19:36

score 0 · Answer 1 · answered Sep 20 '17 at 17:33

Using the jQuery framework, you can create an infrastructure that requests server-side and returns a response. Since PHP is a server-side language, the data is represented once, therefore, we can send HTTP requests to the server in the background to refresh a page for data.

$(function () {
    var currentPagination = 1;
    $.get('/path/to/file/or/dynamic/route', { pagination: currentPagination++ })
        .done(function(content) {
            // your code logic to fill the table
            console.log(content);
        }
    );
});

Your PHP file would look something similar to this:

if(empty($_GET['pagination']) || !isset($_GET['pagination'])) exit();
$entity = new PDO(); # your credentials
$entity->setAttributes(); # your attributes ie ERR_MODE
$query = $entity->prepare('SELECT x,y,z FROM table WHERE id > ? LIMIT 1');
$query->execute(array($_GET['pagination']));
header('Content-Type: application/json');
die(json_encode($query->fetch());

So all you're doing is increasing the pagination (ie the column id for the corresponding data), passing it a long the HTTP(s) and updating the table with the information using AJAX.

Is there a way to replace an entire table with new data using javascript?

1 Answers1