How to save data from a modal using ajax in Laravel?

Question

I'm trying to save the data from a modal into the database and here is what I've tried. Modal shows, form shows, however when I try to save the data nothing happens. In the console I get 2 errors

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
Failed to load resource: the server responded with a status of 422 (Unprocessable Entity).

Modal

<div class="modal fade" id="todolist-modal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="todo-list-tile">Add New Todo</h2>
            </div>
            <div class="modal-body" id="todo-list-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="todo-list-save-btn">Save changes</button>
            </div>
        </div>
    </div>
</div>

JavaScript

$('#todo-list-save-btn').click(function(event) {
    event.preventDefault();

    var form = $('#todo-list-body form'),
    url = form.attr('action'),
    method = 'POST';

    form.find('.help-block').remove();
    form.find('.form-group').removeClass('has-error');

    $.ajax({
        url: url,
        method: method,
        data: form.serialize(),
        success: function(response) {

        },

        error: function(xhr) {

            var error = xhr.responseJSON;
            if ($.isEmptyObject(error) == false) {

                $.each(error.errors, function(key, value) {
                    $('#' + key)
                        .closest('.form-group')
                        .addClass('has-error')
                        .append('<span class="help-block"><strong>' + value + '</strong></span>')

                });
            }
        }
    });

Form

<div class="alert alert-success" id="add-new-alert" style="display:none"></div>


{!! Form::model($todoLists, ['route' => 'todolists.store']) !!}
    @csrf

    <div class="form-group">
        <label for="" class="control-label">List Name</label>
        {!! Form::text('title', 
                null, 
                [
                    'class' => 'form-control',
                    'id' => 'item',
                    'placeholder'=>'item'
                ]
            ) 
        !!}
    </div>
    <div class="form-group">
        <label for="" class="control-label">Description</label>
        {!! Form::textarea('description', 
                null, 
                [
                    'class' => 'form-control', 
                    'id' => 'description', 
                    'placeholder'=>'description',
                    'rows' => 2
                ]
            ) 
        !!}
    </div>
{!! Form::close() !!}

Route

Route::resource('todolists', 'TodoController');

Controller

public function create()
{
    $todoLists = new Todo();
    return view ('admin.todo.form', compact('todoLists'));
}

/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(Request $request)
{
    $this->validate($request, [
        'title' => 'required|min:5',
        'description' => 'min:5'
    ]);

    $todoList = $request->user()
                    ->todoLists()
                    ->create($request->all());

    return view("todolists.item", compact('todoList'));
}

are you getting data into the controller method that is `TodoController@update` — ManojKiran A, Jun 13 '19 at 11:00
Thanks so much for responding. No I'm trying to lode it into into store. I'll include the controler — Simona Buga, Jun 13 '19 at 11:03
422 seems to be cors issue... make sure you have added the required header. https://stackoverflow.com/questions/33076705/laravel-5-1-api-enable-cors — Vikash Pathak, Jun 13 '19 at 11:07
the controler works and I've added the cors issue, I get the same errors — Simona Buga, Jun 13 '19 at 11:14
I don't see the form within `#todo-list-body` element. Any JS errors in console? — Tpojka, Jun 13 '19 at 13:08

score 0 · Answer 1 · answered Jun 14 '19 at 11:09

Please check your Todolists model
In your Todolists model Class:

protected $fillable = ['title', 'description'];

like:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Todolist extends Model
{
    protected $fillable = ['title', 'description'];
}

Because you use create() method,
and check your columns again to make sure that your datas can be insert into the database.

score -2 · Answer 2 · edited Jun 13 '19 at 11:36

-2

$todoList = $request->user()
                ->todoLists()
                ->create($request->all());

How are you config the relations in the Models?

edited Jun 13 '19 at 11:36

Lakhwinder Singh

5,536
5
27
52

answered Jun 13 '19 at 11:31

Hans

17
5

Thanks so much for responding, it is a simple one table. I'm trying to learn how to save data with ajax. – Simona Buga Jun 13 '19 at 11:55
Sorry I did not make it clear. I mean you can check the relations because it might be the cause of the 500 internal error – Hans Jun 14 '19 at 02:16
Thank you for responding, I removed the relationship and now I'm getting a 419 error – Simona Buga Jun 14 '19 at 08:24

How to save data from a modal using ajax in Laravel?

2 Answers2