CODEWITHSUNDEEP
phpajaxjquerylaravel
Ben Thompson
Ben Thompson

Reputation: 4833

How to use Ajax with jQuery in Laravel 4?

I am brand new to Laravel 4 and seeing if I can convert my website over to it (previously written without a framework). I can't get AJAX (via jQuery) to interact properly with my controller.

So firstly, the controller I am working in is called IndexController.php and has a function called types which is shown below:

class IndexController extends BaseController {

// Other controller functions

public function types($brand) {

    $types = DB::select('select * from aircraft_types where brand_id = ?', array($brand));

    echo json_encode($types);

}

}

The function returns the data from the database (in JSON format). I have then created a route to this controller and function as follows:

Route::get('types/{id}', array('uses'=>'IndexController@types'));

I have doubled checked that the route and function are working by going to //localhost/lavarel/public/types/1 and indeed it returns the correct JSON data.

The jquery function in question is below:

function updateTypes($brand) {

$("#type").append('<option value="test">Test...</option>'); // This executes correctly

$.getJSON('/types/'+$brand, function(data) {
    $("#type").append('<option value="test 2">Test 2...</option>'); // This does not
// Some other JSON related code
});

To test where the function works, I have inserted two lines which edit the item I am using. The function is being called correctly as the first 'Test' option is being appended. However, it never seems to activate the callback function as the second line of test code is not executed.

I suspect the issue is the URL I am providing to JavaScript '/types/'+$brand. I have seen in some tutorials a BASE var used before the URL I provide, but I don't see why my code above wouldn't work. Any pointers?

Can anyone explain to me where I am going wrong?

Upvotes: 1

Views: 7856

Answers (2)

edenstrom
edenstrom

Reputation: 286

Your base path to your laravel project is localhost/laravel/public/ but your AJAX-request goes to just localhost. There're some methods for fixing this.

Method 1:

This is the most preffered method. (in my opinion)

Instead of using nginx, apache for starting a web server, you can use PHP's built in web server.

Open a terminal window (or cmd in Windows), cd into the main directory for your project (the one with vendor, app and public directories) and type the command php artisan serve. This will create a PHP-server on localhost:8000 and your base path will be /.

There's a lot of options, for example php artisan help serve" if you want to see them all.

After you've done so your code should work.

Method 2

If you want to use nginx or apache you should add a virtualhost for your project.

That can be done though the configs.

Apache: http://httpd.apache.org/docs/current/vhosts/examples.html

Nginx: http://wiki.nginx.org/ServerBlockExample

After that you should add a new entry to the hosts file.

Method 3

As you said you could add a BASE variable before the '/types/'+$brand.

Your request goes to localhost/types/$brand.

It should go to localhost/laravel/public/types/$brand.

Just replace '/types/'$brand with '/laravel/public/types'+$brand

Upvotes: 4

Andreyco
Andreyco

Reputation: 22872

Use HTML 'base' meta tag

<!doctype html>
<html lang="en">
<head>
    ...
    <base href="{{ URL::to('/') }}"/>
    ...

Declaring this tag, you ensure that every relative URL will be based on project's real, absolute URL (http://localhost/my-laravel-project/public/), not on Localhost's URL (http://localhost)

Upvotes: 0

Related Questions