Question

我试图在jQuery-ui选项卡中第一次使用jQuery form插件。我可以将表单加载到选项卡中并提交表单。请求成功完成，数据按计划添加到数据库。当它重定向到表单的干净版本时，HTML再次被放入选项卡中，但是我收到一个javascript错误：$ is not defined引用了首先在表单页面上使用jQuery的行。

我假设还有一些我尚未发现的魔法。如果它第一次工作，它应该第二次工作，不应该吗？

这就是我现在正在做的事情：

我的表格

<div id="new-shift" class="${type.name}">

    <h2 id="crudBlankTitle">&{'crud.blank.title', type.modelName}</h2>

    <div class="objectForm">
    #{form action:@create(), id: 'new-shift-form', enctype:'multipart/form-data'}
        #{crud.form /}
        <p class="crudButtons">
            <input type="submit" name="_save" value="&{'crud.save', type.modelName}" />
            <input type="submit" name="_saveAndAddAnother" value="&{'crud.saveAndAddAnother', type.modelName}" />
        </p>
    #{/form}
    </div>

</div>

通过ajax

加载到jQuery-ui tabs元素中

<div id="tabs">
<ul>
    <li>#{a @Shifts.blank()}<span>New Shift</span>#{/a}</li>
    <!-- above line renders as 
    <li><a href="/shifts/new"><span>New Shift</span></a></li>
    -->
</ul>
</div>

并且一旦加载，就会应用Form插件

<script>
$(function() {
        var tabs = $("#tabs");
        tabs.tabs({
                load: function (event, ui) {
                    $('#new-shift-form').ajaxForm({
                        target: '#new-shift'
                    });
                }
        });
});
</script>

更新：我现在也尝试使用ajaxSubmit，但结果是一样的。第二次加载时“$未定义”。使用live而不是在加载时应用表单插件也无济于事。我真的不知道接下来会尝试什么。

$('#new-shift-form').live("submit", function() {
    $(this).ajaxSubmit({
        target: '#new-shift',
        clearForm: true,
        replaceTarget: true
    });
    return false;
});

Answer 1

您尝试获取响应的页面可能包含具有相同ID的元素，创建重复的ID并弄乱提交。

第二次使用时jQuery.form插件的问题

1 个答案: