Making a simple rails website but can not make a submit button? - ruby-on-rails

I am a newbie and I am trying to make a very simple website by Rails and I am trying to upload video by making a submit button. At first, I am trying to copy Wistia embed link and paste it into file show.html.erb, and I can show that video. But my problem is, I want to make a submit button and I can submit a new video, no need to copy paste any link from Wistia into file show.html.erb.
Here is my code at show.html.erb if you need
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-image">
<script src="//fast.wistia.com/embed/medias/j38ihh83m5.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_j38ihh83m5" style="height:349px;width:"100%"> </div>
</div>
<div class="card-content white-text">
<div class="row">
<div class="col m4 center">
<%= image_tag ("courses/1.png"), class: "img-responsive"%>
</div>
<div class="col m8">
<span class="card-title"><%= #course.title %></span>
<p><%= #course.description %></p>
</div>
</div>
</div>
</div>
</div>
Thank you very much.

you should create a form (the submit button is included) and learn about Active Storage

Related

How to use link_to in rails to put multiple things in a single link?

This is my code:
<div class="column">
<div class="post-module">
<a href="https://www.livescience.com/59802-should-we-fear-
intelligent-robots.html" >
<div class="thumbnail">
<div class="date">
<div class="day">14</div>
<div class="month">Jul</div>
</div>
<img src="#"/>
</div>
<div class="post-content">
<div class="category">Robots</div>
<h1 class="title">Should We Fear The Rise of Intelligent
Robots? </h1>
<h2 class="sub_title"> Robots will unite. </h2>
<p class="description"></p>
</div>
</a>
</div>
</div>
I want to make that code in rails but I am just a beginner in rails and I wasn't able to find something that could help me in this. I only know the basic idea of the link_to in rails.
link_to method can take a block and display it's evaluation as a link content:
<%= link_to "https://www.livescience.com/59802-should-we-fear-intelligent-
robots.html" do %>
<div class="thumbnail">
<div class="date">
<div class="day">14</div>
<div class="month">Jul</div>
</div><img src="#"/>
</div>
<div class="post-content">
<div class="category">Robots</div>
<h1 class="title">Should We Fear The Rise of
Intelligent Robots? </h1>
<h2 class="sub_title"> Robots will unite. </h2>
<p class="description"></p>
</div>
<% end %>

Bootstrap columns not aligned properly

Currently I am making a twitter clone using RubyOnRails and bootstrap as the framework. When trying to distribute some text in a post panel using the "col-sm" div class, the text seems jammed together on the left,
as seen here.
Here is my code:
<div class="row">
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-body">
<p>status</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<p>trend</p>
</div>
</div>
</div>
<div class="col-xs-6">
<%= render '/components/post_form' %><br></br>
<% for #p in #posts %>
<div class="panel panel-default post-panel">
<div class="panel-body">
<div class="col-sm-1">
AVATAR
</div>
<div class="col-sm-11">
<p><%= #p.content %></p>
</div>
<div class="col-sm-12">
LINKS
</div>
</div>
</div>
<% end %>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-body">
<p>about</p>
</div>
</div>
</div>
</div>
I am using the latest bootstrap sass version 3.3.6 which is included in the gemfile. Is there something wrong with the code or does the latest version of bootstrap mean I need to do something different?
Look at this section:
<div class="col-sm-1">
AVATAR
</div>
<div class="col-sm-11">
<p><%= #p.content %></p>
</div>
<div class="col-sm-12">
LINKS
</div>
The first issue is the text "AVATAR" is wider than 1 bootstrap column, so it's extending out of your container. using col-sm-2/col-sm-10 may fix the issue.
Second, column sizes should add up to 12 columns per row. Here you have a col-sm-1, col-sm-11, and col-sm-12 all in the same row.

How to select a href link randomly | Watir

