Send Data Ajax to Controller and assign to modal box [laravel]

Question

<script type="text/javascript">$('#myModal').on('show.bs.modal', function(e) {  var csrf = '<?php echo csrf_token() ?>';
var $modal = $(this),
    Id = e.relatedTarget.id;
    var url= 'showmodal';
    $.ajax({
        cache: false,
        type: 'post',
        url: url,
        data:  { 'EID': Id,'_token': csrf },
        success: function(data) {
            alert(data);
            $modal.find('.modal-body').html(data);
        }
    });
});</script>

controller method

public function showmodal()
{
    $EID = $_POST['EID'];
    $stud_details= Student::find($EID);
    //return $stud_details; 
    return view('student.index',compact('stud_details'));
}

Route

Route::get('showmodal', 'StudentController@showmodal'); Route::post('showmodal', 'StudentController@showmodal');

view

<a href="javascript:void(0)" id="{{ $student->id }}" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a>
         <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Student Details</h4>
          </div>
          <div class="modal-body">
          @if ($stud_details!= '')
                <table class="table table-bordered">
                    <tr><td>{{ Form::label('name', 'Name:') }}</td><td>{{ $stud_details->name}}</td></tr>
                    <tr><td>{{ Form::label('rollno', 'RollNo:') }}</td><td>{{ $stud_details->rollno}}</td></tr>
                    <tr><td>{{ Form::label('dept', 'Department:') }}</td><td>{{ $stud_details->department}}</td></tr>
                    <tr><td>{{ Form::label('course', 'Course:') }}</td><td>{{ $stud_details->course}}</td></tr>
                </table>
          @endif 
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

i need to show the modal box with student details.but ajax post is not working.i am already return student array from index method so if i am return stud_details array it displays student is undefined.. i dont know..

When you submit ajax request through post method you need to pass CSRF token to validate request. — user4094161
– user4094161, Commented Mar 14, 2017 at 12:59
Generally what I do if I am making a lot of ajax calls like that, I will set the headers before hand with $.ajaxSetup({headers:{ 'X-XSRF-TOKEN': $('meta[name="_token"]').attr('content')}}) — z1haze
– z1haze, Commented Mar 14, 2017 at 13:01
thanks..now ajax post work...then how to set data to modal box.. — Chandhru Sekar
– Chandhru Sekar, Commented Mar 14, 2017 at 13:05
You can return inserted data from laravel controller's method and append that data to laravel model popup using jquery. — user4094161
– user4094161, Commented Mar 14, 2017 at 13:11
Dude, you are not using laravel built-in tools like Blade or Request helper.. Please read their documentation — Shady Atef
– Shady Atef, Commented Mar 14, 2017 at 13:21

Onix · Accepted Answer · 2017-03-14 13:45:54Z

1

you should have a different fucntion to load your view, and different one to get the data..

to retrieve your student do this:

Route:

Route::get('showmodal', 'StudentController@getStudent');

StudentController

public function getStudent()
{
    $EID = $_POST['EID'];
    $stud_details= Student::find($EID);
    return $stud_details;   //just return the value not the View
}

AJAX

$.ajax({
    cache: false,
    type: 'get',
    url: url,
    data:  { 'EID': Id,'_token': csrf },
    success: function(data) {
        alert(data);
        $modal.find('name').html(data['name']);
        $modal.find('rollno').html(data['email']);
          ........
    }
});

The idea is that you send the data back to the ajax and get every field of your modal to load each value in.

answered Mar 14, 2017 at 13:45

Onix

2,1992 gold badges19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saran · Accepted Answer · 2017-03-15 12:35:39Z

blade page use this meta code and make ajax request

<meta name="csrf-token" content="{{ csrf_token() }}">

Ajax

$.ajaxSetup({

 headers: {
 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}         
});
$.ajax({
    cache: false,
    type: 'post',
    url: url,
    data:  { 'EID': Id},
    success: function(data) {
        alert(data);
        $modal.find('name').html(data['name']);
        $modal.find('rollno').html(data['email']);
          ........
    }

if you using ajax request to controller don't use return view so change

return view

to

return json_encode('stud_details')

controller i made some changes pls refer

public function showmodal(){
$EID = $_POST['EID'];
$stud_details= Student::find($EID);
//return $stud_details; 
return json_encode('stud_details');}

Collectives™ on Stack Overflow

Send Data Ajax to Controller and assign to modal box [laravel]

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related