Ajax with Jquery and CodeIgniter frameworks

Question

I have a controller that sends the results of two functions in a model like so :

$data['waiting'] = $this -> queue_model -> waiting();
$data['beingseen'] = $this -> queue_model -> beingseen();
$this -> load -> view('studentqueue/studentqueue', $data);

In my view I have a jquery grid that displays the data. My boss needs that table to be automatically up dating when there is a new piece of data inserted into the database in which case that would affect the results of the query.

I am trying to follow this tutorial

But I get stuck up on what exactly data is.

In my controller I sending $data, how does that integrate with data in the ajax call?

I have two data grids on the same page both of which need to be asynchronously updating.

So just to make it absolutely clear what the questions is :

How do I integrate my controller data that I am passing to the view into the ajax call so that my tables get updated. -- I have two tables both of which have the same class id, but different table id if you will.

The html for my tables are :

<?php echo anchor('staff_controller/index', 'Return');?>
    <p class='error'>
        <font color="#ff0000">
            <?php echo $this->session->flashdata('reports');?>
        </font>
    </p>

    <h3>Students Waiting</h3>
            <table id='waiting' class='display'>
                <thead>
                <tr>
                    <th>ID</th>                       
                    <th>A Number</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Time Waiting</th>
                    <th>Reason for visit</th>
                    <th>Comments</th>
                    <th>Aid Year</th>
                    <th>Staff Comments</th>
                    <th>Options</th>
                </tr>
            </thead>
            <tbody>

                <?php $options = array("" => "", 'start' => 'Start Session', 'stop' => 'Student Not Present', 'abandon' => 'End Session', );
                foreach ($waiting as $row) 
                { 
                    ?>                
                <tr>
                    <td><?php echo htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8'); ?></td>               
                    <td><?php echo anchor('studentqueue_controller/history/'.urlencode($row['anum']). '', htmlspecialchars($row['anum'], ENT_QUOTES, 'UTF-8'), 'target="_blank"'); ?></td>
                    <td><?php echo htmlspecialchars($row['first'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td><?php echo htmlspecialchars($row['last'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td><?php echo htmlspecialchars($row['SECOND'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td><?php echo htmlspecialchars($row['reason'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td><?php echo htmlspecialchars($row['studentcomments'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td><?php echo htmlspecialchars($row['aidyear'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td><?php echo htmlspecialchars($row['counselorcomments'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td>
                        <?php echo form_open('studentqueue_controller/counselorscreen/' .urlencode($row['id']). ''); ?>
                        <?php echo form_dropdown('options', $options, ""); ?>
                        <?php echo form_submit('submit', 'Submit'); ?>
                        <?php echo form_close(); ?>
                    </td>
                </tr>
                <?php
                 } ?>
            </tbody>    
        </table>

Students Being Seen

        <table id='beingseen' class='display'>
            <thead>
                <tr>
                    <th>ID</th>                       
                    <th>A Number</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Sign In Time</th>
                    <th>Staff Member</th>
                    <th>Start Time</th>
                    <th>Options</th>
                </tr>
            </thead>
            <tbody>
                <?php $options1 = array("" => "", 'continue' => 'Continue Session', 'terminate' => 'Terminate Session', );
                foreach ($beingseen as $row1) { ?>                 
                <tr>
                    <td><?php echo htmlspecialchars($row1['id'], ENT_QUOTES, 'UTF-8'); ?></td>              
                    <td><?php echo htmlspecialchars($row1['anum'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td><?php echo htmlspecialchars($row1['first'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td><?php echo htmlspecialchars($row1['last'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td><?php echo htmlspecialchars($row1['signintime'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td><?php echo htmlspecialchars($row1['fname'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td><?php echo htmlspecialchars($row1['starttime'], ENT_QUOTES, 'UTF-8'); ?></td>
                    <td>
                        <?php echo form_open('studentqueue_controller/counselorscreen/' .urlencode($row1['id']). ''); ?>
                        <?php echo form_dropdown('options', $options1, ""); ?>
                        <?php echo form_submit('submit', 'Submit'); ?>
                        <?php echo form_close(); ?>
                    </td>
                </tr>
                <?php } ?>
            </tbody>    
        </table>

Answer 1

I finally finished this part of my application. I instead of using my own type of "update" I went ahead and used the DataTables Updating.

I just followed this documentation and all went fine (for the most part).

This helped me a lot :

http://datatables.net/forums/discussion/14641/escaping-html-with-datatables

Hopefully some one can learn from my mistakes.

Answer 2

Here's how I do it:

1. Page load requests a CI controller that loads a view

2. View contains the data table(s) that will hold the data returned from the ajax request (we use the awesome DataTables plugin/extension for this)

3. I have a separate method in my controller that handles the ajax request for the data (get_table_data_xhr() )...this method does not load a view, it simply echos the JSON object that Datatables will use to populate the table. The request to this method is made AFTER the page loads and then again on whatever trigger to refresh the data.

Here's the link to the DataTables documentation: http://www.datatables.net/ Here's an example of using this method with an Ajax request as the source for the data: http://www.datatables.net/release-datatables/examples/data_sources/ajax.html

UPDATE:

Here's a snippet from one of my ajax methods showing what/how it returns the json for DataTables plugin:

            ... // this is happening inside a loop that's assigning things to $data

            $data[] = array(
                'name' => $c->Name,
                'description' => $c->Description,
                'topics' => explode(';', $c->Topic__c),
                'start_date' => $c->StartDate,
                'end_date' => $c->EndDate,
                'sort_date' => $start_time->format('YmdH'),
                'dates' => $event_dates,
                'time' => $event_time,
                'delivery_method' => $c->Delivery_Method__c,
                'level' => $c->Levels__c,
                'url' => $c->Sign_Up_URL__c,
                'location' => $c->Location__c,
                'timezone' => $timezone
            );
        }
        $out['status'] = 'success';
        $out['data'] = $data;
    } else {
        $out['status'] = 'success';
        $out['data'] = array();
    }
}
header('Content-Type: application/json');
echo json_encode(array('aaData' => $out['data']));

Answer 3

If I'm understanding correctly you are looking at this code:

 url: 'http://kyleschaeffer.com/feed/',
 data: { postVar1: 'theValue1', postVar2: 'theValue2' },

And wondering what data should be? I think you need to focus on what URL should be. Since

  $data['waiting'] = $this -> queue_model -> waiting();
  $data['beingseen'] = $this -> queue_model -> beingseen();

are likely inside a broader function inside of your controller. you would need to create a function that specifically returns just those two pieces of data for the new update request (like: http: //mydomain.com/mycontroller/myupdatefunction). So you want to be doing a GET request, because you are not posting data, just requesting data back. Maybe this example will help further.