learningbyexample learningbyexample - 2 months ago 7
Javascript Question

How do I display data back from a javascript calling a php funcition?

Im using a MVC framework and in my view I have my javascript code

this is in my view...

<script>
$(document).ready(function(){
$(document).on('click','#filtr',function(){
var id_val = $('#id_val').val();
var key_val= $('#key_val').val();
console.log(id_val);
console.log(key_val);
$.ajax({
url:"<?php echo base_url()?>filter/filtr",
method:"POST",
data:{
id_val:id_val,
key_val:key_val
},
/*beforeSend:function(){
$("container_tab").html("Searching...");
},*/
success:function(data){
$("container_tab").html(data);
}
})
});
});
</script>
<div class="table-responsive">
<table class="table table-striped table-hover" id="dataTables-example">
<tr>
<td>
Filter by...
</td>
<td>
ID: <input type="text" id="id_val" name="id_val" value="3" />
</td>
<td>
KEY: <input type="text" id="key_val" name="key_val" value="asdf12" />
</td>
<td>
<button type="button" class="btn btn-info btn-sm" id="filtr">FILTER</button>
</td>
</tr>

<br />
<div id="container_tab"></div>
</table>
</div>


I want the table that comes back from my controller to fill
<div id="container_tab"></div>


in my filter controller I have my filtr function, but this function for now does not return $filter_list even though I'm still not doing the actual query.

public function filtr(){
$filter_list = '';
$filter_list .= '
<tr>
<td style="vertical-align: middle;" class="text-center">this should be sent to view as a table row</td>
</tr>
';

echo $filter_list;

}


when I do a console.log within my javascript function the values '3' and 'asdf12' are display but I'm not getting anything back on screen from my controller function calling filtr.

Answer

There is a minor error in your success function, your containor has a id called container_tab so use a # in front of its name like this

success:function(data){
    $("#container_tab").html(data);
}