Rails - Ajax no se actualiza correctamente -- ruby-on-rails campo con ajax camp Relacionados El problema

Rails - Ajax does not refresh correctly


0
vote

problema

Español

En mi usuario, el usuario puede marcar un producto como favorito, y desmarcarlo.

Espero que cuando un usuario como un producto cambie el color del icono y que el contador favorito aumenta con la recarga.

El contador está en la barra navar

  <%= @favorites.count %>   

Aquí está los productos / indx.html.erb

  <% @products.each do |product| %>     <div class="header_card">         <%= link_to clients_product_path(product) do  %>         <div id="like_unlike">             <% if product.favoriting_users.include? current_user %>                 <% fav = product.favorites.find { |fav| fav.user_id == current_user.id} %>                 <%= link_to clients_product_favorite_path(product, fav), method: :delete , remote: true do %>                     <i class= "fa fa-heart favorite-active"></i>                 <% end %>                    <% else %>                 <%= link_to clients_product_favorites_path(product), method: :post, remote: true  do %>                     <i class= "fa fa-heart not-favorite"></i>                 <% end %>             <% end %>            </div>         <div id="carousel_<%= product.id%>" class="carousel slide" data-ride="carousel" data-interval="false">           <div class="carousel-inner">               <% product.attachments.each do |img| %>               <div class="carousel-item <%= 'active' if img == product.attachments[0] %>">                   <%= image_tag img.url,  class: "product_suggestion"  %>                                                    </div>                 <% end %>           </div>         </div>         <% end %>     </div> <% end %>   

Este es mi favorites_controller.rb

  class Clients::FavoritesController < ApplicationController      before_action :find_favorite, only: [:destroy]      def index         @favorites = Favorite.where(user: current_user).all     end      def create       @product = Product.find(params[:product_id])       @user = current_user.id       favorites = {user_id: @user, product_id: @product.id}       @favorite = Favorite.new(favorites)        @favorite.save          if @favorite.save         respond_to do |format|             format.js             format.html {redirect_to clients_products_path(@product)}           end         else             respond_to do | format|                 format.js                  format.html {redirect_to clients_products_path,  alert: "HOPHOP" }             end         end     end      def destroy          if @favorite.destroy!             respond_to do |format|                 format.js              end         end     end      private      def find_favorite         find_product        @favorite = @product.favorites.find(params[:id])     end end   

Editar

tratando de hacer la pregunta más clara ...

La idea es cuando se gustó un producto, el contador de favoritos <%= @favorites.count %> debe incrementarse sin recarga. Cuando ya no se ha gustado, el contador debe decirse

Tengo dos iconos, solo uno es visible según lo que le gusta o no.

en Mis productos / index.html.erb Tengo estas líneas (código completo arriba)

Cuando aún se muestra un producto, se muestra este icono:

  <%= link_to clients_product_favorites_path(product), method: :post, remote: true  do %>   <i class= "fa fa-heart not-favorite"></i> <% end %>    

Cuando se le gusta, este icono debe aparecer con salida ...

  public class ChildTable {     public ChildTable()     {         this.ParentTables = new List<ParentTable>();     }      public int ID { get; set; }            public int Relation { get; set; }     public virtual ICollection<ParentTable> ParentTables { get; set; } }  public class ParentTable {     public ParentTable()     {         this.ChildTables = new List<ChildTable>();     }      public int ID { get; set; }        public string Name { get; set; }     public virtual ICollection<ChildTable> ChildTables { get; set; } } 0  

¿Es posible pasar algún código de rieles en la create.js.erb, entonces el Link_TO con el Método Post se cambia al enlace con el método Eliminar

create.js.erb * Aquí solo fingir el icono cambiando cambiando el CSS .... Es mi hacke, pero necesito recuperar el otro icono donde se puede usar el metodo de eliminación _

  public class ChildTable {     public ChildTable()     {         this.ParentTables = new List<ParentTable>();     }      public int ID { get; set; }            public int Relation { get; set; }     public virtual ICollection<ParentTable> ParentTables { get; set; } }  public class ParentTable {     public ParentTable()     {         this.ChildTables = new List<ChildTable>();     }      public int ID { get; set; }        public string Name { get; set; }     public virtual ICollection<ChildTable> ChildTables { get; set; } } 111  

