ajax

Recently I started working on project using Laravel. I kinda started loving it. The first problem I encountered was with AJAX. I was submitting a form using Ajax. When the form was submitted, the console was logged with 500 Internal Server Error. I dig the problem.I searched the Google for few hours and then I found the solution. Following are the reasons:

To fix missing CSRF token, just add a hidden field in the form and BOOM!! .Here is the code for you to add to your form:

1. For Blade Template Users:

1

<input type="hidden"name="_token"value="{{ Session::token() }}">

2. For non Blade Users:

1

<input type="hidden"name="_token"value="<?phpSession::token()?>">

3. Directly as ajax data:

1

2

3

4

5

6

varrequest=$.ajax({

url:"script.php",

method:"POST",

data:{_token:<?phpSession::token()?>},

dataType:"html"

});

That’s it, it will solve your problem most of the time. Other reasons that can give you Laravel 500 Internal Server Error problem might be:

Wrong Route:

You may be submitting ajax data to wrong route type and even wrong url (404). So first double check the path you are submitting to. Second, check whether the route accepts “Post” or “Get” data type. Because submitting post data via Get method or vice versa will results in Laravel ajax giving 500 Internal Server Error.

Data Type Returned:

If you are returning Boolean and your ajax code is set for Json or any other data type then chances are that you will stumble up on the internal server error. Try to set data type for all ajax response to json. If you are using jQuery then set dataType to xml, json, script, or html like this:

1

2

3

4

5

6

varrequest=$.ajax({

url:"/action",

method:"POST",

data:{id:userId},

dataType:"json"

});

Cross Domain Configuration:

If you are using ajax for cross domain requests then be sure that you are sending proper headers. In case of jQuery, just set the crossDomain variable to true.Alternatively set dataType to “jsonp”

.htaccess

To be honest, .htaccess contributes to 80% of the web’s 500 internal server errors. Regardless of laravel and ajax. Check your .htaccess file for any error specially after you have edited it.

Syntax Error

If your php file has some error and your hosting provider has configured there servers to give 500 internal server error on all php errors. Then examine your file line by line and find the little bug troubling you.

Directory Permission

In case if the storage directory is not writable by Laravel then it will throw a 500 internal server error. Though this error will occur on all requests to the framework regardless of whether it’s through ajax or not. To fix that, run the following two commands through the command line tool on Ubuntu:

1

2

sudo chmod755-Rlaravel

chmod-Ro+wlaravel/storage

The “laravel” in the above command is the name of the directory where Laravel is installed. For other Linux distros, search for the commands to change the permissions of a directory to make it writable.

The most important thing in fixing your error is to find the cause. If your ajax request gives you 500 internal server error then log the response to console. Alternatively, you can submit a regular form and can see the response of the files. Laravel has good error handling library and it show in details the causative agent.

If your Laravel ajax internal server error still persists, then please let me know in the comments. I will be more than happy to help

As more and more sites are using Ajax to load contents, ajax loaders are getting more and more popular. Web developers usually use .GIF animated images as loaders. Some use SVG images to show a loader while content is loading. With advancement of CSS and with addition of new properties like transform and keyframes, now creating animations in CSS3 isn’t a difficult task. Using CSS, developers have created a lot of loaders.

Today, I saw a Pure css3 build loader at wifeo. The loader is amazing and I thought it would be worth sharing with you guys. Here is the demo: