Order of elements become wrong after rendering erb - ruby-on-rails

I have a wired problem when developing rails. The order of elements in container is
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
For most of the pages, it works well. But it goes wrong when it renders following page
<% provide(:title, 'All Apps') %>
<h1>All Apps</h1>
<table class="apps table">
<thead>
<tr>
<th>App Name</th>
<th>Status</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<%= render #apps %>
</tbody>
</talbe>
The order of elements in container becomes
<div class="container">
<h1>All Apps</h1>
<footer class="footer">...</footer>
<pre class="debug_dump">...</pre>
<table class="app table">...</table>
</div>
What confuses me is that only this page goes wrong. I am using Rails 4.0.5.

What is most probably happening is your browser HTML parser is trying to fix things, by putting elements "floating" in a table (without being in a tr>td) before the table. You probably have an unclosed tag.
(which is why it's vering important in cases like these to check the generated html and compare it to the browser's DOM panel - it can be very different !)

Related

How ignore empty response in ruby view loop

as i'm new to ruby and rails in general i would have a short question cause i'm stuck at a minor issue.
I'm calling a content API from my controller and looping thru the response in the view directly. The main problem is: If one of the objects, has an empty value which i'm calling..it breaks the view.
Question would be how can i scip the elements which are emtpy...in example if post["heroimage"]["url"] is empty?
Example view:
<div class="gallery">
<% #blog.each do |post| %>
<a target="_blank" href="blog/<%= post["id"] %>">
<img src="<%= #host + post["heroimage"]["url"]%>" alt="" width="600" height="400">
</a>
<div class="desc"><%= post['description'] %></div>
<% end %>
</div>
There is nothing Rails or Rails views specific about your question. What you're trying to do is skip elements in an each loop in Ruby, and the answer is, next
somethings.each do |thing|
next if thing.nil?
# .. does not get called if thing is nil
end
From what I understand from the question and your comments you can use,
post.dig("heroimage", "url")
here is the link to dig method documentation. If you want to skip the image in case of empty url you can do something like this
<div class="gallery">
<% #blog.each do |post| %>
<a target="_blank" href="blog/<%= post["id"] %>">
<% if post.dig("heroimage", "url") %>
<img src="<%= #host + post["heroimage"]["url"]%>" alt="" width="600" height="400">
<% end %>
</a>
<div class="desc"><%= post['description'] %></div>
<% end %>
</div>
This will still show the title even if the image URL is empty.

Is there a conflict with this code and FancyBox3?

Can anyone tell me whats wrong with this section of code? I recently got this to work, but found out soon after the functionality for the Fancybox gallery stopped working. The a link element is only a sliver compared to the over all element. Im not sure if thats it. I know the most recent edit I made was to fix the surrounding row from .row-fluid to .row since that broke my layout. Below is the code:
<body id="portfolio">
<div class="container-fluid" id="particles-js"></div>
<%= render 'layouts/altmenu_gallery' %>
<h1>Portfolio</h1>
<div id="gallery" class="container-fluid">
<% #photos.each_slice(4) do |group| %>
<div class="row ">
<% group.compact.each do |photo| %>
<div class= "col-md-3">
<a class="fancybox" data-fancybox="gallery" href="<%=image_path photo.file_url %>" data-caption="<%= photo.description %>">
<%= image_tag photo.file_url, class:' img-fluid img-thumbnail' if photo.file.present? %>
</a>
</div>
<% end %>
</div>
<% end %>
<br class="clear">
</div>
<%= link_to 'New Photo', new_photo_path %>
</body>
Sorry, but it is not possible to tell without seeing the actual html code or, preferably, live demo. Maybe this issue arises because you have not escaped photo.description and that breaks html code, but, as I said, I can not be sure.

Ruby On Rails - Rendering a partial after page load