Using the following HTML I am trying to randomly select one of the href links
<div class="field">
Check availability
</div>
</div>
</div>
</div>
</article>
</div>
<div class="views-row views-row-3 views-row-odd views-row-last">
<article id="node-cruise-47" class="node node-cruise node-search-result node-cruise-search-result node-published node-not-promoted node-not-sticky author-admin odd clearfix s-search-result" itemscope="" itemtype="http://schema.org/Product">
<div class="search-result-inner clearfix">
<div class="s-search-result--left">
<div class="s-search-result--middle">
<div class="s-search-result--right">
<div class="field field-name-field-price field-type-number-decimal field-label-inline clearfix price-summary">
<div class="field field-name-field-departure-duration field-type-number-integer field-label-hidden price-conditions primary-condition">Based on 7 nights, yacht only</div>
<div class="availability-button-wrapper-search">
<div class="field">
Check availability
Note that several href links are present on the page not just these 2. I am using the following code
b.links(:xpath => '//div[#class="field"]/a').click
However I get:
"undefined method `click' for #<Watir::AnchorCollection:0x2ba1858> (NoMethodError)"
Try to pick randomly from array
b.links(:xpath => '//div[#class="field"]/a').to_a.sample.click

Trying to create a specific data-target for bootstrap modal through ruby iteration

I am using bootstrap modal on my rails project. On this page I have to iterate through my slides and for each slide I want to create a modal. I came up with this solution:
<% #slides.each do |slide| %>
<div class="row slidecard text-center">
<div class="col-xs-12 ">
<h2><%= slide.name.upcase %></h2>
<p><em><%= slide.description %></em></p>
<a href="#" data-target=<%=slide.id%> data-toggle="modal">
<%= image_tag slide.picture.url(:medium) %>
</a>
<div class="modal fade" id= <%=slide.id%>>
<div class="modal-dialog mymodal">
<div class="modal-content text-center">
<div class="modal-body">
<%= image_tag slide.picture.url(:original) %>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div
</div>
I give to the link containing the image the data-target attr and gives it the value that has the slide.id so I can give a specific id and data target that links image and modal. But the problem is that for the modal to work I need to add "#"in front of slide.id to have something that looks like data-target="#39"
I tried a couple of things such has :
data-target= "#"<%=slide.id%>
and other stuff but nothing gives me the result I want and make the modal work !
licence
try to this

Multiple ajax forms in same page does not work properly

I have a problem with multiples ajax forms in index view, only first works with remote: true attribute.
This is my index view with a forms
<% #mensagens.each do |mensagem| %>
<%= form_for(mensagem, remote: true,:authenticity_token => true) do |f| %>
<div class="row">
<div class="col-md-9">
<div class="widget">
<!-- BLOCK -->
<div class="row innerAll half border-bottom">
<div class="col-sm-12">
<div class="media-body">
<div class="innerAll half">
<div class='col-md-10'><%= f.number_field :avaliacao %></div>
<div class='col-md-2'><%= mensagem.slug %></div>
</div>
</div>
</div>
</div>
<div class="row innerAll half border-bottom">
<div class="col-sm-12">
<div class="media-body">
<div class="innerAll half">
<%= f.text_area :texto, :class=>"col-md-12 form-control", :placeholder=>"Mensagem" %>
</div>
</div>
</div>
</div>
<div class="row innerAll half border-bottom">
<div class="col-sm-12">
<div class="media-body">
<div class="innerAll half ">
<div class="col-md-2"><%= f.check_box :aprovado %></div>
<div class="col-md-2"><%= f.check_box :status %></div>
<div class="col-md-6 btn"><%= f.text_field :autor,:class=>"form-control", :placeholder=>"Autor" %></div>
<div class="col-md-2"><%= f.submit "Salvar", :class=>"btn btn-success" %></div>
</div>
</div>
</div>
</div>
<div class="row innerAll half border-bottom">
<div class="col-sm-12">
<div class='notyfy_wrapper mensagem_<%= mensagem.id %>'>
<div class="notyfy_message">
<span class="notyfy_text">
<div id="alerta"></div>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- BLOCK -->
</div>
</div>
<% end %>
<% end %>
This is a result: (http://droido.com.br/html.html)
This first form works fine! but second, send a normal request (non-ajax) and redirect to show page!
At droido.com.br/mensagens the second form is nested inside the first. It appears the second This is why it isn't being set up with ajax, as forms are not supposed to be nested, so I expect Rails is not getting to it.
The problem is, based upon your code above, I am not finding any missing close tags. On the page it looks like the <div class='row'> is missing the closing tag. I suggest you knock out a section at a time until you find the problem. Or, delete the entire content and add back until you find it.
Have you used the Chrome dev tools? If not, try it out. Go to the web page, right click, inspect. It will show the tags in a hierarchical manner.

Resources