Seite noch erfrischend form_for remote true Rails 5

Question

SEHR neu in Rails, und das Problem, das ich habe ist: Ich habe eine Seite, die eine lange Spalte von Kontrollkästchen war, die ich in ein Raster von Symbolen mit Kontrollkästchen änderte und Etiketten darunter; Ich würde wie austauschen, um die Ikonenbilder mit einem anderen zu tauschen, wenn das Kästchen überprüft wird, aber die ursprüngliche Form, die mein Klassenkamerad mit mir steckte, will nicht nett spielen. Ich kann einen Link_to-Helfer, den ich zum Testen verwende, verwenden, aber nicht das Formular.

Der entsprechende Code:

#users_controller 
class UsersController < ApplicationController 

    def show 
    @user = User.find(params[:id]) 
    @peaks = Peak.all.to_a 
    @idx = 0 
    @rng = 10 
    respond_to do |format| 
     format.html 
     format.js 
    end 
    end 

    def edit 
    end 

    def update 
    @user = current_user 
    if @user.update(user_params) 
     redirect_to user_path 
    else 
     redirect_to root_path 
    end 

    end 

    private 
    def user_params 
     params.require(:user).permit(peak_ids:[]) 
    end 

end 

der Testteil:

#_testajax.html.erb 
<%= image_tag("badges/snow.png", :class => "no-img-circle center-block", 
height: 50, width: 50)%> 
<h1>Hi J</h1> 

die Show Seite:

<div class="container"> 
<div class="col-md-7"> 
    <%= @user.email %> 
    <h3>You have climbed the following peaks:</h3> 

    <ul> 
     <% for peak in @user.peak_ids do %> 
     <li><%= Peak.find(peak).name %></li> 
     <% end %> 
    </ul> 

    <% total_ascent = 0 %> 
    <% for peak in @user.peak_ids do %> 
     <% total_ascent += Peak.find(peak).ascent %> 
    <% end %> 

    <h3>You have climbed a total of <%= total_ascent %> feet!</h3> 

    <% total_climbed = @user.peak_ids.length %> 
    <h3>You have climbed <%= (total_climbed/46.0*100).round %>% of the peaks!</h3> 

    <h3>Add more climbs</h3> 
<div class="container"> 
    <%= form_for current_user, :remote => true do |f| %> 
     <!-- I kept the form_for construct, but changed the logic[here @peaks is an array!] J. --> 
     <% 5.times do %> 
      <div class="row"> 
      <% @peaks.slice(@idx,@rng).each do |peak| %> 
      <div class="col-md-1 small text-nowrap"> 
      <%= image_tag("badges/snow.png", :class => "no-img-circle center-block", :id => peak.id, height: 50, width: 50)%> 
      <p><!-- paragraph tag needed to get the checkbox and text beneath the image N. --> 
      <%= check_box_tag "user[peak_ids][]", peak.id, current_user.peaks.include?(peak) %> 
      <%= peak.name %> 
      </p> 
      </div> 
     <% end %> 
     </div> 
     <% @idx += @rng %><!-- instance variables for loop control N. --> 
    <% end %> 

    <p><%= f.submit %></p> 
<% end %> 
</div> 
<%= link_to "Test", user_path, remote: true %> 
<div id="test" style="display:none;"></div> 
</div> 

    <div class="col-md-5"> 
    <br> 
    <br> 
    <br> 
    <% if total_ascent > 50000 %> 
    <%= image_tag 'badges/chevron-20.png', :size => "130x130" %> 
     <p>50,000 ft!</p> 
    <% end %> 

    <% if total_climbed > 22 %> 
     <%= image_tag 'badges/chevron-6.png', :size => "130x130" %> 
     <p>Half way to 46!</p> 
    <% end %> 

    <% if @user.peak_ids.include? 1%> 
     <%= image_tag 'badges/chevron-11.png', :size => "130x130" %> 
     <p>Highest point in New York State!</p> 
    <% end %> 

    <% if total_climbed == 46 %> 
     <%= image_tag 'badges/002-crown.png', :size => "130x130" %> 
     <p>You've climbed all 46 peaks!</p> 
    <% end %> 

    </div> 
</div> 

die show.js.erb Datei:

$('#test').html("<%= j (render 'testajax') %>"); <!-- works --> 
$('#test').slideDown(350); <!-- works --> 
$('edit_user_1').html('<%= j (render "testajax") %>') <!-- not working --> 