destroy.js.erb igual que abajo

  public class ChildTable {     public ChildTable()     {         this.ParentTables = new List<ParentTable>();     }      public int ID { get; set; }            public int Relation { get; set; }     public virtual ICollection<ParentTable> ParentTables { get; set; } }  public class ParentTable {     public ParentTable()     {         this.ChildTables = new List<ChildTable>();     }      public int ID { get; set; }        public string Name { get; set; }     public virtual ICollection<ChildTable> ChildTables { get; set; } } 2  
Original en ingles

In my app user can mark a product as favorite, and unmark it.

I expect that when a user like a product the icon color changes and that the favorite counter increases with out reloading.

The counter is in the navbar

<%= @favorites.count %> 

Here is the products/indx.html.erb

<% @products.each do |product| %>     <div class="header_card">         <%= link_to clients_product_path(product) do  %>         <div id="like_unlike">             <% if product.favoriting_users.include? current_user %>                 <% fav = product.favorites.find { |fav| fav.user_id == current_user.id} %>                 <%= link_to clients_product_favorite_path(product, fav), method: :delete , remote: true do %>                     <i class= "fa fa-heart favorite-active"></i>                 <% end %>                    <% else %>                 <%= link_to clients_product_favorites_path(product), method: :post, remote: true  do %>                     <i class= "fa fa-heart not-favorite"></i>                 <% end %>             <% end %>            </div>         <div id="carousel_<%= product.id%>" class="carousel slide" data-ride="carousel" data-interval="false">           <div class="carousel-inner">               <% product.attachments.each do |img| %>               <div class="carousel-item <%= 'active' if img == product.attachments[0] %>">                   <%= image_tag img.url,  class: "product_suggestion"  %>                                                    </div>                 <% end %>           </div>         </div>         <% end %>     </div> <% end %> 

This is my favorites_controller.rb

class Clients::FavoritesController < ApplicationController      before_action :find_favorite, only: [:destroy]      def index         @favorites = Favorite.where(user: current_user).all     end      def create       @product = Product.find(params[:product_id])       @user = current_user.id       favorites = {user_id: @user, product_id: @product.id}       @favorite = Favorite.new(favorites)        @favorite.save          if @favorite.save         respond_to do |format|             format.js             format.html {redirect_to clients_products_path(@product)}           end         else             respond_to do | format|                 format.js                  format.html {redirect_to clients_products_path,  alert: "HOPHOP" }             end         end     end      def destroy          if @favorite.destroy!             respond_to do |format|                 format.js              end         end     end      private      def find_favorite         find_product        @favorite = @product.favorites.find(params[:id])     end end 

EDIT

Trying to make the question clearer...

The idea is when a product is liked, the favorites counter <%= @favorites.count %> should be incremented with out reloading. When it's not liked anymore the counter should be decremented

I have two icons, only one is visible according if it is liked or not.

in my products/index.html.erb I have these lines (complete code above)

When a product is not yet liked this icon is shown:

<%= link_to clients_product_favorites_path(product), method: :post, remote: true  do %>   <i class= "fa fa-heart not-favorite"></i> <% end %>  

When it is liked this icon should appear with out reloading...

<% fav = product.favorites.find { |fav| fav.user_id == current_user.id} %> <%= link_to clients_product_favorite_path(product, fav), method: :delete , remote: true do %>   <i class= "fa fa-heart favorite-active"></i> <% end %>    

Is it possible to pass some rails code in the create.js.erb, then the link_to with the method post is changed to the link to with the method delete

create.js.erb *here I just fake the icon change by changing the css.... it's my hack but I need to retrive the other icon where the delete methode can be used_

$('.header_card').bind('.not-favorite').bind('ajax:success', function(){         $(this).find(".not-favorite").css('color', 'red');         $("#likes_counter").html("<%= @favorites.count %>"); }); 

destroy.js.erb same as below

$('.header_card').bind('.favorite-active').bind('ajax:success', function(){     $("#likes-count").html("<%= @favorites.count %>");     $(this).find(".favorite-active").css('color', 'gray'); }); 
     
 
 

