Question

I am trying to show information from database without reloading the page. I have a dropdown select option in my view, when I select any value, the dropdown only shows the table titles, but not the data from database. I tried hard to figure out the problem, but I failed.

And when users choose <option value="">Select a person:</option>, I want the jquery to send data to this controller- (test/index), but I don’t know how to do this.

Would you please kindly help me to solve these problems? Below is my jQuery, markup, and CodeIgniter code.

Inside Head:

<script type="text/javascript" src="<?php echo base_url(); ?>support/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function() {

        $("select[name='users']").attr("selectedIndex", 1);

        $("select[name='users']").change(function() {
            var str = $(this).val();
            if( str == "" ) {
                $("#txtHint").html("");
            }
            else {
                $.get("<?php echo base_url(); ?>test/query/str", function(data) { $("#txtHint").html(data) });
            }
       }).change();
    });
</script>

Inside Body:

<form>
    <select name="users" >
        <option value="">Select a person:</option>
        <option value="11080101">Sumon</option>
        <option value="11080102">Donno</option>
    </select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>

My Controller :

function query($id){

    $sql="SELECT * FROM attendancein WHERE attendeeid = '$id'";

    $result = mysql_query($sql);

    echo "<table border='1'>
        <tr>
            <th>date</th>
            <th>In Time</th>
            <th>In Status</th>
            <th>Class Start Time</th>
        </tr>";

    while($row = mysql_fetch_array($result))
    {
        echo "<tr>";
        echo "<td>" . $row['date'] . "</td>";
        echo "<td>" . $row['intime'] . "</td>";
        echo "<td>" . $row['instatus'] . "</td>";
        echo "<td>" . $row['classstarttime'] . "</td>";
        echo "</tr>";
    }

    echo "</table>";
}  

Answer 1

As you probably understood, you’re not returning any data because the controller isn’t getting any arguments.

I’m not completely familiar with routing in CodeIgniter, but it seems to be some flavour of REST. This is nice, but jQuery plays a little bit nicer with query strings than standard RESTful routing.

But don’t worry. That only means that you have merge your query data into the url, instead of having jQuery send it using a query string.

I think you want to do a jQuery get() like this:

$.get(
  "<?php echo base_url(); ?>test/query/" + str,
  function(data) {
    $("#txtHint").html(data);
  }
);

This is assuming you have a route similar to this:

$route['test/query/(:num)'] = yourController: