AJAX create form/table on change

Question

I have a table that is populated from a Database. How would I go about only having this table populate once the user changes a selectbox option? I think I need to us AJAX and onchange for the dropdown as the query for the table will alter pending the dropdown selection, though im not sure how to go about this. I know it can't be too hard, but I need to see an example before I can understand it and apply elsewhere.

Using php 5.2

I tried following the W3 examples but they did not seem to cover this area. More of loading an existing file to present text. I wasn't sure how to apply that to this.

<td style="vertical-align: top;">
   <select name="caseless_numbers" id="ValTwo" class="DropChange">
       <option value=""></option>
       <option value="1">A</option>
       <option value="2">B</option>
       <option value="3">C</option>
       <option value="4">D</option>
   </select>
</td>

Are you alright with using jQuery? [Here is an answer](http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843) that links to several simple examples to get started on AJAX. One of them involves using SELECT controls. — cssyphus, Aug 12 '13 at 15:42

score 1 · Accepted Answer · answered Aug 12 '13 at 15:45

Here is how I would do it.

Wrap the table in a div called tablewrap or whatever and then add a change event to the dropdown. Using a jQuery post you can then send the value as a variable called selection to a php script to make the table and then use the result as the html for the div:

$("#ValTwo").on("change", function() {
    $.post("getTableData.php", { selection: $(this).val()  },   function(data) {    
    $("#tablewrap").html(data.table);   
    }, "json");
});

score 0 · Answer 2 · answered Aug 12 '13 at 15:40

0

You want to read up on XMLHttpRequest and how to use them.

There are literally dozens of articles online that discuss in great detail how to do this.

answered Aug 12 '13 at 15:40

André Dion

21,269
7
56
60

score 0 · Answer 3 · answered Aug 12 '13 at 15:45

Without knowing what you are using as a server side language, I cannot give you an example of that. Here is an example of an ajax post that uses ASP.NET MVC4 server side.

jQuery:

$('#ValTwo').change(function(){
  $.ajax({
    type: "POST",
    url: "/{controller}/{action}/",
    data: { 'Selection' : $('#ValTwo').val() }, //PASSES BACK SELECT VALUE
    dataType: "json",
    success: function (data, text) {
      //APPEND TABLE HERE, 'data' WILL CONTAIN ANYTHING RETURNED
  });
});

NOTE: Any input/select/textarea controls added to the page after it load (ie: in the success method) will need to use $.live to add any event listeners.

jQuery Documentation on Ajax: http://api.jquery.com/jQuery.ajax/

Sorry I should have said Linux, php 5.2. Though im sure I can break your example down — Skot, Aug 12 '13 at 15:46
The only real difference here is the url property wouldn't be correct. — mambrowv, Aug 12 '13 at 15:48

score 0 · Answer 4 · answered Aug 12 '13 at 17:29

There is much to be said for building your own AJAX mechanism to do this -- as an academic exercise. If, however, you want a robust solution with maximum cross-browser compatibility and a robust feature set, I would recommend looking at the combination of jQuery and datatables. A lot of datatable's functionality will be obscure without a secure grounding in how AJAX works, but I have found this combination to be an enormous saver of time and energy in production environments.

Using this route, you'd want to look closely at the Server Side Processing examples. It is important to note that you can use either a script URL or a callback function for this option property, and that you can force a datatable to pull freshly from the server in an on-change event (look at the fnReloadAjax plugin).

There is some room for confusion in mastering these tools, but they are very powerful and will earn their keep in the long run.

AJAX create form/table on change

4 Answers4