Rails PJAX not working - ruby-on-rails

I have added the pjax javascript.
In my view I have:
<div data-pjax-container>
<%= yield %>
</div>
But still onclick the hole page updates.

Be sure you have included this line in app/assets/javascript/applications.js:
//= require jquery.pjax
Add an id attribute to the div:
<div id="target_pjax_container" data-pjax-container>
<%= yield %>
</div>
And make an explicit call to a pjax div from a link in your views:
<%= link_to 'user', user_path, :'data-pjax' => '#target_pjax_container' %>
Note:
The gem used is 'pjax_rails'. Always check that javascript isn't broken (with firebug or equivalent - You can also use it to sniff the network and view the pjax request).

Maybe you forget to add the line:
//= require pjax
to app/assets/application.js?

Related

how to manually include remotipart js?

I need to conditionally use the remotipart gem. The [docs][1] say just add it to application.js:
//= require jquery.remotipart
But I don't want it to be included with every single view, instead I want to conditionally include it, however when I try:
<%= javascript_include_tag "jquery.remotipart" %>
I get an error. How do i reference a js included as part of a gem generically, and remotipart js specifically?
Thanks,
Kevin
But I don't want it to be included with every single view, instead I want to conditionally include it, however when I try:
What means conditionally in this context? The most simplest way would be
<%= javascript_include_tag "jquery.remotipart" if condition %>
Also you could use content_for like this on the views where you want to include it:
# in your view
<% content_for :js do %>
<%= javascript_include_tag "jquery.remotipart" %>
<% end %>
# in your layout.html.erb
<%= yield :script %>
https://apidock.com/rails/ActionView/Helpers/CaptureHelper/content_for
If you meant that you get an error that the JS file can't be found, please update your question with what library (webpacker, sprockets) and Rails version you use.

How to disable Turbolinks in a specific page other than using body tag?

%div.col-md-2
Last updated (h:m):
%div
%body{"data-turbolinks" => "false"}
%strong= current_user.last_active_at ? local_time(current_user.last_active_at, '%d/%m/%Y %H:%M') : 'N/A'
Turbolinks is disabled when using "data-turbolinks" => "false" in the body tag and works fine but we cannot use body tag somewhere middle of the code, so trying it in any other tag like div does not work in disabling the turbolinks ,so is there any way of doing it without using body tag ?
You can do something like this:
In your app/helpers/application_helper.rb file, create a blacklist turbolinks array which will have all the pages on which turbolinks needs to be disabled in the format controller/action. Say you don't want turbolinks in welcome controller's index action, articles controller's show action:
# app/helpers/application_helper.rb
module ApplicationHelper
def turbolinks_blacklist_array
["welcome/index", "articles/show"]
end
end
Then in your app/views/layouts/application.html.erb:
<body
<% if turbolinks_blacklist_array.include?("#{params[:controller]}/#{params[:action]}") %>
<%= 'data-turbolinks="false"'.html_safe %>
<% end %>
>
<%= yield %>
</body>
EDIT: Or use a onelines:
<body <%= turbolinks_blacklist_array.include?("#{params[:controller]}/#{params[:action]}") ? 'data-turbolinks="false"'.html_safe : '' %>>
</body>

Rails In line edit

How can I edit the following below in the index page? I would like to be able to inline edit and update the following the view has the index action
<% #request.each do |s| %>
<%= s.message %>
<%= s.date %>
<% end %>
Tried the gem best in place but i doesnt seem to work so whenever i tried
<%= best_in_place #request, :message %> it throws an error of unknown method :message. Isnt this <%= best_in_place #request, :message %> the same with this <%= s.message %>
Does best in place work in rails version 5.1.4 and how can I make the inline edit to work ?
Does best in place work in rails version 5.1.4 and how can I make the
inline edit to work ?
Yes, it works, you need jQuery and to add the gem and JS libraries.
For jQuery:
$ yarn add jquery
Then in your application.js file:
//= require jquery
For best_in_place, add the gem in the Gemfile:
gem 'best_in_place', '~> 3.0.1'
Then the library in your application.js file:
//= require jquery
//= require best_in_place
...
$(document).ready(function() {
/* Activating Best In Place */
jQuery(".best_in_place").best_in_place();
});
You see the best_in_place js right after jquery, and the initialization in the same file - you must add //= require_tree . for initializing in the same file.
Then in your view you need to pass the object and the attribute:
<% #request.each do |request| %>
<%= best_in_place request, :message %>
...
<% end %>

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

Rails: dropdown menu

Environment: Rails 3.2.3
I am editing this question to include the helper module's source code, and the suggestions here:
This is my first attempt at doing a dropdown menu in a Rails application. I tried looking for help on the topic, but what complicated things is that the term dropdown menu is used for actual dropdown menu (page menu), as well as what is dropdown lists, form options, form selections, etc. in questions,and forums, making it difficult to find the information I'm looking for.
I found a pointer to https://github.com/dkeskar/rails-jquery-dropdown, (source code at end of post) and following the instructions, I downloaded jquery_dropdown_helper.rb: ) and placed it in /lib
In my Gemfile, I have the following:
gem 'jquery-rails'
In _header.html.erb, I have the following:
<% require 'jquery_dropdown_helper' %>
....
<%= hidden_field_tag :sort_criteria %>
<%= dropdown_tags :sort_criteria, 'Select Criteria',
%w(Category Status Amount-High Amount-Low) %>
But this is not working. Here's the error code I'm getting:
undefined method `gsub' for :sort_criteria:Symbol
I looked at the trace, and it seems as if this line in jquery_dropdown_helper.rb is the issue:
id = options[:id] || "#{field.gsub(/[[]\s]/, '-')}-selector"
Any ideas?
SOLUTION TO THE DROPDOWN MENU ISSUE
I was looking for a way to have dropdown menus in my rails applications, but could not get an answer to this question. Following a couple of days of research, I did find a solution, using the Twitter gem 'twitter-bootstrap-rails'.
Add the following to your Gemfile:
gem 'twitter-bootstrap-rails'
Add the following to your app/assets/javascripts/application.js
Make sure it's in this exact order:
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require bootstrap
Then, where you want the dropdown menu, add the following:
<ul class="nav nav-pills">
<li class="dropdown" id="admin_menu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#admin_menu">
ADMIN
</a>
<ul class="dropdown-menu">
<% Admin_menu.each do |menu_text,menu_action| %>
<li><%= menu_text %></li>
<% end %>
</ul>
</li>
</ul>
Note that I have the following hash:
Admin_menu = Hash.new
Admin_menu["Events"] = "events#index"
Admin_menu["Categories"] = "categories#index"
Admin_menu["Panels"] = "panels#index"
Assuming that you have scaffolding for the following: events, categories, and panels, it should all work
jquery_dropdown_helper.rb does not provide a method called sort_criteria. I think the example should be:
<% require 'jquery_dropdown_helper' %>
....
<%= hidden_field_tag :sort_criteria %>
<%= dropdown_tags :sort_criteria, 'Select Criteria',
%w(Category Status Amount-High Amount-Low) %>
:sort_criteria is just the name of the form element and can be a symbol or a string (i.e. :sort_criteria or 'sort_criteria')

Resources