Ajax call example

Author - 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>
</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

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

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