Load data into view via ajax from db in Laravel 4

Question

So far I have a User view that contains a typehead input box and a button.

I can manage to get the id of the selected user and display it when clicking on the button:

$('#load').bind('click', function(e)
{
   alert(selected);
});

Now I want to retrieve the data for the selected user from the database and display it in the User view. Here is my jQuery, route and controller:

var details = '<?php echo URL::to('details'); ?>';
$.getJSON(
    details, 
    function(data) 
    {
        $('#details').html(data);
    }
);

Route::get('details', 'HomeController@Details');

public function Details()
{
    $data = array('name' => 'Ste');
    return View::make('user')->nest('details', $data);
}

I've read multiple articles of AJAX in Laravel but am no closer to getting this working.
Does anyone know of a good tutorial for doing this or am I doing something obviously wrong?

Are you getting any error?what happens when you run your app? — Trying Tobemyself
– Trying Tobemyself, Commented Jul 21, 2013 at 18:31
I think $.getJSON is used to Load JSON-encoded data from the server using a GET HTTP request, but you are sending HTML/TEXT data — Trying Tobemyself
– Trying Tobemyself, Commented Jul 21, 2013 at 18:35

SteB · Accepted Answer · 2013-07-27 20:04:15Z

Took me a while to figure out, but this is what I've ended up with.
This simply returns some html constructed in a view from a database query based on a single value (userid) passed into a controller method via jQuery ajax.
Eg: The user uses Bootstrap Typeahead to select a user, then (via ajax) gets the user's details from the database and displays then.

The AJAX:

var details = '<?php echo URL::to('details'); ?>';
$.ajax(
{
    url: details,
    type: 'GET',
    dataType: 'html',
    data: {id: selected}, 
}).done( 
    function(data) 
    {
        $('#details').html(data);
    }
);

The Controller:

public function Details()
{
    $id = Input::get('id');
    $user = DB::table('Users')->where('UserID', $id)->get();
    $data = array('user' => $user);

    return View::make('details', $data);
}

The View:

@foreach($user as $person)
<label class="key">User ID</label>
<label class="data">{{ $person->UserID }}</label>

<label class="key">Person</label>
<label class="data">{{ $person->FullName, $person->Email, $person->WebSite }}</label>
@endforeach

Notes:

All my views are blade templates.
My details view cannot inherit from another template (no extends('master')), this stops the view from working (no idea why).
I'll only ever be returning 1 record, I use @foreach to access the array and turn each element into an object (there may be a better way of doing this).

Homme Sauvage · Accepted Answer · 2013-07-21 19:53:46Z

3

When you're using geJson you're expecting a json response, so you'll nee to use $.ajax() instead.

Another solution is to return

return Response::json(['view' => View::make('user')->nest('details', $data)]);

And then

$.getJSON(
    details, 
    function(data) 
    {
        $('#details').html(data.view);
    }
);

answered Jul 21, 2013 at 19:53

Homme Sauvage

1,9261 gold badge16 silver badges21 bronze badges

4 Comments

SteB Over a year ago

If I return "return Response::json(array('view' => '<input />'));" from my controller I can get the input box to appear, but as soon as I use "return Response::json(array('view' => View::make('details', data)));" I get nothing, any idea why?

Homme Sauvage Over a year ago

Response::json(array('view' => View::make('details', $data))); You forgot to add $ to the variable data

SteB Over a year ago

Sorry, that's a typo, I have actually got "return Response::json(array('view' => View::make('details', $data)));".

David Over a year ago

@SteB - I realise this is a slightly late response, but the reason you get nothing when doing return Response::json(array('view' => View::make('details', $data))); is because View::make returns an object, not just the content. To return a view directly, it can be simply done by: return View::make('details', $data); and then just placed the data in the jQuery into the HTML (instead of data.view). Hope that helps!

SteB · Accepted Answer · 2014-02-13 07:43:37Z

1

Just to add to what SteB is saying. To not use @foreach, if you only have/need 1 record, you should do this instead:

 $user = DB::table('Users')->where('UserID', $id)->first();

and then in your view you should be able to reference $user directly and not need a @foreach loop. This is a better way since it's one record you are retrieving.

edited Feb 13, 2014 at 7:43

SteB

2,0074 gold badges36 silver badges59 bronze badges

answered Oct 30, 2013 at 1:59

Dammy

73 bronze badges

Collectives™ on Stack Overflow

Load data into view via ajax from db in Laravel 4

3 Answers 3

The AJAX:

The Controller:

The View:

Notes:

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

The AJAX:

The Controller:

The View:

Notes:

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related