rails 5 best in place only updating some <li>s - ruby-on-rails

This is strange. I am using the "best-in-place" gem in combination with an unordered list with each list item including the 'best-in-place' helper. The first item in the list works fine, but subsequent list items have issues. This is the code in my partial (views/_dash.html.erb):
<table class = 'table-hover'>
<li>
<tr>
<th class = 'name'> <%= best_in_place offer, :plan_name, :type => :input %> </th>
<th class = 'name'> <%= best_in_place offer, :price, :type => :input %> </th>
<th class = 'bids'> Bids(<%= #user.active_bids.count %>) </th>
</tr>
</li>
And the code in the associated view:
<ul class = "offers">
<%= render #offers %>
</ul>
<%= will_paginate %>
The first item in the list works fine. Each field displays the right information, is editable, and the edits persist in the db. The second item displays the right fields, is editable, updates the info. However, after a refresh, the fields revert to the original value discounting the edits made. Further items in the list display the right fields initially, but some are not editable, some are editable but do not update the info, some are editable but the edited info does not persist.
This is the code for the associated controller:
def update
#user = current_user
#offer = Offer.find params[:id]
if #offer.update_attributes!(offer_params)
respond_to do |format|
format.html { redirect_to( #offer )}
format.json { render :json => #offer }
end
else
respond_to do |format|
format.html { render :action => :show } # edit.html.erb
format.json { render :nothing => true }
end
end
def dash
#user = current_user
#offers = current_user.offers.paginate(page: params[:page])
respond_to do |format|
format.html
format.json {render :json => #offer}
end
My application.js looks like this:
//= require jquery
//= require jquery.purr
//= require best_in_place
//= require 'rest_in_place'
//= require jquery_ujs
//= require best_in_place.jquery-ui
//= require bootstrap
//= require turbolinks
//= require_tree .
This is my offers.coffee file:
jQuery ->
$('.best_in_place').best_in_place()
Please let me know if you need more info, if I missed something obvious, or if there is a fix. SOS.

OK, fixed it. It was an issue with one of my before filters. Sorry about that folks.

Related

Transmit data from form to datatable

I'm using the ajax-datatables-rails gem to use the datatables jquery plugin with server-side processing.
I have the table and a form below to filter the table with data that is not displayed in it.
Here is my table in my index.html.erb file :
<table id='dttb' role='datatable' class="table table-striped table-bordered" data-source="<%= datatable_users_path(format: :json) %>">
</table>
Here is my form in the index aswell :
<%= form_tag(datatable_users_path, method: :get) do %>
<%= submit_tag 'Apply filters' %>
My controller is rendering json like this :
respond_to do |format|
format.html { render :layout => 'application' } # index.html.erb
format.xml { render :xml => #users }
format.json { render json: UserDatatable.new(params) }
end
and my user_datatable.rb gets its raw_record with this :
def get_raw_records
#users = User.all
if(#id.present?)
#users = #users.id(#id)
end
return #users
end
The problem is this #id in the last file. This should be the params[:id] that my form is giving to the controller, and i want to use it in a scope to filter the User.all with it, so that the table displays only the entries that passed the scope.
I don't understand how to pass the data that my form gets to the user_datatable.rb
On the gem github there is a way to do it but it doesn't seem to work with the form data that i'm getting in the controller.
Do you guys have any idea on how to do this ?

Why isn't this ajax:success call working?

I know there's a ton of threads about this, but I can't seem to figure out what's broken here. I have a remote link that calls a like method.
When I click the like link...
What's happens:
The like is created (as expected).
The page does not refresh (as expected).
What should happen:
Everything above, plus the content change in like.js.erb. I've added a console.log to this file and it does not show up when clicking the like link.
_like.html.erb
<% recipe = recipe || #recipe %>
<%= link_to unlike_recipe_path(recipe), remote: true, class: "recipe-card__like like" do %>
<i class="heart icon"></i>
<% end %>
note: the partial is rendered both on a show page and within an index, which is why I use the || statement.
like.js.erb
$('.like').bind('ajax:success', function(){
console.log('like clicked');
$(this).closest('.like').hide();
$(this).closest('.like-container').html('<%= escape_javascript (render partial: 'unlike', recipe: #recipe ) %>');
});
routes.rb
resources :recipes do
resources :likes
member do
get "/like", to: "recipes#like"
end
end
recipes_controller.rb
def like
#recipe = Recipe.find(params[:id])
#like = #recipe.likes.create(recipe_id: #recipe.id, user_id: current_user["uid"])
respond_to do |format|
format.html
format.js
end
end
application.js
//= require jquery
//= require jquery_ujs
//= require rails-ujs
//= require turbolinks
//= require semantic-ui/sidebar
//= require_tree .
You can do it in many ways using JS/Html/Ajax.
#like.js.erb
#if wanna validate the request success or fail use #like
# just make sure #like is not string type otherwise it will always success in JS file.
if("<%= #like %>"){
console.log('like clicked');
$(this).closest('.like').hide();
$(this).closest('.like-container').html('<%= escape_javascript (render partial: 'unlike', recipe: #recipe ) %>');
}
Also, in controller no need recipe_id: #recipe.id. It's supposed to assign automatically.
#like = #recipe.likes.create(user_id: current_user["uid"])
Like I said in comment, the moment you .bind('ajax:succeed') is already to late because this file is indeed the result. Your erb file will be filled before rendering the output so you could do
<% if #result == "success" %>
console.log('like clicked')
$(this).closest('.like').hide();
$(this).closest('.like-container').html('<%= escape_javascript (render partial: 'unlike', recipe: #recipe ) %>');
<% else %>
console.log('something went wrong, this person has to many likes')
<% end %>
where #result is your controller variable
My link was calling the unlike method instead of the like method. Simple typo.
Original
<% recipe = recipe || #recipe %>
<%= link_to unlike_recipe_path(recipe), remote: true, class: "recipe-card__like like" do %>
<i class="heart icon"></i>
<% end %>
What it should be
<% recipe = recipe || #recipe %>
<%= link_to like_recipe_path(recipe), remote: true, class: "recipe-card__like like" do %>
<i class="heart icon"></i>
<% end %>

Flash Notice Alert dismiss-able bootstrap and rails -- Cannot Delete flash notice

I am using an emailer with ruby on rails and it has a flash notice on completion. I cannot seem to delete the bootstrap flash notice when I Press the x button listed next to the flash notice. I have tried jquery.
Whenever I put the class close on the button. the button does not even show up to even be clicked. Here is some of my code.
This is my create.html.erb
<div>
<% flash.each do |key, value| %>
<div class="alert-dismissible flash_notice" role="alert">
<button type="button" data-dismiss="alert" aria-label="Close">xxx<span aria-hidden="true">×</span></button>
<%= value %>
</div>
<% end %>
</div>
This is my contact controller that emails me from a contact me form and renders the flash notice
class ContactsController < ApplicationController
def new
#contact = Contact.new
end
def create
#contact = Contact.new(params[:contact])
#contact.request = request
if #contact.deliver
flash.now[:notice] = 'Thank you for your message. We will contact you soon!'
else
flash.now[:error] = 'Cannot send message.'
render :new
end
end
end
Here is some of my application.js code... it is messy and I have tried all of the following and left them all up to show you what I have done so far in my attempts.
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
$('.delete_notice').click(function() {
$('.alert-dismissible').hide();
});
$('.delete_notice').click(function() {
$('.alert-dismissible').close();
});
$('.delete_notice').click(function() {
$('.flash_notice').hide();
});
$('.delete_notice').click(function() {
$('.delete_notice').close();
});

React component is not rendering activerecord relation in Rails view

I am trying out react and Rails. I have a very simple rails app with one Model called "Story".
I installed the react-rails gem:
gem 'react-rails', '~> 1.0'
and followed the suggested installation procedure.
I have scaffolded the story model and made the the 'new' method to root in my routes.rb file. All works fine.
I have added a #stories instance to my 'new' method in storiescontroller that holds all records from the database:
# GET /stories/new -- file: stories_controller.rb
def new
#stories = Story.all
#story = Story.new
end
and in my view I added this line of code
# -- file: new.html.erb
<%= react_component('Story', { :data => #stories }) %>
and in my javascript file I have this code:
# -- file:assets/javascripts/components/story.js.jsx
var Story = React.createClass({
displayName: 'Story',
propTypes: {
title: React.PropTypes.string,
description: React.PropTypes.node
},
render: function() {
return (
<div>
<div>Title: {this.props.title}</div>
<div>Description: {this.props.description}</div>
</div>
);
}
});
I thought this should work. But it don't. When I replace the code in the view page with this:
<%= react_component('Story', { :title => "my title", :description=> "my description" }) %>
Then both the 'title' and 'description' are rendered correctly.
It seems that the #stories instance from my view is not parsed correctly to the react component. Then I tried the old-fashion way with
<% #stories.each do |story| %>
<div class="panel">
<h3><%= story.title %></h3>
<p><%= story.description %></p>
</div>
<% end %>
and that works OK. So no problems with the #stories instance. It holds all records and is accessible form the new.htm.erb file.
I am loading the react files after turbolinks in application.js. And settled with this code
# -- file: application.js
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require_tree .
$(function(){ $(document).foundation(); });
I can't find the answer on the internet so i hope someone can help me with my first attempt to get react running in my rails environment.
If #stories is an array and passed like this
<%= react_component('Story', { :data => #stories }) %>
then that array will be available on a prop named data, ie., this.props.data will be the array of stories. There is no magic unpacking going on here which will allow you to access each storys properties.
<% #stories.each do |story| %>
<%= react_component('Story', { :story => story }) %>
<% end %>
will allow you to access your data like so this.props.story.title and also render a div for each story you have in your array

processing controller actions as JS instead of HTML

So I have the following form:
<%= form_tag url_for(:controller => 'profile', :action => 'follow_topic'), :remote => true do %>
<%= hidden_field_tag :topic_id, topic_id %>
<%= content_tag :button, :class => 'link', :onclick => "javascript:document.getElementById('followtopic#{Topic.find(topic_id).identifier}').innerHTML='Following...'" do %> Follow <% end %>
<% end %>
and I'm trying to get the controller to process it as JS in place of HTML. The funny thing is I have a form exactly like this in another spot in the app that seems to work fine, and the controller definitions are the same. Can't quite figure out the problem. Any ideas on what I should be checking first?
def follow_topic
#topic = Topic.find(params[:topic_id])
current_user.follows << #topic
respond_to do |format|
format.js
end
end
You got it right except your format.js isn't doing anything. What are you expecting in your form submit? and what are you expecting in return? a json or http response 200?
specify that in your format.js like so:
...
respond_to do |format|
format.js { render :nothing => true, :response => :ok if current_user.follows << #topic }
end
...
or something to that effect.
This question is OLD but it's unanswered and I just struggled with the same problem for hours, so hopefully this will help someone in future.
Make sure app/assets/javascripts/application.js contains:
//= require jquery
//= require jquery_ujs
And that erb contains <%= javascript_include_tag "jquery", "jquery_ujs" %> and not just a <script> tag.
This is what fixed it for me.

Resources