I've spent some time on trying to add function of uploading, posting and displaying images in my application. I've tried different methods, eventually finding out that 'Trix' is what I need to reach that goal.
The issue here is that my application structure is quite different from those that I see in 'trix' tutorials, and I have no idea what I am doing :(((
Let's start from the fact that my application.js is located in ->
[app]>
-[javascript]
-[packs]
-application.js
and looks very different from what I see in tutorials. However, I tried to adapt like so -
...
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require('trix')
...
Instead of writing //= require trix.
Another slight difference is that my "application.css" is not ".scss", but I figured it is not that big of a deal. So I went ahead and pasted *= require trix in there.
At first , when I loaded page I've got an error couldn't find file 'trix' with type 'text/css' , but after restarting server it wasn't there anymore (which is normal). Next step would be adding the code ... but it seems that most people have _form.html.erb. And here is where I need help. my "Post" structure is like this ->
[views]>
- edit.html.erb
- index.html.erb
- new.html.erb
- show.html.erb
where new.html.erb contains the form for submitting a post ->
<div class="main posts-new">
<div class="container">
<h1 class="form-heading">Create a new post</h1>
<%= form_tag("/posts/create") do %>
<div class="form">
<div class="form-body">
<% #post.errors.full_messages.each do |message| %>
<div class="form-error">
<%= message %>
</div>
<% end %>
<textarea name="content"><%= #post.content %></textarea>
<input type="submit" value="Post">
</div>
</div>
<% end %>
</div>
</div>
This is where the difference really confuses me... Where do I add 'trix' ? I've tried replacing textarea with trix-editor, the only changes I've got , where two small overlapping squares instead of submit form.
Help. :(
Related
I'm using Pagy gem for pagination in my rails 5 project. Pagination itself works fine, but when I add a UI widget (provided by pagy: pagy_items_selector(#pagy)) above pagination(pagy_nav(#pagy)) chunk in my view file, it's breaking the page links. Example: http://www.localhost:3000/articles?page=5¤t_param=-pagy-2370055651028177601--items-
Instead if I place pagination(pagy_nav) above items selector (pagy_items_selector), the url is neat and works like a charm. Example: http://www.localhost:3000/articles?page=4¤t_param=4
Here's my html code -
<div class="items_per_page">
<!-- Pagy UI widget for users to select items per page -->
<%= pagy_items_selector(#pagy).html_safe %>
</div>
<!-- displaying a list of article titles -->
<% #articles.each do |article| %>
<div class="row justify-content-md-center newsbox">
<div class="article-content">
<div class=" panel-title">
<%= link_to article.title, article_path(article) %>
</div>
</div>
</div>
<% end %>
<!--Pagy Nav links -->
<div class="pager">
<!-- Pagination nav links -->
<%= pagy_nav(#pagy).html_safe %>
</div>
That's a Pagy bug see #117. It has been fixed in Pagy version 1.3.1.
Updating your Gemfile should fix the problem:
bundle update pagy
If it doesn't, check the required gem in the Gemfile. It should be something like:
gem 'pagy', '~> 1.3` # or '1.3.1'
And update again.
I'm trying to make a simple website following the One Month Rails tutorial online, and since bootstrap is constantly updating I've decided to mess around with it by myself.
I have the following file home.html.erb and tried to apply the jumbotron effect from bootstrap
http://getbootstrap.com/components/#jumbotron
<div class = "jumbotron">
<h1>Welcome to One Month Rails</h1>
<p>
You've found the home page!! <%= link_to "Google", "http://www.google.com"%>
</p>
<p>
<%= link_to "Sign Up Now!", "#" %>
</p>
</div>
The page, however, does not show the jumbotron effect. What am I doing wrong? I know that bootstrap should be working because I've added some styling effects using bootstrap classes like nav and btn
Edit: I've read from a few other questions and apparantly the jumbotron class is bugged with the rails gem. I will try to manually incoporate bootstrap and see how it turns out.
Can you try adding something else to this particular page and style it using bootstrap (like a simple button)? That way you can ensure bootstrap is working on this specific page.
I don't see any problem with the code you pasted.
EDIT:
Try this sample code:
<div class="container">
<div class="jumbotron">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a>
</p>
</div>
</div>
Question about Rails4, I trying to retrieve the "Find Stuff" variable, in the erb form. This
is a search field, using zurb foundation - so the extra styling annotations floating around.
I don't have a model as this is just a form for reading the search input field - which is
in the tag, with placeholder as "Find Stuff".
To use normal Rails4 terminology, I would
like to pass the value of the "Find Stuff" field to the salutation controller, and I tried
many ways, but was unsuccessful, when I used render params[:post].inpect, it shows nil -the
variables that I pass to the controller, on clicking on the "Search" link_to, link. I tried adding an id field to the tag, and that too showed nil on render params[:post].inspect.
Any help, thanks in anticipation.
hello.html.erb form below.
<html>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Hello World!</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span>
</li>
</ul>
<ul class="right">
<li class="has-form">
<div class="row collapse">
<div class="large-8 small-9 columns">
<input type="text" placeholder="Find Stuff" >
</div>
<div class="large-4 small-3 columns">
<%= link_to "", :controller =>
'salutation', :action =>'hello',
:class=>"alert button expand" %>
</div>
</div>
</li>
</ul>
</section>
</nav>
</body>
</html>
Controller follows
Salutation Controller follows
class SalutationController < ApplicationController
def new
#test = ''
end
def hello
#message = 'Hello World!'
#test = params[:Find_Stuff]
end
end
Wrap your search box in a form element, give your input a name and away you go. You can use the rails form helpers as well - see http://guides.rubyonrails.org/form_helpers.html which has a nice intro to creating a search form
<div class="row collapse">
<%= form_tag("/salutation/hello", method: "post") do %>
<div class="large-8 small-9 columns">
<%= text_field_tag(:find_stuff) %>
</div>
<div class="large-4 small-3 columns">
<%= submit_tag("Search") %>
</div>
<% end %>
</div>
Further to #slapthelownote's answer, the reason you're getting an error is because you're not passing any params to your controller
We've got something like what you want working at http://firststopcosmeticshop.co.uk (top search box) -- using a form_tag
If you want to see live code, I'll be happy to post!
Params
Using a form allows you to set various variables & then submit them to the controller as you've set them. I'd recommend using the form in the other answer, but to understand how it works, you need to read up on the Rails forms tutorial
Basically, the params hash is populated in the middleware of Rails -- from any data sent by HTTP to your backend
With links, you can only send GET params (domain.com/route¶ms=value), whilst with HTML forms, you can set POST params which are passed through the browser (not the URL)
playing around with rails and got a little problem with the layout.
I have a simple home mvc.
Content of the home view is just
<h3>Home</h3>
<p>content</p>
I have my application view for overall design with some partials and so on.
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3>Head goes here</h3>
</header>
<%= yield %>
</section>
Now I come to my main Part for displaying the different pages with yield.
How should i split up the template? Should I put the complete application part to the home view to display the Heading in the right place? Or is there a possibilty to get the Heading different from the yield?
Any Suggestions?
P.S.: If someone have a nice tutorial or website for explaining How to structure and plan the views. A comment below would be nice.
best regards
dennym
I think that you are asking about using named yields.
From your structure, we add a yield named header
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3><%= yield :header %></h3>
</header>
<%= yield %>
</section>
And then we set the content for that named yield:
<% content_for :header do %>
My header
<% end %>
<p> Rest of page ...</p>
If you are just trying to change you header periodically I would suggest either you have different layouts that have different headers which you could specify in your controller by
layout :layout_name, or dynamically change header content using js.
This is mostly an implementation question for a webapp I'm trying to develop. I'm relatively inexperienced so I want to check if my idea for implementation is decent or if there's a much easier way.
The Problem
I want to create a scrollable sidebar that automatically fills with small containers that hold a user profile photo and their name. The basic idea is that a user is a member of a class and the sidebar should hold all of their classmates. The sidebar should be a fixed size and the user should be able scroll down through their classmates and click on a user if they want visit their page.
My Ideas For Implementing
It seems to me that I will need to use some embedded ruby to direct the filling process. Some psuedocode would be something along the lines of "For every user in this class, create a container with their picture and name". I haven't given a lot of thought as to actually handle this step but I'm mostly concerned with the actual html structure.
My idea is to do something like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!-- for each user in class -->
<div class="container-fluid">
<div class="row-fluid">
<div class="span">
<!-- Load appropriate user data -->
</div> where appropriate...
Is this the "proper" way to go about implenting this? I haven't been able to find much information on the idea and visit an example site's source code isn't all that helpful as the sidebar is already filled...
I would separate your sidebar HTML and logic into a partial, E.g. "app/views/shared/_sidebar.html.erb". From there on, you can accept a collection of data from whatever view you're rendering.
View file
<div class="container-fluid">
<div class="row-fluid">
<%= render "shared/sidebar", collection: #users %>
</div>
</div>
Sidebar partial
<div class="span2">
.....
<% #users.classmates.each do |e| %>
<%= e.name %>
<% end %>
.....
</div>