Level 88
You're doing a POST request to url :'/CRD', however that is a get route in your web.php file
Route::get('/CRD',['as'=>'CRD','uses'=> 'CRDController@index']);
Instead you need to do a get request
Mar 10, 2019
7
Level 1
AJAX GET REQUEST USING LARAVEL
My objective is to show data from database depending upon the dropdown value i select in the same page. Error:: POST method not allowed
I was able to display data in different page but i failed when it comes to the same page in a different div section. Please help me out
My CRD.blade.php
<!DOCTYPE html>
<html>
<head>
<title>ROBOTICS DESK</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>ROBOTICS</h1>
<form id="myform">
EVent Name <select name="event" id ="event">
<option value="" selected="selected">--- Please select ---</option>
<option id="R1" value="Infinity War">Infinity War</option>
<option id="R2" value="Terrestrial Terrain">Terrestrial Terrain</option>
<option id="R3" value="Robo Rugby">Robo Rugby</option>
<option id="R4" value="Sputnik">Sputnik</option>
</select>
<input type="button" name="submit" class="button" value="CHECK TEAM REGISTERED" onclick="check()"><br><br>
<div id="data"></div> <br>
</form>
<script>
function check()
{
var str="SOMETHING IS WRONG";
var event=$("#event").val();
$.ajax({
url :'/CRD',
type:'POST',
dataType:'html',
data :{
'action':'generate',
'event':event,
},
success:function(data){
if(str==data){
$('#data').html(data);
//$('#myform')[0].reset();
}
else{
$('#data').html(data);
//$('#myform')[0].reset();
}
}
});
}
My Controller
<?php
namespace App\Http\Controllers;
use Illuminate\Contracts\Database;
use Illuminate\Support\Facades\DB;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Response;
class CRDController extends Controller
{
public function index()
{
//
return view("CRD");
}
public function mycrd(Request $request)
{
$data = DB::table('rd1')->where([
['domain', '=', $request->domain],
['event', '=', $request->event],
])->get();
dd($data);
}
}
My Routes
//CRD
Route::get('/CRD',['as'=>'CRD','uses'=> 'CRDController@index']);
Route::post('/mycrd',['as'=>'mycrd','uses'=> 'CRDController@mycrd']);
Level 1
@BOBBYBOUWMANN - How to return this database data to ajax?to print it within the div
Level 1
@BOBBYBOUWMANN - But sir .. how can i use same GET routes for two different functions. I want to display data on same page.
Level 67
change
dataType:'html',
tojson in your ajax settings, and return $data; in the controller instead of dd(). If for some reason that doesn't work (you might not have headers set properly), use return response()->json($data); to force a json response. Laravel normally does that automatically if it's an ajax request.
In the ajax success event, put a console.log(data); as very first thing before the if() and check output for troubleshooting.
Level 88
You're still using the wrong url here...
Level 5
if(request()->wantsJson()) // or request()->isXmlHttpRequest() depending on your headers
return response()->json([]);
else
return view()
in reply to using the same route for a view and an xmlHttpRequest
Level 1
Hello, I had the same problem. I was developing my first school project in laravel. school has 700+ students. when i add result and select student from dropdown it was listing all 700+ users. Then I decided to put two dropdowns 1st for the grades that displays all grades, 2nd for students. when user select a grade from grade dropdown the students dropdown is populated. there are around 30,40 students in each grade.
this is how i achieved this.
Grade Select
<div class="form-group">
<label for="grade-id">Grades</label>
<select class="custom-select form-control-sm" id="grade-id" name="grade_id" onchange="gradeChannge()">
<option value="">-- Please select --</option>
@foreach( $grades as $grade )
<option value="{{ $grade->id }}" {{ old('grade_id') == $grade->id ? 'selected' : '' }}>{{$grade->grade_name}} - {{$grade->grade_section}}</option>
@endforeach
</select>
</div>
Students Select
<div class="form-group">
<label for="student-id">Student</label>
<select class="custom-select form-control-sm{{ $errors->has('student_id') ? ' is-invalid' : '' }}" id="student-id" name="student_id">
<option value="">-- Select Grade First --</option>
</select>
@if ( $errors->has('student_id') )
<div class="invalid-feedback">{{ $errors->first('student_id') }}</div>
@endif
</div>
JavaScript at the end of file
<script>
var gradeSelect = document.getElementById('grade-id');
var studentSelect = document.getElementById('student-id');
function gradeChannge()
{
var ajaxUrl = "{{ route('api.v1.grades.students.index', -1 ) }}";
if ( gradeSelect.value !== '' ) {
ajaxUrl = ajaxUrl.replace('-1', gradeSelect.value);
jQuery.ajaxSetup({
headers: {
'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
}
});
jQuery.ajax({ url: ajaxUrl })
.done(function( response ) {
studentSelect.innerHTML = '<option value="">-- Select Student --</option>';
response.data.map( function ( student ) {
var option = document.createElement('option');
option.appendChild( document.createTextNode( student.rollNumber + " - " + student.name ) );
option.value = student.id;
studentSelect.appendChild(option);
});
});
}
}
</script>
API Route
Route::get('grades/{id}/students', 'GradeController@studentsShow')->name('api.v1.grades.students.index');
GradeController
public function studentsShow($id)
{
$grade = Grade::find($id);
return new StudentCollection($grade->students);
}
Student Collection
public function toArray($request)
{
$students = array();
foreach ($this->resource as $student) {
$students[] = array(
'id' => $student->id,
'name' => $student->name,
'rollNumber' => $student->roll_number
);
}
return $students;
}
I hope this will help you and someone else.
Please or to participate in this conversation.