jqWidgets: Как я могу опубликовать HTML форму внутри jqxWindow?

Question

Я создал следующую HTML форму внутри виджета jqxWindow для проекта Laravel:

<div id="provinceWindow">
    <div id="provinceWindowHeader"></div>
    <div id="provinceWindowContent">
        <form id="provinceForm" method="POST" action="{{route('province.store')}}">
            {{ csrf_field() }}
            <input type="hidden" name="provinceId" id="provinceId" value=""/>
            <div class="form-group row">
                <div class="col-6"><label>English province name</label></div>
               <div class="col-6"><input type="text" name="provinceNameEn" id="provinceNameEn" maxlength="20"/></div>
            </div>
            <div class="form-group row">
                <div class="col-6"><label>Spanish province name</label></div>
                <div class="col-6"><input type="text" name="provinceNameSp" id="provinceNameSp" maxlength="20"/></div>
            </div>
            <br/>
            <div class="form-group row justify-content-center">
                <input type="button" value="Submit" id="submitBtn" class="btn btn-sm col-3" />
                <span class="spacer"></span>
                <input type="button" value="Cancel" id="cancelBtn" class="btn btn-sm col-3" />
            </div>
        </form>
    </div>
</div>

Это файл javascript:

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


    //-----------------------------
    // Window settings
    //-----------------------------

    $('#provinceWindow').jqxWindow({
        autoOpen: false,
        isModal: true,
        width: 400,
        height: 160,
        resizable: false,
        title: 'Province name',
        cancelButton: $('#cancelBtn'),
        initContent: function () {
            $('#submitBtn').jqxButton();
            $('#submitBtn').on('click', function () {
                $('#provinceForm').submit();
            });
        }
    }).css('top', '35%'); 

Файл маршруты \ веб. php имеет только один ресурсный маршрут, определенный для этой страницы:

// Routes for province maintenance
Route::resource('province', 'provinceController');

Проверяя доступные маршруты с помощью команды php artisan route:list, я получаю следующие данные:

Method     URI                       Name              Action                                         
GET|HEAD   /                                           APP\Http\Controllers\homeController@index      
GET|HEAD   province                  province.index    APP\Http\Controllers\provinceController@index  
POST       province                  province.store    APP\Http\Controllers\provinceController@store  
GET|HEAD   province/create           province.create   APP\Http\Controllers\provinceController@create 
GET|HEAD   province/{province}       province.show     APP\Http\Controllers\provinceController@show   
PUT|PATCH  province/{province}       province.update   APP\Http\Controllers\provinceController@update 
DELETE     province/{province}       province.destroy  APP\Http\Controllers\provinceController@destroy
GET|HEAD   province/{province}/edit  province.edit     APP\Http\Controllers\provinceController@edit 

My действие контроллера:

public function store(Request $request)
{
    $fields = $request->all();
    if ($request->provinceId == '') { 
        $province = new province($fields);
        $validator = Validator::make($fields, $province->rules());
        if ($validator->fails()) {
            return redirect('')->withErrors($validator)->withInput();
        } 
        else {
            $province->save();
        }
        return view('province/index');
   }
}

Форма отображается в верхней части виджета jqxGrid в виде модального окна для сбора необходимой информации и выполнения операций CRUD для соответствующей таблицы БД.

Проблема в том, что когда я нажимаю кнопку «Отправить», окно закрывается, и больше ничего не происходит. Форма не отправлена ​​на указанное действие и введенные данные теряются.

Не имеет значения, если я инициализирую submitBtn внутри initContent или вне его. Форма никогда не размещается. Я также попытался Закрыть событие jqxWindow безрезультатно.

Если я взгляну на сгенерированный HTML, это выглядит так:

<form id="provinceForm" method="POST" action="http://mis:8080/province">
    <input type="hidden" name="_token" value="Y9dF5PS7nUwFxHug8Ag6PHgcfR4xgxdC43KCGm07">
    <input type="hidden" name="provinceId" id="provinceId" value="">
    <div class="form-group row">
        <div class="col-6">
            <label>English province name</label>
        </div>
        <div class="col-6">
            <input type="text" name="provinceNameEn" id="provinceNameEn" maxlength="20">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-6">
            <label>Spanish province name</label>
        </div>
        <div class="col-6">
            <input type="text" name="provinceNameSp" id="provinceNameSp" maxlength="20">
        </div>
    </div>
    <br>
    <div class="form-group row justify-content-center">
        <input type="button" value="Submit" id="submitBtn" class="btn btn-sm col-3 jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal" role="button" aria-disabled="false">
        <span class="spacer"></span>
        <input type="button" value="Cancel" id="cancelBtn" class="btn btn-sm col-3">
    </div>
</form>

Нажатие кнопки «Отправить» возвращает меня на домашнюю страницу, и в таблицу БД ничего не добавляется. Я думаю, что проблема связана с Laravel маршрутами, потому что я не получаю ошибок.

Что отсутствует или что не так с этим подходом? Любой свет ценится.

Answer 1

Хорошо, потому что я ошибочно добавил в свою модель проверку, которая не была необходима, для столбца (уже было ограничение, определенное на уровне таблицы БД), было невозможно выполнить валидатор при сохранении новой записи , Я прокомментировал эту строку в моей модели и это все!

protected $rules = array(
    'provinceNameEn'  => 'required|alpha|max:20',
    'provinceNameSp' => 'required|alpha|max:20'
    //'deleted' => 'required|in:M,F'  // This is already validated in a DB constraint.
);

Я заметил, что элемент управления был возвращен на мою домашнюю страницу, но без каких-либо сообщений или ошибок, но если вы обратили внимание на мой контроллер, это было точно поведение запрограммировано. Однако нет никакой реализации для отображения сообщений об ошибках, поэтому я добавил dd($validator); перед этим return оператором. Там я прочитал сообщение и наконец нашел решение.