laravel: ajax request has no response available

Question

I'm new to laravel and I've been stuck for hours with this problem-""This request has no response data available"". I research some related issues but wasn't still able to find solutions.

I have an autocomplete search that displays the list of students within an <a> tag that has a onclick function to show modal with details of the selected student. The autocomplete search is working properly, when I clicked the <a> tag, the modal pops up but doesn't display the selected student's details.

I'm using ajax to fetch student's details and display it on the modal. I checked the Network status and it says "This request has no response data available". How to fix this? any help is highly appreciated.

This is what my autocomplete search looks like, the user will then click on the selected student to open modal and display student's details.

//My route
Route::group(['middleware' => 'auth'], function(){
Route::get('violation_entry', ['as' => 'violation_entry', 'uses' => 'ViolationEntryController@index']);
Route::get('violation_entry/fetch', ['as' => 'violation_entry.fetch', 'uses' => 'ViolationEntryController@fetch']);
Route::get('violation_entry/form', ['as' => 'violation_entry.form', 'uses' => 'ViolationEntryController@form']);});


//(My ViolationEntryController@fetch Controller) 
//this is the searched result that triggers the display of modal when clicked using onclick="violationForm()" 
function foreach($data as $student){
    $output .= '<div class="row">
                    <div class="col-lg-8 col-md-12 col-sm-12" >
                        <a href="#" onclick="violationForm()" id="'.$student->student_id.'" class="violationFormStudent list-group-item list-group-item-action d-flex justify-content-start text-decoration-none">
                            <div class="student_image_div mr-3">
                                <img class="student_img" src="../paper/img/students_images/default_student_image.jpg" alt="Student Image">
                            </div>
                            <div class="student_details_div">
                                <p class="student_name_txt">'.$student->last_name.', '.$student->first_name.'</p>
                                <p class="student_number_txt text-dark">'.$student->student_id.' <span class="text-muted"> | '.$student->course.'-'.$student->section.' | '.$student->school.' </span></p>
                            </div>
                        </a>
                    </div>
                </div>
            '; 
}


//(index.blade.php view) 
//this is the ajax request to fetch student's details and show modal
    <script>
        function violationForm(){
           var query = $(this).attr('id');
           $.ajax({
               url:"{{ route('violation_entry.form') }}",
               method:"GET",
               data:{query:query},
                   success:function(data){
                       $('#violationEntryForm').modal('show');
                       $('#studentDetails').html(data);  
                   }
           });
        };
    </script>


//(My ViolationEntryController@form Controller) 
//get ajax request and fetch student's information
function form(Request $request)
{
    if($request->get('query')){
        $query = $request->get('query');
        $student = Students::where('student_id', $query)->first();

        $output ='
            <div class="student_img_div_modal mr-4">
                <img class="student_img_modal" src="../paper/img/students_images/default_student_image.jpg" alt="">
            </div>
            <div class="student_details_div_modal">
                <p class="student_id_txt_modal">'.$student->student_id.'</p>
                <p class="student_name_txt_modal">'.$student->first_name.' '.$student->last_name.'</p>
                <p class="student_details_txt_modal">'.$student->course.'-'.$student->section.' | '.$student->school.'</p>
            </div>

        ';
        echo $output;
    }
}

This is the expected output for my modal

And this is the Final output where it doesn't display student's information

Below are the screenshots of my Network Status

Why is this ""This request has no response data available"" showing?

make console.log(data) inside success function, and make an error function and console.log(data); so you can see what is going on — lewis4u, May 27 '20 at 17:49
print $request->get('query') & check whether it gets the value or not ! — Abhijit Mali, May 27 '20 at 17:55
lewis4u - the Source Tab on Dev Tool only highlights the console.log(data) on my script but doesn't show any data on the console. — Mitch F. Desierto, May 27 '20 at 18:15

score 0 · Answer 1 · answered May 27 '20 at 17:54

0

In your controller:

return response()->json(['result' => $output]);

In your javascript:

function violationForm(){
           var query = $(this).attr('id');
           $.ajax({
               url:"{{ route('violation_entry.form') }}",
               method:"GET",
               data:{query:query},
                   success:function(data){
                       $('#violationEntryForm').modal('show');
                       $('#studentDetails').html(data.result);  
                   }
           });
        };

And keep in mind that the way you've done the controller, you might get into situations where there is no response!

answered May 27 '20 at 17:54

Nikolay Traykov

1,537
17
26

still has no response data available. – Mitch F. Desierto May 27 '20 at 18:20
Do you get into this if statement at all? – Nikolay Traykov May 27 '20 at 18:21
this is what the console is showing - XHR finished loading: GET "http://127.0.0.1:8000/violation_entry/form". – Mitch F. Desierto May 27 '20 at 18:37
Do you have a debugger? – Nikolay Traykov May 27 '20 at 20:17

score 0 · Answer 2 · answered May 28 '20 at 06:01

I'm not sure what's happening, but the first thing is that you're using the Symfony ->get() method, which is designed for input (POST requests). You need to use $request->query() to get the query string. In your comment above, though, if you pasted the whole thing, it looks like your query string isn't being attached. You need a default return method, as well, for what happens if the id isn't found. I'd wrap it all in a try/catch block, but that's up to whatever you prefer. Adding an else statement would've at least returned an error to your page and not the one you're getting.

score 0 · Accepted Answer · answered May 28 '20 at 09:36

The reason why the Network is telling me that "The Request has no response data available" is that the var query = $(this).attr('id'); is not really getting my <a id="'.$student->student_id.'">, I tried console.log(query); just like what lewis4u said but it returns an UNDEFINED var. I've found an alternative function to get the attribute of my <a> id from this link - JavaScript - onClick to get the ID of the clicked button

so I changed my my <a> tag onClick() function with this onclick="violationForm(this.id)" and changed my script from this:

 <script>
    function violationForm(){
       var query = $(this).attr('id');
       $.ajax({
           url:"{{ route('violation_entry.form') }}",
           method:"GET",
           data:{query:query},
               success:function(data){
                   $('#violationEntryForm').modal('show');
                   $('#studentDetails').html(data);  
               }
       });
    };
</script>

To This:

<script>
    function violationForm(student_id){
        $.ajax({
            url:"{{ route('violation_entry.form') }}",
            method:"GET",
            data:{student_id:student_id},
                success:function(data){
                    $('#violationEntryForm').modal('show');
                    $('#studentDetails').html(data);
                }
        });
    };
</script>

Now its working properly. Thanks ya'll for your answers. Highly appreciated.

laravel: ajax request has no response available

3 Answers3