jQuery AJAX using in Laravel
- Article
- Comment (17)
jQuery AJAX using in Laravel is one of a very useful thing to create interactive applications from the laravel framework. The next level of programming goes with the live results without refreshing and loading again browser.
Here I am going to give you a easy way to use AJAX on your Laravel project , Just follow the steps to create your own.
Let’s begin with Routes, We need to route the variable which we are going to use in our demo.
//Options: show create options form Route::get( '/options/new', array( 'as' => 'options.new', 'uses' => 'OptionsController@add' ) ); //Options: create a new setting Route::post( '/options', array( 'as' => 'options.create', 'uses' => 'OptionsController@create' ) );
Than move to create the view class and to show a form to receive data.
{{ Form::open( array( 'route' => 'options.create', 'method' => 'post', 'id' => 'form-add-a-option' ) ) }} /* Option label to describe the form field */ {{ Form::label( 'option_name', 'Option Name:' ) }} {{ Form::text( 'option_name', '', array( 'id' => 'kv_option_name', 'placeholder' => 'Enter Option Name', 'maxlength' => 20, 'required' => true, ) ) }} /* Get the option value using a textbox */ {{ Form::label( 'option_value', 'Option Value:' ) }} {{ Form::text( 'option_value', '', array( 'id' => 'kv_option_value', 'placeholder' => 'Enter Option Value', 'maxlength' => 30, 'required' => true, ) ) }} //Finally form submit... {{ Form::submit( 'Save Option', array( 'id' => 'btn-add-option', ) ) }} {{ Form::close() }}
Than write the Controller class to take care of the save and creating new option work.
class OptionsController extends BaseController { public function add() { return View::make( 'options/new' ); } public function create() { //check if its our form if ( Session::token() !== Input::get( '_token' ) ) { return Response::json( array( 'msg' => 'Unauthorized attempt to create option' ) ); } $option_name = Input::get( 'option_name' ); $option_value = Input::get( 'option_value' ); $response = array( 'status' => 'success', 'msg' => 'Option created successfully', ); return Response::json( $response ); } }
And Here is the JS function to handle the AJAX calls.
jQuery(document).ready(function($){ $('#form-add-a-option').on('submit', function(){ // ajax post method to pass form data to the $.post( $(this).prop('action'), { "_token": $( this ).find( 'input[name=_token]' ).val(), "option_name": $( '#kv_option_name' ).val(), "option_value": $( '#kv_option_value' ).val() }, function(data){ //response after the process. }, 'json' ); return false; }); });
That’s it. for Laravel ajax calls, Instead of direct php access. We pass the data through AJAX . Try this if you have any doubt comment below.
can i ask how to pass parameters to that ajax request? thanks
From the example itself, i just passed three parameters, “_token, option_value, Option_name “.
Very thanks to you. Nice tutorial
I find it useful. Share more buddy.
Hogshoon bi bas laravel such bga Skype tai yu?
Great. Learn from it. Just make my search must faster.
Hi
Great, simple, clear tutorial, Thanks.
How do you do pass back validation errors to the form via Response::json, and how would you display them in the view?
Will write a post with more detailed one..
Very Useful…..tested Okay…
If we have a form with multiple submit buttons, how we let the Controller Action/JQuery Method know which submit we used? For controller actions I’ve always used if(Input::get(‘button1’)), but that is not working when I include JQuery AJAX.
You can use jQuery form submissions to play with multiple buttons.
I have two tables one of state and second is of city and I have a relation of states with cities and I want to fetch all the cities according to states through ajax. Please tell me how I do it.
I’ll give it a try
After using your code all I got was blank screen and this: {“status”:”success”,”msg”:”Option created successfully”}
How to make the code actually work?
Thx.
Hi, thanks , but how do we retrieve data from ajax In a view file ? do we need to change something while retrieving db row ? Or it stays the same as regular laravel fetching $user->username ?
check the tutorial properly, you can get it.
how do i send the formData with this code?
read this article again. i hope it will help you.