2017-03-24 2 views
0

Ich habe begrenzte Kenntnisse über Ajax und ich habe versucht, in meine Rails App zu integrieren. Ich möchte zulassen, dass der Benutzer Aktivitäten erstellen und diese in der Ansicht anzeigen kann, ohne dass eine Seitenaktualisierung erforderlich ist. Ich lese, dass Ajax mir erlaubt, dies zu tun und this Leitfaden folgen, habe ich versucht, es in meine App zu integrieren.Schienen - Ajax nicht aktualisieren Ansicht?

Allerdings scheint es nicht zu funktionieren und ich habe keine Ideen, warum. Es ist mir gelungen, die Aktualisierung der Seite zu verhindern, wenn der Benutzer einen Aktivitätsnamen eingibt und auf die Übergabeschaltfläche klickt, aber der Abschnitt div nicht aktualisiert wird, um die neu erstellte Aktivität anzuzeigen, bis der Benutzer die Seite manuell aktualisiert.

Mein Wissen über Ajax ist ziemlich begrenzt, also wenn jemand darauf hinweisen könnte, was mit dem Code falsch ist oder wie es sein soll, würde das geschätzt werden.

Unten ist mein Code für die Ansichten, Controller und die JSERB-Dateien. Wenn Sie weitere Dateien benötigen, lassen Sie es mich wissen.

Vielen Dank im Voraus

Show.js.erb:

$("#activities").update("<%= escape_javascript(render('activity')) %>"); 

$("<%= escape_javascript(render @activity) %>").appendTo("#activities"); 

$('#activities').html("<%= j (render @activity) %>"); 

Create.js.erb

$("<% escape_javascript(render 'activity')%>").appendTo("#activities"); 

$('#activities').append('<%= j render(@activity) %>') 

Aktivitäten Controller:

class ActivitiesController < ApplicationController 
    def display 
    @activities = Activity.all 
    @activity = Activity.new 
    @category = Category.new 
    @categories = Category.all 
    end 

    def index 
    @activities = Activity.all 
    @activity = Activity.new 

    end 

    def show 
    @activities = Activity.all 
    @activity = Activity.new 

    respond_to do |format| 
     format.html 
     format.js 
     format.json 
    end 
    end 

    def new 
    @activity = Activity.new 
    end 

    def create #Modified all new 
    @activity = Activity.create(activity_params) 

    end 

    def edit 
    @activity = Activity.find(params[:id]) 
    end 

    def update 
    @activity = Activity.update(activity_params) 
    if @activity.save 
     flash[:success] = 'Activity successfully updated!' 
     redirect_to root 
    else 
     flash[:error] = 'ERROR: Activity failed to update' 
     render_to_string 
    end 
    end 

    private 
    def activity_params 
     params.require(:activity).permit(:a_name) 
    end 

end 

Aktivitäten Sicht anzeigen:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script src="jquery.js"></script> 

<div class = "row top-buffer text-center"> 
    <div class='col-md-3'> 
    <h1> 
     Activities 
    </h1> 
    </div> 
</div> 

    <div id="activities"> 
    <% @activities.each do |a| %> 
     <div> 
      <h2> 
      <%= a.a_name %> 
      </h2> 
     </div> 
    <% end %> 
    </div> 
<div> 
    <%= render 'new' %> 
</div> 

Aktivitäten New Render:

<body> 
<% flash.each do |key, value| %> 
    <div class="alert alert-<%= key %>"><%= value %></div> 
<% end %> 

<%= form_for @activity, remote: true do |a| %> 
    <div class = "form-group"> 
     <div class = "row top-buffer text-center"> 
     <div class='col-md-3'> 
      <%= a.text_field :a_name, id: 'a_name_field', placeholder: 'Activity Name'%> 
     </div> 
     </div> 

     <div class ="row top-buffer text-center"> 
     <div class="col-md-3"> 
      <%= a.submit 'Create', id: 'submitButton', onclick: 'saveActivity()', class: 'btn btn-primary'%> 
     </div> 
     </div> 
    </div> 
<% end %> 

</body> 

Antwort

0

diese Zeile hinzufügen, um sicherzustellen, dass Ihr Controller js Anfragen bestätigen:

# activities_controller.rb 
class ActivitiesController < ApplicationController 
    respond_to :html, :js 
.... 

und ersetzt alle zu schaffen. js.erb Zeilen mit diesem:

# create.js.erb 
$('#activities').html("<%= j (render @activities) %>"); 

Anstatt append zu verwenden, ist dies einfacher. Er teilt dem Element mit der ID "activities" mit, dass die @ -Aktivitäten erneut gerendert werden, was auch den neu erstellten Aktivitätsdatensatz enthalten sollte.

dies stattdessen Außerdem überprüfen AJAX für RoR lernen:

https://launchschool.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

+0

Sie für die Hilfe danken. Mit dem, was Sie oben gepostet haben, und dem Guide, der mit dem, was ich von dem Guide hatte, kombiniert wurde, gelang es mir, es zum Laufen zu bringen. Vielen Dank – VectorConvoy

Verwandte Themen