Ajax call example

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>

</select>

</div>

</div>

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

function getfun(val) 

{

       var data="val1="+val;

$.ajax({

type: "GET",

url: "url of the page being called",

data:data,

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='<tbody>';

for(i=0;i<response.length;i++){

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

}

html+='</tbody>';

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