I'm working on an application that makes some calls to the Twitter and Spotify APIs. After the user is authenticated with twitter, they are redirected to playlist.erb which is the callback url.
My problem is that the playlist.erb page takes a while to render because first we must make a call to fetch all tweets found on the users Twitter page, then try to find information about songs/artists, then use the Spotify API to search for a song that is closest to what information the user specified. Doing this for each tweet takes quite a while. For 10 tweets it sometimes takes between 5-10 seconds. The limit is 50 tweets in total.
The current playlist.erb page after it is fully loaded looks like this.
My question is, is there a way that I can render the page first, then get the partials for each individial tweet to render one at a time,
adding a new row for each tweet as it loads?
I've read that I should use something called AJAX, but I'm not sure how exactly to implement that here.
Also I'm aware that my view could use fixing in terms of CSS refactoring and not using the deprecated <center></center> HTML tags. And I should probably do a whole refactor of the system using proper MVC.
In the playlist.erb, a call to the Twitter API is made through the TweetsController to find all tweets from a page. the _tweet.erb partial is then rendered to this view for each tweet when new_tweet(tweet.text) is called. This method makes a call to the Spotify API to find details about the song mentioned in the tweet.
new_tweet is a method in a helper called playlist_helper.rb.
load_tweets is a method in a controller called tweets_controller.rb.
I realise that this is quite a bit of logic to put in a view, which is why the page takes quite long to load I guess.
playlist.erb
<% loaded_tweets = TweetsController.load_tweets(current_user) %>
<% if loaded_tweets.any? %>
<table class='tweet_view'>
<thead>
<tr class='tweet_row'>
<th class="fixed_cover"><div class='tableheader'><h6 style='color:white'>Cover</h6></div></th>
<th class="fixed_spotify"><div class='tableheader'><h6 style='color:white'>Spotify</h6></div></th>
<th class="fixed_title"><div class='tableheader'><h6 style='color:white'>Track title</h6></div></th>
<th class="fixed_artist"><div class='tableheader'><h6 style='color:white'>Artist</h6></div></th>
<th class="fluid"><div class='tableheader'><h6 style='color:white'>Album</h6></div></th>
</tr>
</thead>
<tbody>
<% loaded_tweets.reverse_each.each do |tweet| %>
<%=new_tweet(tweet.text)%>
<% end %>
</tbody>
</table>
<% else %>
<center>
<p><h8><b>No tweets found!</b></h8></p>
</center>
<% end %>
The _tweet.erb partial just adds a new row for each song.
_tweet.erb
<tr class='tweet_row'>
<td class='tweet_column'>
<div class='tablerow#cover'>
<%= image_tag(#cover,:class => 'album_cover')%>
</div>
</td>
<td class='tweet_column'>
<div class='tablerow#spotify'>
<h5><%= link_to image_tag('spotify', :class => 'spotify_image'), 'https://open.spotify.com/track/'+#spotify %></h5>
</div>
</td>
<td class='tweet_column'>
<div class='tablerow'>
<h5><%=#track_name%></h5>
</div>
</td>
<td class='tweet_column'>
<div class='tablerow'>
<h5><%=#artist%></h5>
</div>
</td>
<td class='tweet_column'>
<div class='tablerow'>
<h5><%=#album%></h5>
</div>
</td>
</tr>
Change playlist.erb to playlist.html.erb
<div id="tweets">
<%= render 'tweet') %>
</div>
....
....
<script>
$( document ).ready(function() {
// call the controller function here
});
</script>
In controller methode add
....
....
respond_to do |format|
format.js
end
create one more file in views folder like action_name.js.erb and add
$('#tweets').html('<%= j(render "tweet") %>')

Html table not populating/rendering