$('#46').attr("src" , "<%= image_path "badges/chevron-10.png", :id => "46" %>"); <!-- works --> 

und Schnipsel des generierten HTML:

<div class="container"> 
<form class="edit_user" id="edit_user_1" action="https://stackoverflow.com/users/1" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /> 

     <div class="row"> 
      <div class="col-md-1 small text-nowrap"> 
      <img class="no-img-circle center-block" id="1" height="50" width="50" src="/assets/badges/snow-722513de9cdd817c26362e051cf1c9111e32888cc6be5b89b99855bbb46f3c88.png" alt="Snow" /> 
      <p><!-- paragraph tag needed to get the checkbox and text beneath the image N. --> 
      <input type="checkbox" name="user[peak_ids][]" id="user_peak_ids_" value="1" checked="checked" /> 
      Mt. Marcy 
      </p> 
      </div> 
    . 
    . 
    . 
      <div class="col-md-1 small text-nowrap"> 
      <img class="no-img-circle center-block" id="46" height="50" width="50" src="/assets/badges/snow-722513de9cdd817c26362e051cf1c9111e32888cc6be5b89b99855bbb46f3c88.png" alt="Snow" /> 
      <p><!-- paragraph tag needed to get the checkbox and text beneath the image N. --> 
      <input type="checkbox" name="user[peak_ids][]" id="user_peak_ids_" value="46" /> 
      Couchsachraga Peak 
      </p> 
      </div> 
     </div> 


    <p><input type="submit" name="commit" value="Update User" data-disable-with="Update User" /></p> 
</form></div> 
<a data-remote="true" href="https://stackoverflow.com/users/1">Test</a> 
<div id="test" style="display:none;"></div> 
    </div> 

Ich habe viele Lösungen über die letzten 24 Stunden versucht, aber nichts scheint zu funktionieren, und die meisten der Howto ist datiert sind. Ich bitte nicht oft um Hilfe, aber das hat mich über den Haufen geworfen.

EDIT

Wie bereits erwähnt, die Steuerung erscheint für die link_to zu arbeiten, aber die Seite ist erfrischend, nach wie vor, wenn ich das Formular abzuschicken ,. Vielen Dank.

ANTWORT

Dank Einfach Kalk, war ich endlich in der Lage diese Funktion zu erhalten, nachdem es zunächst Verlesen, nach dem in der Update gehen sollte Aktion:

def update 
    @user = current_user 
    respond_to do |format| 
     if @user.update(user_params) 
     format.html { redirect_to user_path } 
     format.js { render action: :show, format: :js } #has to go here beause of .update() 
     else 
     format.html { redirect_to root_path } 
     end 
    end 
    end 

Answer 1

$('edit_user_1').html('<%= j (render "testajax") %>') <!-- not working --> 

In dieser Zeile haben Sie Ihr octothorpe verpasst. Sie verwenden also jQuery, um ein Element mit dem Tagnamen 'edit_user_1' (ähnlich) auszuwählen um alle Absatz-Tags auf einer Seite auszuwählen, indem Sie $('p') tun.

$('#edit_user_1').html('<%= j (render "testajax") %>') <!-- should work --> 

es sei denn, ich bin etwas fehlt in der Frage, dass das einzige, was nicht funktioniert für Sie zu sein scheint?

HINWEIS: Dies funktioniert nur für diesen einen Benutzer, mit $("#edit_user_#{@user.id}") sollte es für alle Benutzer funktionieren, Sie könnten auch etwas wie $('form.edit_user') tun, wenn es nur die auf der Seite gibt. Sie werden in ähnliche Probleme mit $('#46') stoßen, wenn peak.id wird jemals ändern (sieht so aus), Sie müssen wahrscheinlich herausfinden, eine andere Möglichkeit, dieses Bild zu zielen.

Für das übergeordnete Problem der link_to Arbeits aber nicht die form_for wird form_for auf die update Aktion in der Steuerung Hand geben, das nur sagt redirect_to user_path (was ich war nicht bewusst, Sie es einen Benutzer ohne Umweg Objekt tun könnten, aber es ist offensichtlich Arbeiten für Ihre link_to). Sie müssen eine Antwort hinzufügen, um die show.js.erb für die js-Anfragen zu blockieren und zu rendern. Das Folgende ist nicht getestet, zeigt aber die allgemeine Idee.