[英]Updating nested form while changing tabs (Jquery-ui tabs)
I have a big nested form that I divided into some tabs. 我有一个很大的嵌套表格,我将其分为几个选项卡。
I want to call an updating action from controller each time I change tabs (Jquery-ui tabs), but I don't know how to call an ajax from the tabs jquery. 我想在每次更改选项卡(Jquery-ui选项卡)时从控制器调用更新操作,但是我不知道如何从选项卡jquery调用ajax。 How can i do it? 我该怎么做?
My code: 我的代码:
application.js application.js
$(function() {
$("#tabs").tabs({
ajaxOptions: {
url: "stories/update_tabs",
type: "PUT",
success: function() {
$("#message").html = "Data saved.";
},
error: function(xhr, status, index, anchor) {
console.log(anchor);
}
}
});
});
controller 控制者
def update_tabs
@story = Story.find(params[:id])
respond_to do |format|
if @story.save
format.html
else
format.html
end
end
end
routes.rb routes.rb
resources :stories do
put 'update_tabs', on: :collection
end
view 视图
<div id="tabs">
<ul>
<li><a href="#tabs-1">Chapters</a></li>
<li><a href="#tabs-2">Special Attributes</a></li>
<li><a href="#tabs-3">Items</a></li>
<li><a href="#tabs-4">Story</a></li>
<li><a href="#tabs-5">Graph</a></li>
</ul>
<div id="tabs-1">
<%= f.simple_fields_for :chapters do |builder| %>
<%= render "chapters_fields", f: builder %>
<% end %>
<p>
<%= link_to_add_fields "Add chapters", f, :chapters, "chapters" %>
</p>
<br/>
</div>
<div id="tabs-2">
<%= f.simple_fields_for :special_attributes do |builder| %>
<%= render "special_attributes_fields", f: builder %>
<% end %>
<p>
<%= link_to_add_fields "Add Special Attributes", f, :special_attributes, "special_attributes" %>
</p>
</div>
<div id="tabs-3">
<%= f.simple_fields_for :items do |builder| %>
<%= render "items_fields", f: builder %>
<% end %>
<p>
<%= link_to_add_fields "Add items", f, :items, "items" %>
</p>
</div>
<div id="tabs-4">
<div class="field">
<%= f.input :title %>
<%= f.hidden_field :user_id, value: current_user.id %>
</div>
<div class="field">
<%= f.input :resume, as: :text, input_html: { rows: 10, style: 'width: 100%' } %>
</div>
<div class="field">
<%= f.input :prelude, as: :text, input_html: { rows: 10, style: 'width: 100%' } %>
</div>
</div>
<div id="tabs-5">
<%= render "graph" %>
</div>
</div><br/>
I just want to do an update, and show a message on some tag with id=message 我只想进行更新,并在ID = message的某些标签上显示一条消息
Thanks! 谢谢!
[UPDATE] [更新]
I tried something like this 我尝试过这样的事情
application.js application.js
$("#tabs").tabs({
active: function(event,ui) {
ui.ajaxSettings.type = 'PUT';
ui.ajaxSettings.url += 'stories/update_tabs';
//ui.ajaxSettings.format = {format:'html'};
ui.jqXHR.success(function(){
$('#message').html = "Data saved";
console.log("saving");
});
ui.jqXHR.error(function(){
$('#message').html = "Data is not being updated.";
console.log("not saving");
})
}
});
but ajaxSettings.type is undefined on the console, as ajaxSettings.url or other attributes... 但是ajaxSettings.type在控制台上未定义,如ajaxSettings.url或其他属性...
This is what I do in my own project to do actions when changing tabs: 这是我在自己的项目中要做的,以在更改选项卡时执行以下操作:
$( "#tabs" ).tabs({
activate: function( event, ui ) {
//Things to do in tabs when activated
//For instance, this code is applied when activating "tabs-2"
if (ui.newPanel.attr("id") == "tabs-2"){
console.log("You are now in tabs-2")
}
}
})
If you need to change the ajax url for each tab dynamically, this is how I do that: 如果需要动态更改每个选项卡的ajax URL,这就是我的方法:
$("#tabs ul li a").each(function(index){
switch(index){
case 0:
url = "pageone.php?q="+somedata
break
case 1:
url = "pagetwo.php?q="+somedata
break
case 2:
url = "pagethree.php?q="+somedata
break
case 3:
url = "pagefour.php?q="+somedata
break
}
$(this).attr('href',url)
})
Edit: Url method is deprecated in Jquery UI 1.10, as stated here . 编辑:URL方法已在jQuery UI的1.10,如规定在这里 。
I'm not entirely sure what you are trying to achieve, but jquery tabs by default reloads ajax tabs each time a tab is activated. 我不确定您要实现的目标,但是默认情况下,每次激活选项卡时,jquery选项卡都会重新加载ajax选项卡。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.