使用AJAX或JS刷新部分Rails部分使用AJAX或JS

我在Rails應用程序上工作，並且我在選項卡中呈現了一些表單部分。使用AJAX或JS刷新部分Rails部分使用AJAX或JS

我希望能夠提交表單，刷新表單內的表單，以及更新其他表單，而無需刷新頁面。

這裏是我的應用程序的外觀：

這是我的控制器tape_bulk_coc顯示頁面。該頁面的主代碼如下：

<div class="large-12 columns large-collapse" style="padding-top: 2%; padding-left: 5%; padding-right: 5%"> 
    <div class="large-2 columns"> 
    <ul class="tabs vertical" id="example-vert-tabs" data-tabs> 
     <li class="tabs-title" id="job_links"><a href="#panel1v" aria-selected="true">Job Information</a></li> 
     <li class="tabs-title" id="job_links"><a href="#panel2v">Lab/Insp/Clr Work</a></li> 
     <li class="tabs-title" id="job_links"><a href="#panel3v"><%= @tape_bulk_coc.cli_type.job_type.job_type %> Types</a></li> 
     <li class="tabs-title is-active" id="job_links"><a href="#panel4v">Add Samples</a></li> 
     <% if @tape_bulk_coc.tape_bulk_coc_samples.any? %> 
     <li class="tabs-title" id="job_links"><a href="#panel5v"> <%[email protected]_bulk_coc.tape_bulk_coc_samples.count %> Saved Samples </a></li> 
     <% end %> 
     <li class="tabs-title" id="job_links"><a href="#panel6v">Add Spore Counts (<%= @missing_spore_count.count %>)</a></li> 
     <li class="tabs-title" id="job_links"><a href="#panel7v">CoC Reports</a></li> 
     <li class="tabs-title"><a href="#panel8v">New Job</a></li> 
     <li class="tabs-title"><a href="#panel9v">All Jobs</a></li> 
     <li class="tabs-title"><a href="#panel10v">All Reports</a></li> 
    </ul> 
    </div> 
    <div class="large-10 columns"> 
    <div class="tabs-content vertical" data-tabs-content="example-vert-tabs"> 
     <div class="tabs-panel" id="panel1v" style="border-left: solid 1px #f2f2f2"> 
     <%= render 'jobs/show' %> 
     </div> 
     <div class="tabs-panel" id="panel2v" style="border-left: solid 1px #f2f2f2"> 
     <%= render 'jobs/jobtypes' %> 
     </div> 
     <div class="tabs-panel" id="panel3v" style="border-left: solid 1px #f2f2f2"> 
     <%= render 'job_types/show' %> 
     </div> 
     <div class="tabs-panel is-active" id="panel4v" style="border-left: solid 1px #f2f2f2"> 
     <%= render 'tape_bulk_cocs/show' %> 
     <hr> 
     <%= render 'tape_bulk_coc_samples/form' %> 
     </div> 
     <div class="tabs-panel" id="panel5v" style="border-left: solid 1px #f2f2f2"> 
     <%= render 'tape_bulk_cocs/samples' %> 
     </div> 
     <div class="tabs-panel" id="panel6v" style="border-left: solid 1px #f2f2f2"> 
     <%= render 'spore_type_counts/form' %> 
     </div> 
     <div class="tabs-panel" id="panel7v" style="border-left: solid 1px #f2f2f2"> 
     <!-- render 'lead_reports/index' %> --> 
     </div> 
     <div class="tabs-panel" id="panel8v" style="border-left: solid 1px #f2f2f2"> 
     <%= render 'jobs/form' %> 
     </div> 
     <div class="tabs-panel" id="panel9v" style="border-left: solid 1px #f2f2f2"> 
     <%= render 'jobs/index' %> 
     </div> 
     <div class="tabs-panel" id="panel10v" style="border-left: solid 1px #f2f2f2"> 
     <%= render 'all_reports/index' %> 
     </div> 
    </div> 
    </div>

頁面加載/刷新，這是被設定爲活動狀態的選項卡。

，我想刷新提交的形式是標籤「添加孢子數」：

當你點擊按鈕「添加黴菌孢子計數」出現在一個模態窗口包含表單數據並提交按鈕。這提交給控制器spore_type_counts

當前，用戶提交內部模式後，它關閉，並且頁面刷新回到「添加樣本」的活動選項卡。

我想要的是沒有頁面刷新，並有模式關閉，只有「添加孢子計數」的內容來更新。意思是，如果他們將孢子計數添加到樣本69-3，那麼它將不再顯示在該選項卡上，並且只剩下另外兩個樣本。

UPDATE

於是，我跟着一些說明這裏：https://coderwall.com/p/kqb3xq/rails-4-how-to-partials-ajax-dead-easy

我正在瀏覽的網頁是爲tape_bulk_coc控制器的顯示頁面。

在此頁面上，我將spore_type_counts/form渲染在我的一個選項卡中。

的spore_type_counts/form，總之，看起來是這樣的：

<div id="test"> 
    <% if @tape_bulk_coc.tape_bulk_coc_samples.any? %> 
     <% @tape_bulk_coc.tape_bulk_coc_samples.each do |cur| %> 
     <% if !cur.spore_type_count %> 
      <div class="reveal" data-reveal> 
       <%= form_for(@spore_type_count, remote: true) do |f| %> 
        "code for the form" 
       <% end %> 
      </div> 
     <% end %> 
     <% end %> 
    <% end %> 
</div>

spore_type_counts_controller.rb

def create 
    @spore_type_count = SporeTypeCount.new(spore_type_count_params) 

    respond_to do |format| 
     if @spore_type_count.save 
     format.js 
     end 
    end 
    end

應用程序/視圖/ spore_type_counts/create.js.erb

$("#test").html("<%= escape_javascript(render partial: 'spore_type_counts/form') %>");

當我提交表單時，所有東西都會變成subm在數據庫中正確地更新和更新。響應來自JS，將spore_count正確添加到CoC中，但模式不會關閉，並且頁面不會更新。

這是我從服務器上看到響應：

線NoMethodError - undefined method tape_bulk_coc_samples' for nil:NilClass: app/views/spore_type_counts/_form.html.erb:12:是我現在需要幫助。

如果我正確地理解它，當我第一次來到這個頁面時，我的tape_bulk_cocs_controller正在從參數中填充@tape_bulk_coc對象。我在我的spore_type_counts/form裏面使用這個對象，但是當它試圖調用JS函數刷新局部時，那個對象不再存在，並且當它在表單中碰到我的第一個if條件時就會出錯。

那麼，我怎樣才能得到這個對象，並將其傳遞迴部分，以使其全部工作？

來源

2016-11-01 Cody Pritchard

你錯過了一些東西。 plz在代碼中添加format.js {something here}，然後在控制器文件夾（spore_type_counts yours文件夾）中添加文件actionname.js。然後在js代碼中添加一條提醒行以進行測試。請記住，如果沒有format.js行那裏服務器將執行HTML操作。只是檢查服務器端日誌，如果你使用的是遠程真，它會狡猾地加入JS動作。希望

來源

2016-11-01 05:39:52

我喜歡推薦第一次讀取服務器日誌。它要麼發送請求作爲JS或不。並在客戶端檢查元素頁面，然後檢查表格html。 HTML是否正確。遠程只是對屬性的形式而不是設置爲其他屬性的值。 –

使用AJAX或JS刷新部分Rails部分使用AJAX或JS

回答

相關問題