Databases
StackOverflow2013
Postsdbo
POUpdating nested form while changing tabs (Jquery-ui tabs)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUpdating nested form while changing tabs (Jquery-ui tabs)
    text
    copied!<p>I have a big nested form that I divided into some tabs. </p> <p>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. How can i do it?</p> <p>My code:</p> <p>application.js</p> <pre><code>$(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); } } }); }); </code></pre> <p>controller</p> <pre><code>def update_tabs @story = Story.find(params[:id]) respond_to do |format| if @story.save format.html else format.html end end end </code></pre> <p>routes.rb</p> <pre><code>resources :stories do put 'update_tabs', on: :collection end </code></pre> <p>view</p> <pre><code>&lt;div id="tabs"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#tabs-1"&gt;Chapters&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-2"&gt;Special Attributes&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-3"&gt;Items&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-4"&gt;Story&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-5"&gt;Graph&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="tabs-1"&gt; &lt;%= f.simple_fields_for :chapters do |builder| %&gt; &lt;%= render "chapters_fields", f: builder %&gt; &lt;% end %&gt; &lt;p&gt; &lt;%= link_to_add_fields "Add chapters", f, :chapters, "chapters" %&gt; &lt;/p&gt; &lt;br/&gt; &lt;/div&gt; &lt;div id="tabs-2"&gt; &lt;%= f.simple_fields_for :special_attributes do |builder| %&gt; &lt;%= render "special_attributes_fields", f: builder %&gt; &lt;% end %&gt; &lt;p&gt; &lt;%= link_to_add_fields "Add Special Attributes", f, :special_attributes, "special_attributes" %&gt; &lt;/p&gt; &lt;/div&gt; &lt;div id="tabs-3"&gt; &lt;%= f.simple_fields_for :items do |builder| %&gt; &lt;%= render "items_fields", f: builder %&gt; &lt;% end %&gt; &lt;p&gt; &lt;%= link_to_add_fields "Add items", f, :items, "items" %&gt; &lt;/p&gt; &lt;/div&gt; &lt;div id="tabs-4"&gt; &lt;div class="field"&gt; &lt;%= f.input :title %&gt; &lt;%= f.hidden_field :user_id, value: current_user.id %&gt; &lt;/div&gt; &lt;div class="field"&gt; &lt;%= f.input :resume, as: :text, input_html: { rows: 10, style: 'width: 100%' } %&gt; &lt;/div&gt; &lt;div class="field"&gt; &lt;%= f.input :prelude, as: :text, input_html: { rows: 10, style: 'width: 100%' } %&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="tabs-5"&gt; &lt;%= render "graph" %&gt; &lt;/div&gt; &lt;/div&gt;&lt;br/&gt; </code></pre> <p>I just want to do an update, and show a message on some tag with id=message</p> <p>Thanks!</p> <p>[UPDATE]</p> <p>I tried something like this</p> <p>application.js</p> <pre><code> $("#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"); }) } }); </code></pre> <p>but ajaxSettings.type is undefined on the console, as ajaxSettings.url or other attributes...</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload