How to use Ajax with jQuery in Laravel 4?

Question

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?

forgive me - how do I access that? The website doesnt break or show an error, it simply doesnt make the desired change — Ben Thompson, Jul 11 '13 at 09:16
If you're using Chrome go to `Tools > Developer tools` in the top right menu. Go to the `Network` tab and select `XHR` at the bottom. Here you will see any request of your app. Really helpful for debugging. — Israel Ortuño, Jul 12 '13 at 09:43

score 4 · Accepted Answer · edited Feb 01 '17 at 16:33

4

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

edited Feb 01 '17 at 16:33

Vao Tsun

47,234
13
100
132

answered Jul 11 '13 at 09:33

edenstrom

286
1
6

OK - I am trying method 3 before trying the other two. As you correctly point out, by using the URL '/types/'+$brand it is trying to load //localhost/types/1 (which is incorrect). I have therefore changed the URL to '/laravel/public/types/'+$brand. Bizarrely, this results in the page looking for //localhost/laravel/public/laravel/public/types/1 (i.e. /laravel/public repeated twice) (!) Any ideas? – Ben Thompson Jul 11 '13 at 11:26
What is your current code right now? It's hard to answer your question without the code-snippet that you're using. The string you posted should work. Are you sure you have `/laravel/...` and not `laravel/...`? Also, I recommend you to use method 1 or 2. Because then you can publish your project on a domain WITHOUT changing your code. – edenstrom Jul 11 '13 at 14:17
Ah that's an interesting point. Going back a step - when I upload this site to my host server - how do I get my domain to point to the right place? At the moment, it naturally goes to the index file in my public folder, but presumably, I need to put the entire Laravel folder structure in there. How do you point the URL to the right file? – Ben Thompson Jul 11 '13 at 15:35
1

You want to point to the public directory yes. If you host by yourself, or on a VPS, it can easily be done with the method 2 above. If you host it on a web hosting service, there's probably a "public_html" folder which you can upload to. That's your public folder. Upload the contents of your public directory there, and the rest outside. After that, just change your public path in bootstrap/paths.php. – edenstrom Jul 12 '13 at 08:10

score 0 · Answer 2 · answered Jul 11 '13 at 11:54

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)

How to use Ajax with jQuery in Laravel 4?

2 Answers2

Linked