时间戳

首页 > 解决方案 > jqWidgets：如何在 jqxWindow 中发布 HTML 表单？

javascript - jqWidgets：如何在 jqxWindow 中发布 HTML 表单？

问题描述

我在 Laravel 项目的 jqxWindow 小部件中创建了以下 HTML 表单： 

<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%');

文件 routes\web.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

我的控制器动作：

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 小部件的顶部，作为模式窗口，以便捕获所需的信息并为相应的 DB 表执行 CRUD 操作。

问题是，当我单击“提交”按钮时，窗口关闭，没有其他任何反应。表单未发布到指定的操作，输入的数据会丢失。

我是在initContent内部还是外部初始化submitBtn都没有关系。表格从不张贴。我还尝试了jqxWindow 的Close事件，但无济于事。

如果我看一下生成的 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 路由有关，因为我没有收到任何错误。

这种方法缺少什么或有什么问题？任何光线都值得赞赏。

标签： javascriptphpjquerylaravel

解决方案

好吧，因为我错误地在我的模型中为列添加了一个不需要的验证（在 DB 表级别已经定义了一个约束），所以在保存新记录时不可能完成验证器。我在我的模型中评论了那条线，就是这样！

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语句之前添加了。在那里我阅读了消息并最终找到了解决方案。

推荐阅读