Lista de respuestas

2
 
vote

Primero le sugeriría que simplifique su controlador como este:

  def create   @product = Product.find(params[:product_id])   @favorite = current_user.favorites.create(product: @product) #I guess you have that association already set up    respond_to do |format|     format.js     format.html {       if @favorite.persisted?         redirect_to clients_products_path(@product)       else         redirect_to clients_products_path,  alert: "HOPHOP"       }   end end   

Solo para reducir el nomencal de líneas donde las cosas podrían salir mal.

En las vistas, no tiene que enlazar una función de devolución de llamada al evento ajax:success1 , ya está dentro de ese evento en el contexto donde se está prestando esa vista. Simplemente agregue las líneas de código para actualizar la vista en lugar y Jquery los ejecutará.

  # create.js.erb $('.header_card .not-favorite').toggleClass('not-favorite').toggleClass('favorite-active'); $("#likes_counter").html("<%= @product.favorites.count %>");  # destroy.js.erb $('.header_card .favorite-active').toggleClass('not-favorite').toggleClass('favorite-active'); $("#likes-count").html("<%= @product.favorites.count %>");   

Tenga en cuenta los cambios en las clases (puede configurar el ícono usando CSS y luego solo necesita configurar la clase Propper en el botón y que está realizado) y el conteo (usted donde use @favorites que no se definió en el controlador).

 

First I would suggest you to simplify your controller like this:

def create   @product = Product.find(params[:product_id])   @favorite = current_user.favorites.create(product: @product) #I guess you have that association already set up    respond_to do |format|     format.js     format.html {       if @favorite.persisted?         redirect_to clients_products_path(@product)       else         redirect_to clients_products_path,  alert: "HOPHOP"       }   end end 

Just to reduce the nomber of lines where things could go wrong.

On the views, you don't have to bind a callback function to the ajax:success event, you are already inside that event in the context where that view is being rendered. Just add the lines of code to update the view instead and jquery will execute them.

# create.js.erb $('.header_card .not-favorite').toggleClass('not-favorite').toggleClass('favorite-active'); $("#likes_counter").html("<%= @product.favorites.count %>");  # destroy.js.erb $('.header_card .favorite-active').toggleClass('not-favorite').toggleClass('favorite-active'); $("#likes-count").html("<%= @product.favorites.count %>"); 

Note the changes on classes (you can set the icon using CSS and then you only need to set the propper class on the button and you are done) and the count (you where using @favorites which was not defined on the controller).

 
 
 
 
0
 
vote

Esto es lo que hizo el trabajo como se esperaba:

Primero puse mis enlaces en div con un #id

  <div class="like_unlike">   <% if product.favoriting_users.include? current_user %>    <div id="unlike_<%= product.id %>">     <% fav = product.favorites.find { |fav| fav.user_id == current_user.id} %>       <%= link_to clients_product_favorite_path(product, fav), method: :delete , remote: true do %>         <i class= "fa fa-heart favorite-active"></i>     <% end %>       </div>     <% else %>     <div id="like_<%= product.id %>">       <%= link_to clients_product_favorites_path(product), method: :post, remote: true  do %>         <i class= "fa fa-heart not-favorite"></i>     <% end %>  </div> <% end %>      

create.js.erb

  $('#header_card_<%= @product.id %>').bind('.not-favorite').bind('ajax:success', function(){      if("<%= @favorites.count %>" === "1"){             $("#like_<%= @product.id %>").empty();             $("#header_card_<%= @product.id %>").find("#like_<%= @product.id %>").replaceWith("<div class='unlike_<%= @product.id %>'><a data-remote='true' rel='nofollow' data-method='delete' href='/clients/products/<%= @product.id %>/favorites/<%= @favorite.id %>'><i class= 'fa fa-heart favorite-active'></i></a></div>");              $("#header_card_<%= @product.id %> .not-favorite").toggleClass('not-favorite').toggleClass('favorite-active');             $("#likes_counter").html("<%= @favorites.count %>");         location.reload();       }     else {         $("#like_<%= @product.id %>").empty();         $("#header_card_<%= @product.id %>").find("#like_<%= @product.id %>").replaceWith("<div class='unlike_<%= @product.id %>'><a data-remote='true' rel='nofollow' data-method='delete' href='/clients/products/<%= @product.id %>/favorites/<%= @favorite.id %>'><i class= 'fa fa-heart favorite-active'></i></a></div>");          $("#header_card_<%= @product.id %> .not-favorite").toggleClass('not-favorite').toggleClass('favorite-active');         $("#likes_counter").html("<%= @favorites.count %>");     } });   

