My HTML code is very simple :


<form id="delForm" action="deleteThirdMulti.php" method="post"> <!--Le fomulaire qui ne sert que pour les checkbox-->
<div class="container">
        <div class="col-md-1 pull-right">
            <a href="addThird.php"><img src="CSS/PICTURES/add.png" /></a>
            <br /><br />
    <div class="row">
        <div class="col-md-2 form-group">
            <button type="submit" class="btn btn-default" name="delete_all">Supprimer</button>
        <div class="col-md-2 form-group">
            <select name="choix_service" class="form-control form-update-user" id="sort">
                <option selected="selected">TOUS</option>
                <option value="COMPTABILITE">CLIENT</option>
                <option value="EXPLOITATION">AFFRETE</option>
                <option value="INFORMATIQUE">PROPRIETAIRE</option>
    <table class="table table-condensed table-responsive table-bordered sortable table-striped" id="table">
                <th class="text-center"><input type="checkbox" onclick="toggle(this)" name="check_all"/></th>
                <th class="text-center">Type</th>
                <th class="text-center">Code</th>
                <th class="text-center">Nom</th>
                <th class="text-center">Adresse 1</th>
                <th class="text-center">Adresse 2</th>
                <th class="text-center">Code Postal</th>
                <th class="text-center">Ville</th>
                <th class="text-center">Pays</th>
                <th class="text-center">Téléphone</th>
                <th class="text-center">Fax</th>
                <th class="text-center">E-mail</th>
                <th class="text-center">Site web</th>

And then, I have a PHP code which display datas from the database.

The problem is that I would like the user to be able to change the value in the select box and, I would like the datas to be updated without a page reload. Indeed, when I select CLIENT, only CLIENTS from the base will be displayed in the table.

My start of Jquery code :

<script type="text/javascript">
$(document).ready(function() {
      var valeur = $('#sort option:selected').text();
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: valeur,
        success: function(data) {
                   ... do something with the data...

Question author Kuartz | Source



Inside your Success function on the Ajax call you will want to loop through the data and use jquery's


function to fill in the table data.

It may be easier to wrap the table id="table" inside a div container so you can write the entire table HTML from within your success function in the AJAX.

I hope this addresses your question, it was a little unclear what you are trying to accomplish, but it seems there is some language barriers here that we can hopefully overcome.

Let me know if you need any clarification on things!

Clarification for comment #1:

create a div on the page for your ajax response information. Let's call this "clients_table_container"

<div id="clients_table_container"></div>

When your ajax response success function is called, you can fill the content of this container div with the html code you would like to display. For Example:

success: function(data)
    //TODO: Turn JSON into html string content
    var my_html_string = data;


You'll want to make sure you have the <table> html inside the my_html_string variable and you fill in the <tr><td></td></tr> tags based on the json response in the data variable. This part you will have todo as we have no visibility into it's contents.

Answer author Danoweb