Menu
I'm learning the Laravel PHP framework, based on the Model, View, Controller paradigm. I'm stuck on trying to incorporate AJAX into my simple starter application...a phonecall logger. This is where I normally give up. But I refuse!
So I have my Phonecall Model:
class Phonecall extends Eloquent
{
// Creates an instance of the database object
}
Here's my phonecalls table:
mysql> desc phonecalls;
+------------+------------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+------------+------------------+------+-----+---------+----------------+
| id | int(10) unsigned | NO | PRI | NULL | auto_increment |
| who | varchar(200) | NO | | NULL | |
| what | varchar(200) | NO | | NULL | |
| created_at | datetime | NO | | NULL | |
| updated_at | datetime | NO | | NULL | |
| initiator | varchar(200) | NO | | NULL | |
| info | text | NO | | NULL | |
+------------+------------------+------+-----+---------+----------------+
7 rows in set (0.00 sec)
My View lists all calls (by who and what) currently in the database:
<!doctype html>
<html>
<head>
<title>Title</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
</head>
<body>
<h1>Welcome</h1>
<p>Here's a list of recent phonecalls</p>
<ul class="call-list">
@foreach($phonecalls as $call)
<li>{{ $call->who }} - {{ $call->what }} -
<a href="phonecalls/show/{{ $call->id }}">Show</a> |
{{ HTML::link('phonecalls/delete/'.$call->id, 'Delete') }} |
{{ HTML::link('phonecalls/update/'.$call->id, 'Update') }}
</li>
</ul>
{{-- Placeholder for AJAX content --}}
<div id="call-info">
</div>
</body>
</html>
Here's my simple Controller:
class Phonecalls_Controller extends Base_Controller {
// Use $this within a method the same way you
// would use the object name outside of the class
public function get_index()
{
$phonecalls = Phonecall::all();
return View::make('phonecalls.index')->with('phonecalls', $phonecalls);
}
// ************************************
// DISPLAY CALL INFO
public function get_show($call_id)
{
$call = Phonecall::find($call_id);
// WHAT GOES HERE?
}
I want the user to be able to click on "Show" in the view and have the call info display within the...
<div id="call-info">
</div>
tags in the View.
Here's what did it...
My get_show() method
// ************************************
// SHOW CALL INFO
public function get_show($call_id)
{
$call = Phonecall::find($call_id);
return $call->info;
}
My Javascript
//************************************
// Phonecall AJAX Example
//************************************
$(document).ready(function() {
$('.call-list > li > a').click(function(e) { // e=event
e.preventDefault();
var id = $(this).attr('id');
$.get(BASE+'/phonecalls/show/'+id, function(data) {
$("#call-info").html(data);
})
});
374
asked Mar 25 '13 20:03
This can be done in many various ways.
First, you can do this :
public function get_show($call_id)
{
$call = Phonecall::find($call_id);
return View::make('phonecalls.single')->with('phonecal', $call);
}
In which case you need to create a template for a single phonecall and put it in your phonecalls folder.
Another option is to return JSON response from the Laravel app :
public function get_show($call_id)
{
$call = Phonecall::find($call_id)->first();
return Response::eloquent($call);
}
Another option is to use javascript MVC framework to make things like fetching/updating AJAX data very easy, for example Backbone JS or Angular JS can do that.
Either way, if you want to do AJAX data you need to build an API to make a separation between regular site and AJAX data backend.
Here is my blog post with lots of details on how to accomplish this: http://maxoffsky.com/code-blog/building-restful-api-in-laravel-start-here/
Also, a great introduction for AJAX in Laravel is Code Happy by Dayle Rees, chapter AJAX content : codehappy.daylerees.com/ajax-content
Let me know if you have more questions, and approve this comment if you feel like I've helped. Thanks!
UPDATE:
To actually load stuff in from the controller (or a Laravel route) you need to use jQuery ajax, GET(to load data) or POST(to post form results) Here's an example:
$('#get-info').click(function(e) { // e=event
e.preventDefault();
var BASE = "<?php echo URL::base(); ?>";
// attempt to GET the new content
$.get(BASE+'phonecalls/show/2', function(data) {
$('#content').html(data);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