destroy.js.erb

  $('#header_card_<%= @product.id %>').bind('.not-favorite').bind('ajax:success', function(){      if('<%= @favorites.count %>' === "0" || "<%= @favorites.first %>"){         $("#likes_counter").html("<%= @favorites.count %>");       $("#header_card_<%= @product.id %> .favorite-active").toggleClass('favorite-active').toggleClass('not-favorite');         $("#unlike_<%= @product.id %>").empty();         $("#header_card_<%= @product.id %>").find("#unlike_<%= @product.id %>").replaceWith("<div class='like_<%= @product.id %>'><a data-remote='true' rel='nofollow' data-method='post' href='/clients/products/<%= @product.id %>/favorites %>'><i class= 'fa fa-heart favorite-active'></i></a></div>");         location.reload();     }     else {         $("#likes_counter").html("<%= @favorites.count %>");       $("#header_card_<%= @product.id %> .favorite-active").toggleClass('favorite-active').toggleClass('not-favorite');         $("#unlike_<%= @product.id %>").empty();         $("#header_card_<%= @product.id %>").find("#unlike_<%= @product.id %>").replaceWith("<div class='like_<%= @product.id %>'><a data-remote='true' rel='nofollow' data-method='post' href='/clients/products/<%= @product.id %>/favorites %>'><i class= 'fa fa-heart favorite-active'></i></a></div>");     } });   
 

This is what made the job as expected:

I first put my links in div with a #id

<div class="like_unlike">   <% if product.favoriting_users.include? current_user %>    <div id="unlike_<%= product.id %>">     <% fav = product.favorites.find { |fav| fav.user_id == current_user.id} %>       <%= link_to clients_product_favorite_path(product, fav), method: :delete , remote: true do %>         <i class= "fa fa-heart favorite-active"></i>     <% end %>       </div>     <% else %>     <div id="like_<%= product.id %>">       <%= link_to clients_product_favorites_path(product), method: :post, remote: true  do %>         <i class= "fa fa-heart not-favorite"></i>     <% end %>  </div> <% end %>    

create.js.erb

$('#header_card_<%= @product.id %>').bind('.not-favorite').bind('ajax:success', function(){      if("<%= @favorites.count %>" === "1"){             $("#like_<%= @product.id %>").empty();             $("#header_card_<%= @product.id %>").find("#like_<%= @product.id %>").replaceWith("<div class='unlike_<%= @product.id %>'><a data-remote='true' rel='nofollow' data-method='delete' href='/clients/products/<%= @product.id %>/favorites/<%= @favorite.id %>'><i class= 'fa fa-heart favorite-active'></i></a></div>");              $("#header_card_<%= @product.id %> .not-favorite").toggleClass('not-favorite').toggleClass('favorite-active');             $("#likes_counter").html("<%= @favorites.count %>");         location.reload();       }     else {         $("#like_<%= @product.id %>").empty();         $("#header_card_<%= @product.id %>").find("#like_<%= @product.id %>").replaceWith("<div class='unlike_<%= @product.id %>'><a data-remote='true' rel='nofollow' data-method='delete' href='/clients/products/<%= @product.id %>/favorites/<%= @favorite.id %>'><i class= 'fa fa-heart favorite-active'></i></a></div>");          $("#header_card_<%= @product.id %> .not-favorite").toggleClass('not-favorite').toggleClass('favorite-active');         $("#likes_counter").html("<%= @favorites.count %>");     } }); 

destroy.js.erb

