Question

我有一个大的嵌套表单，我分成了一些标签。

我想在每次更改标签（Jquery-ui标签）时从控制器调用更新操作，但我不知道如何从标签jquery调用ajax。我该怎么办？

我的代码：

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

控制器

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

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

的消息

谢谢！

[UPDATE]

我试过这样的事情

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

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

Answer 1

这是我在自己的项目中所做的，在更改标签时执行操作：

$( "#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网址，我就是这样做的：

    $("#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方法，如here所述。

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

更改选项卡时更新嵌套表单（Jquery-ui选项卡）

1 个答案: