Crud operation using Ajax not working in Laravel 7.3 version

Viewed 78

I am trying create an ajax crud in Laravel, I have used yazra datatable here, which is working fine and fetching data nicely. But when trying to insert a data, it does nothing (though there is no error). enter image description here

my codes for they form is (some form elements are removed in order to comply with stackoverflow's "mostly code" issue ) :

<form class="m-form m-form--fit m-form--label-align-right"  action="" method="post" 
    id="addBootcamp" enctype="multipart/form-data">

        <div class="m-portlet__body">

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                    <div class="form-group  m-form__group {{ $errors->has('course_type') ? 
                  'has-danger' : '' }}">
                        <label class="form-control-label"><span class="text-danger">*</span> 
                       Course Type </label>
                        <select class="form-control m-bootstrap-select m_selectpicker" 
                         name="course_id" id="course_type">
                            <option value="">---- Select ----</option>
                            <option value="1">Cyber Security Awareness</option>
                            <option value="0">Others</option>
                        </select>
                        @if ($errors->has('course_type'))
                            <div class="form-control-feedback">{{ $errors- 
                        >first('course_type') }}</div>
                        @endif
                    </div>
                </div>
        
                <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                    <div class="form-group  m-form__group {{ $errors->has('end_date') ? 'has- 
                       danger' : '' }}">
                        <label class="form-control-label"><span class="text-danger">*</span> 
                       {{__('course.end_date')}} </label>
                        <input id="end_date" type="text" class="form-control m-input 
                       m_datepicker_1 clear" name="end_date" value="{{ old('end_date') }}" 
                       placeholder="{{__('course.end_date')}}" autocomplete="off"/>
                        @if ($errors->has('end_date'))
                            <div class="form-control-feedback">{{ $errors->first('end_date') 
                        }}</div>
                        @endif
                    </div>
                </div>

             
                <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                    <div class="form-group  m-form__group">
                        <label class="form-control-label"> {{__('bootcamp.bootcamp_image')}} 
                      </label>
                        <input id="bootcamp_image" type="file" class="form-control-file clear" 
                     name="bootcamp_image">
                    </div>
                </div>
            </div>
        </div>
        <div class="m-portlet__foot m-portlet__foot--fit">
            <div class="m-form__actions text-center">
                <a href="{{ route('course.index') }}" class="btn btn-outline-brand"><i 
            class="fa fa-times"></i> {{__('common.cancel')}}</a>
                <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> 
            {{__('common.save')}}</button>
            </div>
        </div>
    </form>

Codes for ajax Functionality are :

$(document).ready(function(){

function clearData(){
    $('.clear').val('');
}

//-------------------------------------------Add a Bootcamp----------------------------------- 
  --------

$('#addBootcamp').on('submit',function(event){
    event.preventDefault();

    let course_id = $('#course_type').val();
    let bootcamp_event_title = $('#bootcamp_event_title').val();
    let location = $('#location').val();
    let event_start = $('#event_start').val();
    let event_end = $('#event_end').val();
    let availability = $('#availability').val();
    let status = $('#status').val();
    console.log(course_id);
    $.ajax({
        url : '../../admin/add-bootcamp',
        type : 'POST',
        data : {
            course_id : course_id,
            bootcamp_event_title : bootcamp_event_title,
            location : location,
            event_start : event_start,
            event_end : event_end,
            availability : availability,
            status : status,
        },
        success : function(response){
            console.log(response);
            clearData();
        },
    })
});

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
   });
});

Routes are :

Route::get('admin/bootcamp/get-data', 'AdminBootcamp@getData');
Route::get('admin/bootcamp/create', 'AdminBootcamp@getData');
Route::resource('admin/bootcamp','AdminBootcamp');
Route::get('admin/bootcamp','AdminBootcamp@index');
Route::post('admin/add-bootcamp','AdminBootcamp@store');

Codes from my method :

public function store(Request $request){
    if($request->ajax()) {
        AdminBootcamp::create([
            'course_id' => $request->course_id,
            'bootcamp_event_title' => $request->bootcamp_event_title,
            'location' => $request->location,
            'event_start' => $request->start_date,
            'event_end' => $request->end_date,
            'availability' => $request->availability,
            'status' => $request->status_id,
            'bootcamp_image' => $request->bootcamp_image,
        ]);

        $msg = 'success !';

        echo json_encode($msg);
    }

}

Model :

<?PHP

namespace App\Model\admin;

use Illuminate\Database\Eloquent\Model;

 class AdminBootcamp extends Model
{
    public $timestamps = false;
    protected $table = 'bootcamps';
    protected $fillable =

    ['course_id','bootcamp_event_title','location','event_start',
   'event_end','availability','status'];
 }
0 Answers
Related