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.
Related
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") %>')
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 !)
I have a "search" page that have some controls and below is the search page code:
<%= form_for :search, :url => { :method => :get, :action => :search } do |f| %>
<table>
<tr>
<td align="center" style="vertical-align:top;">
<h2 style="color:Black; font-size: x-large;">Specs</h2>
<table>
<tr>
<td align="center">
<input type="text" name="tf_Zip" Style="text-align: left;" BackColor="#e5e5e5" Width="180px" ForeColor="Gray" Font-Size="Large">
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="button">
<input type="submit" name="search" value="Search" class="buttonSearch">
</div>
</td>
</tr>
</table>
</td>
<td align="center" style="vertical-align:top;">
<h2 style="color:Black; font-size: x-large;">
Result
</h2>
<% #user_zip.each do |uzr_zip| %>
<h1><%= uzr_zip.First_Name %></h1>
<% end %>
<table id="searchResult" width="100%" runat="server">
<tr>
<td bgcolor="#CCDBE0">
Image:
</td>
<td bgcolor="#CCDBE0">
<%= f.label(:zip, "Mentor") %>
</td>
</tr>
</table>
</td>
</tr>
</table>
<% end %>
And when I am trying to get the textbox value into the controllers page like below
def search
#students=Students.all
#blah = params[:search][:tf_Zip]
end
render 'search'
end
Then it gave me an error below, at this line #blah = params[:search][:tf_Zip]
undefined method `[]' for nil:NilClass
Kindle help me. Thanks
I think your params[:search] is nil?
so for this you can use
#blah = params[:tf_Zip]
or change your input field like this
<%= f.text_field :tf_Zip %>
or you can use like this
<input type="text" name="search[tf_Zip]" Style="text-align: left;"
BackColor="#e5e5e5" Width="180px" ForeColor="Gray" Font-Size="Large">
Look at your log: you will see what is coming through in params, then you'll see why params[:search][:tf_Zip] doesn't work.
The error is telling you, effectively, that params[:search] is nil, and that you can't call [tf_Zip] on nil.
Your problem is this line:
<input type="text" name="tf_Zip" Style="text-align: left;" BackColor="#e5e5e5" Width="180px" ForeColor="Gray" Font-Size="Large">
It will populate params[:tf_Zip] because it's name is "tf_Zip". If you want it to populate params[:search][:tf_Zip] then you should set the name attribute to search[tf_Zip].
What would be nicer though is to use the rails form field helpers. I don't know why you have so much raw html inside a form_for.
<input type="text" name="tf_Zip" Style="text-align: left;" BackColor="#e5e5e5" Width="180px" ForeColor="Gray" Font-Size="Large">
can be replaced with
<%= f.text_field :tf_Zip %>
which will populate params[:search][:tf_Zip]
For the other attributes (Style etc) you should set these with css. Rails will probably put a class on the field automatically which you can use to do this. The "style" (note lowercase) attribute can be used instead but it's clumsy as it doesn't allow you to restyle the field (and more generally, your site) with css.
Have you checked to see if params[:search] is nil? If it is, then trying to pull [:tf_Zip] will cause that error.
Usually you'd submit the form from one controller action and handle the result in another action.
And your statement end looks misplaced.
I have two tables: one named um_org_data and the other addresses.
The problem is that I want to show the data from um_org_data with addresses where addresses has a foreign key um_org_datum_id.
Here is the code of my view in which I want to show the data from two tables together:
<p id="notice"><%= notice %></p>
<div class="container">
<div class="row">
<div class="span3 pull-right">
<div class="well">
<h2>Heading</h2>
<p>Sample text</p>
</div>
</div>
<div class="span9">
<h2>Organization Details</h2>
<table class="table table-hover">
<tr>
<th col span="1" style="width: 200px">
</i> Organization Name:
</th>
<td><%= #um_org_datum.org_name %></td>
</tr>
<tr>
<th col span="1" style="width: 250px">
</i> Organization Description:
</th>
<td><%= #um_org_datum.org_description %></td>
</tr>
<tr>
<th col span="1" style="width: 250px">
</i> Web Domain:
</th>
<td><%= #um_org_datum.webdomain %></td>
</tr>
<tr>
<th col span="1" style="width: 200px">
<%= fields_for :address_attributes do |p| %>
<%= p.label 'Office Address' %><br />
</th>
<td><%= p.address.offc_addr %></td>
<% end %>
</tr>
<tr>
<th col span="1" style="width: 200px">
</i> Office Phone Number:
</th>
<td><%= #um_org_datum.offc_ph %></td>
</tr>
</table>
<div class="control-group">
<div class="controls">
<a class="btn" href="/um_org_data" style="text-color:black">View all</a>
</div>
</div>
</div>
</div>
</div>
I don't use any join query in the controller as I don't know how to use join query. If this problem needs a join query, please tell me what is the syntax and what I have to change in the view form to show attributes of both tables.
table name: um_org_data , attributes: id, oeg_name, org_description, webdomain
table name: adrresses , attributes: id, offc_addr, um_org_datum_id
Thanks in advance!
Do you have 1:n association? Am I right?
Definitely remove the fields_for...you are not in a form!
Change this:
<tr>
<th col span="1" style="width: 200px">
<%= fields_for :address_attributes do |p| %>
<%= p.label 'Office Address' %><br />
</th>
<td><%= p.address.offc_addr %></td>
<% end %>
</tr>
to this:
<tr>
<th col span="1" style="width: 200px">Office Address</th>
<%= #um_org_datum.addresses.each do |p| %>
<td><%= p.office_addr %></td>
<% end %>
</tr>
Check out the markup, but the logic should be clear now..
I'm assuming you have the following in your models
um_org_datum
has_many :addresses
address
belongs_to :um_org_datum
Does this work?
<tr>
<th col span="1" style="width: 200px">Office Address</th>
<%= #um_org_datum.addresses.each do |p| %>
<td><%= p.offc_addr %></td>
<% end %>
</tr>
I've a simple page with link_to_remote Rails Ajax function and HTML table.
I'd like to change row of the table when click that link.
This is my html.
<table border="1">
<tr>
<td><div id="ajax_result_1">1</div></td>
<div id="ajax_result_2"><td>2</td></div>
</tr>
<div id="ajax_result_3">
<tr>
<td>3</td>
<td>4</td>
</tr>
</div>
</table>
And this is my code.
<%= link_to_remote 'Change', :update => "ajax_result_1", :url => "change_path" %>
change action just render simple text.
When I use ajax_result_1 for :update, it worked okay.
But, not for ajax_result_2 and ajax_result_3.
Is there a way to solve this? I want to replace row of the table.
<div id="ajax_result_2"><td>2</td></div>
this should be
<td><div id="ajax_result_2">2</div></td>
and
<div id="ajax_result_3">
<tr>
<td>3</td>
<td>4</td>
</tr>
</div>
should be
<tr id="ajax_result_3">
<td>3</td>
<td>4</td>
</tr>
you cann't use <div> tag in table directly if you want to use <div> you have to use it in the <td> only.