I am new in ruby on rails and I am creating my first ruby on rails project. I created a html view with embedded ruby codes that will display a table with the following headings: Patient, Room/Bed, Covering OT/PT. Under those headings, the patient name, corresponding room/bed and OT/PT will be displayed. But when the codes run, it do not render the patient name, room/bed and covering OT/PT. The table headings render but not the patient name, room/bed, and covering OT/PT. Any codes within this ruby block <% #units.each do |un| %> ... <%end%> apparently are not executed even if I put a ruby code like <%= Mr. Jones %>. I am not sure what to do. Any help and advice is greatly appreciated. Here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Project</title>
<meta name="description" content="Project1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="shortcut icon" href="/favicon.ico"> -->
<meta name="author" content="David West">
<link rel="icon" type="img/ico" href="/assets/images/jhu_tic.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400">
<link rel="stylesheet" href="/css/enterprise-auth.min.css">
<div class="bar-header">
<div class=label>
<div class=app-label>Project | </div>
<div class=view-label>Therapist</div>
</div>
<div class="date">Today is <%= Time.now.to_date %></div>
</div>
</div>
<div class="main-page">
<% #units.each do |un| %>
<div class="patient-queue-wrapper">
<div class="queue-header">Daily Tx and other patients with OT/PT lag 2+ days</div>
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp fixed-table-header">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Patient Name</th>
<th class="mdl-data-table__cell--non-numeric">Room/Bed</th>
<th>OT/PT Lag</th>
<th>OT/PT AMPAC</th>
<th class="mdl-data-table__cell--non-numeric">Covering OT/PT</th>
</tr>
</thead>
<tbody class="table-body scrollable-body">
<% un.patients.each do |patient| %>
<% if patient.lag_time_approaching_thresh %>
<tr>
<td class="mdl-data-table__cell--non-numeric"><%= patient.name %></td>
<td class="mdl-data-table__cell--non-numeric"><%= patient.room_bed %></td>
</tr>
<% end %>
<% end %>
</tbody>
</table>
</div>
<%end%>
</div>
</head>
</html>
Here is the codes showing the #unit variable inside the DashboardsController:
class DashboardsController < ApplicationController
def therapist
#patients = Patient.all.includes(:pt_priority, :ot_priority, orders: [visi$]
#units = Unit.all
end
def therapist_all_units
#units = Unit.all
end
def therapist_unit
#unit = Unit.find(params[:id])
# use the link-to helper methods
end
def manager
end
The code inside the tbody block will not execute if un.patients returns empty? or nil
This will be why nothing you place inside that block will display
If you place an simple html tag inside that block it won't appear e.g.
<tbody class="table-body scrollable-body">
<% un.patients.each do |patient| %>
<h1> If un.patients is then nothing in here will display </h1>
<% if patient.lag_time_approaching_thresh %>
<tr>
<td class="mdl-data-table__cell--non-numeric"><%= patient.name %></td>
<td class="mdl-data-table__cell--non-numeric"><%= patient.room_bed %></td>
</tr>
<% end %>
<% end %>
</tbody>
This is because there is no data in un.patients.
Now then, why there is no data is an entirely different question.
Check your association in the console run from the command line inside the root folder of your application.
$ rails c
You can use the console to interact with your models to interrogate your data and your model structures
e.g.
Patient.first.unit
you may find that the above returns nil when you are expecting a unit to return
I suggest you look very closely at your data and in particular the relationships between unit and patient and you will probably find that there is nothing wrong with your form
You could also add a check in the html form for this condition
<% if un.patients.empty? %>
<h2> Sorry, there are no patients for this unit </h2>
<%else%>
<tbody class="table-body scrollable-body">
<% un.patients.each do |patient| %>
<% if patient.lag_time_approaching_thresh %>
<tr>
<td class="mdl-data-table__cell--non-numeric"><%= patient.name %></td>
<td class="mdl-data-table__cell--non-numeric"><%= patient.room_bed %></td>
</tr>
<% end %>
<% end %>
</tbody>
<%end%>
You might want to sort out the code indentation to make it more readable

Rails load data when Bootstrap modal gets displayed

I'm using a Bootstrap modal. Right now the table listed in the modal gets loaded when the whole html page loads. I would like the data for the table loaded when the modal launches.
How can I load the data in the modal when the modal is launched?
This is the first part of my modal - it contains several Bootstrap tabs.
<div class="modal-body">
<div class="tabbable">
<ul class="nav-tabs">
<li class="active">Details</li>
<li>Materials</li>
<li>Labor</li>
<li>Tasks</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1_<%= workorder.id %>">
<table border="1" cellpadding="5">
<tr>
<th>Description</th>
<td><%= workorder.description %></td>
</tr>
<tr>
<th>Client</th>
<td><%= workorder.client.client_name %></td>
</tr>
<tr>
<th>Type</th>
<td><%= workorder.type.typecode %></td>
</tr>
<tr>
<th>Priority</th>
<td><%= workorder.wopriority.prioritycode %></td>
</tr>
<tr>
<th>Scheduled Finish</th>
<% if workorder.scheduled_finish != nil %>
<td>Scheduled Finish = <%= workorder.scheduled_finish %></td>
<% else %>
<td></td>
<% end %>
</tr>
</table>
</div>
...
Thanks for the help!
Use Ajax (set your links to link_to with remote => true) and render a partial. Then set the innerHTML of tab-pane to the partial content returned via Ajax. Of course you'll need to add logic in your controller to parse out only the data for each tab.
Might help to read up on:
http://guides.rubyonrails.org/ajax_on_rails.html
You have two choices:
Using AJAX to populate the table, when your mondal is launched
Mondal with an iframe
If you're just simply displaying information, then an iframe is a quick and dirty solution.

Resources