$('#header_card_<%= @product.id %>').bind('.not-favorite').bind('ajax:success', function(){      if('<%= @favorites.count %>' === "0" || "<%= @favorites.first %>"){         $("#likes_counter").html("<%= @favorites.count %>");       $("#header_card_<%= @product.id %> .favorite-active").toggleClass('favorite-active').toggleClass('not-favorite');         $("#unlike_<%= @product.id %>").empty();         $("#header_card_<%= @product.id %>").find("#unlike_<%= @product.id %>").replaceWith("<div class='like_<%= @product.id %>'><a data-remote='true' rel='nofollow' data-method='post' href='/clients/products/<%= @product.id %>/favorites %>'><i class= 'fa fa-heart favorite-active'></i></a></div>");         location.reload();     }     else {         $("#likes_counter").html("<%= @favorites.count %>");       $("#header_card_<%= @product.id %> .favorite-active").toggleClass('favorite-active').toggleClass('not-favorite');         $("#unlike_<%= @product.id %>").empty();         $("#header_card_<%= @product.id %>").find("#unlike_<%= @product.id %>").replaceWith("<div class='like_<%= @product.id %>'><a data-remote='true' rel='nofollow' data-method='post' href='/clients/products/<%= @product.id %>/favorites %>'><i class= 'fa fa-heart favorite-active'></i></a></div>");     } }); 
 
 

Relacionados problema

0  $ .AJAX y WEBMETHOD / PAGEMETHODS  ( Ajax and webmethod pagemethods ) 
Estoy tratando de llamar a un Pagemethod que no tiene parámetros, y parece que no puedo hacerlo funcionando. Si tengo un solo parámetro en el Pagemethod, fu...

20  Manera fácil de Ajax Webcontrols  ( Easy way to ajax webcontrols ) 
Tengo una aplicación web que estoy tratando de optimizar. Algunos de los controles están ocultos en estilo de diálogo DIVs . Entonces, me gustaría que se car...

0  AJAXTOOL KIT POPUP EN USERETROL  ( Ajaxtool kit popup in usercontrol ) 
Tengo página en la que usé el USERCONTROL en el control del usuario, uso una ventana emergente del kit AJAXTOLL para cargar un div en el control de usuario, f...

2  Ajaxform en jQuery  ( Ajaxform in jquery ) 
Estoy usando AjaxForm. Ahora he encontrado un problema. Mi idea es cuando el usuario ingresa al nombre de usuario, si es un nombre de usuario incorrecto, debe...

1  LightBox no funciona en AJAX.UPDATER DIV (prototipo)  ( Lightbox not working in ajax updater div prototype ) 
Estoy usando un Ajax.Updater Llame para producir una sola lista de listas de alquiler en un div. Un menú desplegable de todos los listados de alquiler comie...

1  ASP.NET AJAX, Cuelga a veces  ( Asp net ajax hangs sometimes ) 
Yo uso ASP.NET AJAX en mi proyecto. y utilizando sesión para la gestión del estado. En algún pedazo de código, tengo algunos ModalPop, que contienen UCS y h...

11  Control deslizante jquery - Función de llamada después de la diapositiva  ( Jquery slider call function after slide ) 
Tengo una calada de jQuery que estoy usando para establecer la puntuación en una aplicación web. Yo orignally lo tenía para que el usuario haga clic en un bot...

167  Modificar la URL de la barra de direcciones en la aplicación AJAX para que coincida con el estado actual  ( Modify address bar url in ajax app to match current state ) 
Estoy escribiendo una aplicación AJAX, pero a medida que el usuario se mueve a través de la aplicación, me gustaría que la URL en la barra de direcciones se a...

13  Estado de seguimiento utilizando ASP.NET AJAX / ILEALBACKEVENTHANDHANDERLLER  ( Tracking state using asp net ajax icallbackeventhandler ) 
Tengo un problema con el mantenimiento de estado en una página ASP.NET AJAX. Versión corta: Necesito alguna forma de actualizar la página ViewState después de...

0  Realización de jquery show / ocultar en contenido creado dinámicamente  ( Performing jquery show hide on dynamically created content ) 
Tengo una página que creé con jQuery, y en esta página es una tabla donde las filas de la tabla tienen nombres de clase que los identifican como un cierto col...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos