Ajax call example

| By Webner

How to call ajax function and then fill the data received from server in a table.

Suppose the is html code of view. On change in selection of the dropdown getfun() function is called that will send an ajax call to server:

<div >

<div >

<select id="Project" name="Project"  class="selectpicker" data-style="btn-info" data-live-search="true" onChange="getfun(this.value);">

<option value="">Select value</option>




//This function sends an ajax call to server, receives json and puts it into a table

function getfun(val) 


       var data="val1="+val;


type: "GET",

url: "url of the page being called",


success: function(res){

var response = jQuery.parseJSON(res);  //parse json to string 

                var responseHtml = createView(response);//create table html 

  $('#dataTables-example').append(responseHtml); //append to table





//this function creates the html table and puts data into it

function createView(response)




html+= '<tr><td>'+response[i].column name+'</td>';

html+= '<td>'+response[i].column name+'</td>';

html+= '<td>'+response[i].column name+'</td>';

            html+= '<td>'+response[i].column name+'</td></tr>'; //we can add as many           columns as needed



return html;


Webner Solutions is a Software Development company focused on developing CRM apps (Salesforce, Zoho), LMS Apps (Moodle/Totara), Websites and Mobile apps. If you need Web development or any other software development assistance please contact us at webdevelopment@webners.com

Leave a Reply

Your email address will not be published. Required fields are marked *