Ajax page fails with undefined variable error message - ajax

Question

I'm just trying to write my first ajax enabled page. Needless to say, I've run into a problem. And I think it reveals a fundamental misunderstanding of how ajax is supposed to work.
Here's a description of what i'm trying to accomplish.
I have a page with a table containing records from my database. When the user clicks on my refresh button, i want to requery the database for all records and display them without refreshing the page.
Here's my controller:
class Dashboard extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->helper('date');
$this->load->helper('url');
}
public function index()
{
$this->load->model('locations_model');
$emess = '';
$data['clienthistory'] = $this->locations_model->get_locations();
$data['main_content'] = 'dashboard';
$this->load->view('includes/template', $data);
$this->output->enable_profiler(TRUE);
}
public function index2()
{
echo('inside the getlatest method');
$this->load->model('locations_model');
$data['clienthistory'] = $this->locations_model->get_locations();
//build HTML table to send back to view
$data['latestdashboardHTML']= "<table class='table table-bordered table-striped'><thead>";
$data['latestdashboardHTML']=$data['latestdashboardHTML'] & "<tr><th>IP</th><th>Name</th><th>Last Updated</th></tr></thead><tbody>" ;
foreach ($data['clienthistory'] as $histitem)
{
$data['latestdashboardHTML'] = $data['latestdashboardHTML'] & "<tr>";
$data['latestdashboardHTML'] = $data['latestdashboardHTML'] & "<td>" & $histitem['network'] & "</td>";
$data['latestdashboardHTML'] = $data['latestdashboardHTML'] & "<td>" & $histitem['name'] & "</td>";
$data['latestdashboardHTML'] = $data['latestdashboardHTML'] & "<td>" & $histitem['lastupdated'] & "</td>";
$data['latestdashboardHTML'] = $data['latestdashboardHTML'] & "</tr>";
}
$data['latestdashboardHTML'] = $data['latestdashboardHTML'] & "</tbody></table>";
$data['main_content'] = 'dashboard';
echo ($data['latestdashboardHTML']) ;
$this->load->view($data['main_content'] );
}
}
And here's the code in my view:
<h2>Client Dashboard</h2>
<br/><p>
<?php echo form_open('Dashboard/index');
echo form_submit('submit', 'Refresh Data', 'id="submit" class="btn-primary"');
?>
</p>
<div class="row-fluid">
<div class="span12" id="ajaxcontainer">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>IP</th>
<th>Name</th>
<th>Last Updated</th>
</tr>
</thead>
<tbody>
<?php foreach ($clienthistory as $histitem): ?>
<tr>
<td><?php echo $histitem['network'] ?></td>
<td><?php echo $histitem['name'] ?></td>
<td><?php echo $histitem['lastupdated'] ?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</div>
</div><!--/row-->
<?php
echo form_close();
?>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bs-transition.js"></script>
<script src="../assets/js/bs-alert.js"></script>
<script src="../assets/js/bs-modal.js"></script>
<script src="../assets/js/bs-dropdown.js"></script>
<script src="../assets/js/bs-scrollspy.js"></script>
<script src="../assets/js/bs-tab.js"></script>
<script src="../assets/js/bs-tooltip.js"></script>
<script src="../assets/js/bs-popover.js"></script>
<script src="../assets/js/bs-button.js"></script>
<script src="../assets/js/bs-collapse.js"></script>
<script src="../assets/js/bs-carousel.js"></script>
<script src="../assets/js/bs-typeahead.js"></script>
<script type="text/javascript">
$('#submit').click(function() {
alert('here');
$.ajax({
url:"<?php echo site_url('Dashboard/index2'); ?>",
type: 'POST',
success: function(msg) {
alert(msg);
$('#ajaxcontainer').replaceWith(msg);
}
});
return false;
});
</script>
Problem:
the first time through, the page loads properly. all records show up with the correct values. But when i try the refresh button, the javascript executes, calls the index2 method.. but then it fails in the view on line 22 - which is where I'm trying to loop through the clienthistory array.
The error message is: Undefined variable: clienthistory.
SO here's my question. I thought the way ajax worked was that it only updated a section of the page. So I guess I don't understand why it's "redo-ing" this part of the view.
Can someone explain what I'm doing wrong, and more importantly, if my understanding of ajax is correct. I'd also prefer it if i could combine the two methods into one... i tried but had some problems so I ended up just copying index() to index2() and just working with that.
The other behavior that I'm noticing is that the title "Client Dashboard" as well as the button is showing up twice when execute the ajax method.
Thanks.

Answer 1

I found my problem. In index2() i'm loading the view again.
i shouldn't reload the view. i just need to pass the html string to the caller.
this in part resolves my problem.
so specifically in my controller i replaced:
$this->load->view($data['main_content'] );
with
return $htmlstring;
where $htmlstring contains the same string as $data['latestdashboardHTML']
the other problem is that i needed to specify the dataType that i was expected back from the controller.
so i added the following line to my .ajax function:
dataType: 'html'
Finally, I read online somewhere that it's not a good idea to have the controller create any HTML. this is supposed to be the job of the view.
i guess i will try to pass an array from controller to view. and then have the jquery code recreate the contents of my div.
thanks