Question

我正在laravel 5中处理电子商务网络应用程序。

我有products表和product_options表，两者都建立了One-To-Many关系。

在管理面板中，我提供了在点击按钮时动态添加产品选项表单的规定，该工作正常。

但是当点击按钮时使用jquery ajax发布表单时，我得到MethodNotAllowedHttpException。

这是route：

Route::post('/admin/products/options', 'ProductsController@storeOptions');

控制器：

public function storeOptions(Request $request)
{
    $this->validate($request, [
        'p_option_item_code' => 'required|alpha_dash|unique:product_options',
        'p_option_details'   => 'string',
        'p_option_price'     => 'required|regex:/^\d*(\.\d{2})?$/',
        'p_option_quantity'  => 'required|integer',
    ]);

    if ( $request->ajax() )
    {
        $request['product_id'] = Session::get('product_last_inserted_id');
        ProductOption::create( $request->all() );

        return response(['status' => 'success', 'msg' => 'The product option has been added successfully.']);
    }
    return response(['status' => 'failed', 'msg' => 'The product option could not be added successfully.']);
}

form：使用jquery

动态创建

<div class="well well-sm">
    <div class="errors"></div>
    {!! Form::open(['url' => ['/admin/products/options'], 'autocomplete' => 'off', 'id' => 'formAddProdOption']) !!}
        <div class="form-group">
            {!! Form::label('p_option_item_code', 'Item Code:') !!}
            {!! Form::text('p_option_item_code', null, ['class' => 'form-control input-sm']) !!}
        </div>
        <div class="form-group">
            {!! Form::label('p_option_details', 'Product Details:') !!}
            {!! Form::textarea('p_option_details', null, ['class' => 'form-control input-sm', 'rows' => 3]) !!}
        </div>
        <div class="form-group">
            {!! Form::label('p_option_quantity', 'Stock:') !!}
            {!! Form::text('p_option_quantity', null, ['class' => 'form-control input-sm']) !!}
        </div>
        // other fields ...

        <div class="form-group">
            {!! Form::submit('Add', ['class' => 'btn btn-primary btn-block btnAddProdOption', 'id' => 'btnAddProdOption']) !!}
        </div>
    {!! Form::close() !!}
</div>

jquery代码：

$('.btnAddProdOption').on('click', function() {
    var inputData = $('#formAddProdOption').serialize();
    $.ajax({
        url: '{{ url('/admin/products/options') }}',
        type: 'POST',
        data: inputData,
        success: function(m) {
            toastr.success(m.msg, 'Successs!');
        },
        error: function( data ) {
            if ( data.status === 422 ) {
                var errors = data.responseJSON;
                var errorsHtml = '<div class="alert alert-danger"><ul>';
                errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
                $.each( errors, function( key, value ) {
                    errorsHtml += '<li>' + value[0] + '</li>';
                });
                errorsHtml += '</ul></div>';
                $( '.errors' ).html( errorsHtml );
            }
        }
    });
    return false;
});

点击事件根本没有被触发。我不知道它为什么不起作用。

有人可以帮帮我吗？

感谢。

Answer 1

如果没有为动态添加的表单触发click事件，则听起来就像在表单本身之前添加事件侦听器一样。尝试通过将侦听器附加到父元素来使用事件委派：

class Test{
  required init(x: Int){
    // Do Something
  }
}

class Builder{
  init(){
  }

  func use<T>(test2: T.Type) -> Void{
    test2(x: 10) // Error: T cannot be constructed because it has no accessible initializers 
  }
}

// Example 1:
let test1 = Test.self
test1(x: 10)

// Example 2:
let builder = Builder()
builder.use(Test.self)

// instead of: $('.btnAddProdOption').on('click', function() { } // try: $('body').on('click', '.btnAddProdOption', function() { }只是一个永远有效的例子，因为一切都在体内;在实践中，您希望将它附加到任何不是动态更改的表单最接近的父元素。

动态创建的表单不在laravel 5中发布ajax

1 个答案: