how to do ajax in laravel

Hi @khader ,

AJAX in Laravel is no different from AJAX in other frameworks.

Do you have some code that shows what you have tried so far?

Many ways to handle this but the idea is to make an Ajax request using your preferred JavaScript library, eg. using jquery

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Be sure to have a route set up to handle it in your routes file. Then in a controller method, do the logic to get what you need and return the data like

public function getData($id) {
  $data = Person::find($id);
  return->response()->json(['status' => 'success', 'data' => $person], 200);
}

Then use that data in the 'success' part of your Ajax function to populate the form or whatever.

Hope that helps.

Thanks @Reached , @clay for u r great help...

I will try and get back u...

hi

the following is my code..

1.javascript methid in view:

<script>
function  function_imei(){

 var selected_imei = document.getElementById('selectImei').value;

  $.ajax({
      url: '/info/' + selected_imei,
      type: 'get',
      data: {},
      success: function(data) {
       if (data.success == true) {
         $("#iname").value = data.info;
         alert("sucecess");
       } else {
         alert('Cannot find info');
       }
   }
   });
}
</script>

2.Controller:

  public function getInfo($id)
     {
       $fill = DB::table('register_devices')->where('imei_number', $id)->get();

       return Response::json(['success'=>true, 'info'=>$fill]);
     }

3:route:

Route::get('infos/{id}', 'GpsPageController@getInfo');

when selecting dropdown i am not getting any response ...please help me to solve issue.....

@khader

Change this line

url: '/info/' + selected_imei,

to

url: '/infos/' + selected_imei,

Hi

   @tomo_pongrac , 

         Thank u for u r help.  I changed 

 url: '/info/' + selected_imei, to  url: '/infos/' + selected_imei, 

Still i am not getting any response.. I think my ajax method is not correct... can u help anyone..

@khader

did you bind event handler

https://api.jquery.com/change/

$('#selectImei').change(function(){

    var selected_imei = document.getElementById('selectImei').value;

   // You can perform an ajax request using the .ajax() method
   $.ajax({
       type: 'GET',
     url: '/info/' + selected_imei,



      success: function(data) {
       if (data.success == true) {
         $("#iname").value = data.info;
         alert("sucecess");
       } else {
         alert('Cannot find info');
       }
   }
    });

});

Hi,

@tomo_pongrac

yes.I binded.The following is select form..

 <div class="control-group">                               
                                          <select id="selectImei" name="opttest" onchange="function_imei()">
                                               <option value="select imei number">select imei number</option>
                                               @foreach($imei_List as $user_im)                                                                      
                                               <option name="optvalue"> {{$user_im->imei_number}} </option>
                                               @endforeach               
                                            </select>       
                                         </div> 

@khader

you select element is invalid

check http://www.w3schools.com/tags/tag_select.asp

<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

You have to define what variable to sent to controller

...
$.ajax({
      url: '/info/' + selected_imei,
      type: 'get',
      data: {
        id: $('#id').val()
        },
...

@tomo_pongrac

                                 <select id="selectImei" name="opttest">
                                               <option value="select imei number">select imei number</option>
                                               @foreach($imei_List as $user_im)                                                                      
                                       <option name="optvalue" value="{{$user_im->imei_number}}"> {{$user_im->imei_number}} </option>
                                               @endforeach               
                                 </select>  

can u tell me what is wrong with select...please

Remove name from code bellow

<option value="{{$user_im->imei_number}}"> {{$user_im->imei_number}} </option>

@tomo_pongrac

yah. I removed name.. but still not getting any response . I tested with alert box , im getting alert inside method.

please help to solve this issue

Which alert exactly did you get ... did you try with

alert(data);

@tomo_pongrac

      yah.i tried    alert(data)  inside ajax ...i am not getting anything..

Open console a see errors

Did you load jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

and try this code

<script>
    function  function_imei(){
        alert("function called");
        var selected_imei = document.getElementById('selectImei').value;
        alert("Value:" + selected_imei;

        $.ajax({
            url: '/infos/' + selected_imei,
            type: 'get',
            data: {},
            success: function(data) {
                alert(data);
            }
        });
    }
</script>

@tomo_pongrac

I applied u r code , i m getting only first two alert...

I think in route have problem ..please verify

my route is:

Route::get('getInfo{id}', 'GpsPageController@getInfo');


Controller:

public function getInfo($id)
     {
       $fill = DB::table('register_devices')->where('imei_number', $id)->get();

       return Response::json(['success'=>true, 'info'=>$fill]);
     }


view (ajax):

<script>
    function  function_imei(){
        alert("function called");
        var selected_imei = document.getElementById('selectImei').value;
        alert("Value:" + selected_imei);

        $.ajax({
            url: 'getInfo/' + selected_imei,
            type: 'get',
            data: {},
            success: function(data) {
                alert(data);
            }
        });
    }
</script>

Route must be

Route::get('getInfo/{id}', 'GpsPageController@getInfo');

@tomo_pongrac

  yah.  Route is same as what u mentioned above.

Add slash in code

url: '/getInfo/' + selected_imei,

@tomo_pongrac

Yah .. I added / in url: '/getInfo/' + selected_imei, but still no response...

What does Google Chrome console say

https://developer.chrome.com/devtools/docs/console

@tom_pongrac

Good Afternoon...

In conslole Im getting following error..

"NetworkError: 404 Not Found - http://localhost/getInfo/334443"

You local server dont working ... can you load home page of that laravel project and which link is that

http://localhost/laravel/GpsTrack/public/ .....

This is the my home page.The page is didplaying fine.

Add this to link in ajax call

url: '/laravel/GpsTrack/public/getInfo/' + selected_imei,

@tomo_pongrac

Thanks...

Now url is ok ..

In   alert(data)   i am getting  object Object ...  how i can get actual data

Try

data.info

or

data.info.name-of-field

Ajax code :

 $.ajax({
            url: '/laravel/GpsTrack/public/getInfo/' + selected_imei,
            type: 'get',
            data: {},
            success: function(data) {            
                alert(data.info.imei_number);
            }
        });

1: I am getting alert as undefined

case 2: alert(data.info); and alert(data) - I am getting object Object

Controller:

public function getInfo($id)
     {
      $fill = DB::table('register_devices')->where('imei_number', $id)->get();
       
       return Response::json(['success'=>true, 'info'=>$fill]);
     }

instead alert put this command and look at console

console.log(data.info);