Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

php - Laravel : how to Load Ajax data after selected changes from dropdown?

I want to load some ajax data after selected a value from dropdown in textbox.

Eg: After selecting a teacher from dropdown, teachers remaining credit and credit_taken value should be load. How do I do it with ajax?

NB: Here teacher value has selected from another dropdown selecting in Ajax

<script>
      $('#teacher').on('change',function(e){            
           var teach_id = $('#teacher option:selected').attr('value');

             var info=$.get("{{url('ajax-teach')}}",{teach_id:teach_id});
               info.done(function(data){     
                  $.each(data,function(index,subcatObj){

               /// Here will  be the loaded code   ///

                    });                    
        });

        info.fail(function(){
          alert('ok');
        });
       });
    </script>

Here is my controller:

Route::get('ajax-teach',function(Request $request){ 
        $teach_id = $request::input(['teach_id']);          
        $teachers=\App\Teacher::where('teacher_id','=',$teach_id)->get();
        return Response::json($teachers);   
});

Here is the view Page:

<div class="form-group">
    <label for="">Teacher</label>
    <select class="form-control input-sm" required name="teacher_id" id="teacher" >
    <option value=""></option>
    </select>
</div> 


<div class="form-group">
  <label>Credit to be Taken</label>         
  <input type="text" name="credit_taken" id="credit_taken" class="form-control" required placeholder="Credit to be Taken">
</div>

<div class="form-group">
  <label>Remaining Credit</label>         
  <input type="text" name="remaining_credit" class="form-control" required placeholder="Remaining Credit">
</div>
like image 565
User57 Avatar asked Apr 26 '16 05:04

User57


People also ask

How to auto-populate dropdown with jQuery Ajax in Laravel?

In this tutorial, I show how you can auto-populate dropdown with jQuery AJAX in Laravel. 1. Database Configuration Open .env file. Specify the host, database name, username, and password. 2. Table structure Create departments and employees table using migration and add some records.

How to use Ajax in Laravel?

You need a JavaScript library to send a network request without a page refresh to the server to use Ajax. The ajax request can be GET or POST or other valid types. To use AJAX in Laravel, you need to import a jquery library in your view file to use ajax functions of jquery, which will be used to send and receive data using ajax from the server.

How to auto load data from server or database while scrolling in Laravel?

You need to gradually complete the following steps for creating the feature of auto loading the data from the server or database while scrolling in laravel using jQuery AJAX. Ensure you have the composer tool installed on your system, further open the terminal, and execute the command to create the laravel project.

How to load data from dropdown based on Department selection using Ajax?

Data is loaded in this dropdown based on the department selection using jQuery AJAX. Define on change event on the first dropdown. Read selected value and assign to id variable. Empty the second dropdown except the first <option>.


1 Answers

In your routes (routes/web.php)

Route::get( '/ajaxteach', array(
    'as' => 'ajaxteach',
    'uses' => 'TeachController@get_teach'
) );

In your controller (app/Http/Controllers/TeachController.php)

class TeachController extends Controller
{
    public function get_teach(Illuminate\Http\Request $request)
    {
        $teach_id = $request->get('teach_id');          
        $teachers=\App\Teacher::where('teacher_id','=',$dept_id)->get();
        return response()->json(['response' => $teachers]);
    }
}

Then in your AJAX script you can use at least one of the following ways

  1. use absolute url in javascript code

    var base_url = 'http://localhost/laravel'
    $.ajax({
           type: "GET",
           url : base_url+"/ajaxteach",
           data : dataString,
           success : function(data){
                  console.log(data);
           }
    
  2. use url() with route

    $.ajax({
           type: "POST",
           url : "{{url('ajaxteach')}}",
           data : dataString,
           success : function(data){
                  console.log(data);
           }
    
like image 76
Ehsan Avatar answered Nov 03 '22 02:11

Ehsan