0

我有一个很大的嵌套表单，我将其划分为一些选项卡。

每次更改选项卡（Jquery-ui 选项卡）时，我都想从控制器调用更新操作，但我不知道如何从 jquery 选项卡调用 ajax。我该怎么做？

我的代码：

应用程序.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);
            }
        }
    });
});

控制器

def update_tabs
    @story = Story.find(params[:id])

    respond_to do |format|
      if @story.save
        format.html
      else
        format.html
      end
    end
end

路线.rb

resources :stories do
    put 'update_tabs', on: :collection
end

看法

<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/>

我只想进行更新，并在 id=message 的某个标签上显示一条消息

谢谢！

[更新]

我尝试过这样的事情

应用程序.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");
            })
        }
    });

但 ajaxSettings.type 在控制台上未定义，如 ajaxSettings.url 或其他属性...

4

1 回答 1

0

这是我在自己的项目中更改选项卡时所做的操作：

$( "#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")
        }
    }
})

如果您需要动态更改每个选项卡的 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)
    })

编辑：在 Jquery UI 1.10 中不推荐使用 Url 方法，如此处所述。

我不完全确定您要实现的目标，但默认情况下，jquery 选项卡会在每次激活选项卡时重新加载 ajax 选项卡。

于 2013-10-29T20:38:53.323 回答