Question

我在表单中添加了一个我想跟踪的特殊ID。如果表单中有此ID，则应初始化AJAX请求。

表格

        {!! Form::open(['data-remote', 'action' => 'IncidentsController@store', 'id'=>'incidentEntryForm']) !!}
        <div class="form-group">
            {!! Form::label('city', 'Name:') !!}
            {!! Form::text('city', null, ['class' => 'form-control']) !!}
        </div>
(...)

因此我写了这个帮助脚本：

帮助程序脚本

(function() {
    console.log("Helper OK");

    var submitAjaxRequest = function(e) {
        var form = $(this);
        var method = form.find('input[name="_method"]').val() || 'POST';

        $.ajax({
            type: method,
            url: form.prop('action'),
            data: form.serialize(),
            success: function() {
                console.log("Submit OK");
                $.publish('form.submitted', form);
            }
        })
        e.preventDefault();
    };

    // forms marked with the "data-remote" attribute will submit, via AJAX.
    $('form[data-remote]').on('submit', submitAjaxRequest);
})();

$.publish也是PubSub功能的简短脚本。

PubSub的

(function($) {
    console.log('PubSub OK');
    var o = $({});

    $.subscribe = function() {
        o.on.apply(o, arguments);
    };

    $.unsubscribe = function() {
        o.off.apply(o, arguments);
    };

    $.publish = function() {
        o.trigger.apply(o, arguments);
    };
}(jQuery));

但是当我按下提交按钮时，帮助脚本的最后一行似乎没有反应。函数submitAjaxRequest永远不会被调用。

该脚本包含在我的头部。为了检查是否已加载，我在开头包含了console.log。我看到了输出。我觉得它正在运行。但它没有对表格中提交的新闻做出反应。

更新1 当我尝试拨打submitAjaxRequest()时，我收到错误：Uncaught TypeError: Cannot read property 'preventDefault' of undefined

更新2 生成的表单代码如下：

<form method="POST" action="http://dev.server.com/incidents" accept-charset="UTF-8" data-remote="data-remote" id="incidentEntryForm"><input name="_token" type="hidden" value="<TOKEN>">
        <div class="form-group">
            <label for="city">Notrufort:</label>
            <input class="form-control" name="city" type="text" id="city">
        </div>

        <!-- Latitude Form Input -->
        <div class="form-group">
            <label for="street">Stra&szlig;e:</label>
            <input class="form-control" name="street" type="text" id="street">
        </div>

        <!-- Notruftyp Form Input -->
        <div class="form-group">
            <label for="type">Notruftyp:</label>
            <select class="form-control" id="type" name="type"><option value="1">CPR</option></select>
        </div>

        <!-- Notruf erfassen Form Input -->
        <div class="form-group">
            <input class="btn btn-primary form-control" type="submit" value="Notruf erfassen">
        </div>

        </form>

更新3 我在闭包的开头插入了一个console.log：

var submitAjaxRequest = function(e) { console.log("submitAjaxRequest OK");(...)

正在调用该函数。控制台打印消息。所以我认为这件事有问题。

更新4 所以我尝试使用pubSub系统来监听这个事件。所以我

function reverseGeoCode() {
    $.subscribe('form.submitted', function() {
        console.log("OK");
    })
}

但是当我点击控制台中的提交按钮时没有反应。我在页面上其他地方的不同脚本中使用了此功能。它不应该对发布做出反应吗？

提交表单时的AJAX请求

0 个答案: