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

Question

I'm 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.

Where is container_tab that you are trying to fill with the results? — RiggsFolly
– RiggsFolly, Commented Sep 25, 2016 at 16:08
@RiggsFolly the container_tab is at the end of my view as <div id="container_tab"></div> and @mplungjan there are no php errors thrown and the table tags have been added all i did was copy and paste so i didn't copy those now they are there. — learningbyexample
– learningbyexample, Commented Sep 25, 2016 at 17:02
Then change $("container_tab").html(data); to $("#container_tab").html(data); — RiggsFolly
– RiggsFolly, Commented Sep 25, 2016 at 17:02

RiggsFolly · Accepted Answer · 2016-09-25 21:24:25Z

1

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);
}

edited Sep 25, 2016 at 21:24

answered Sep 25, 2016 at 17:11

RiggsFolly

94.7k22 gold badges108 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related