2011-06-23 16 views
0

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

我假设我还没有发现某种魔法。如果它第一次工作,它应该第二次工作,不是吗?


下面是我在做什么现在:

我的形式

<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

<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> 
装入一个jQuery UI的标签元素

和一次它的加载这个插件应用

<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; 
}); 

回答

-1

您试图从中获取响应的页面可能包含具有相同ID的元素,从而创建重复的ID并混淆提交。

+0

通过呈现的标记,但没有重复的ID。当然,从第二次加载表单的id与第一次匹配的ID,但我认为第一个将不得不被删除之前,第二个添加。 –