I'm learning about ajax, but even the first applications I write it remains inactive. After clicking the link, nothing changes.
cart_controller.rb
def cart_add_quan
id_cart = params[:id]
cart = session[:cart]
cart.each do |id, quantity|
if id_cart == id then
cart[id] += 1
end
end
respond_to do |format|
format.html {redirect_to cart_path}
format.js
end
end
views/cart/index.html.erb
<h1>Your cart:</h1>
<td><%= link_to 'Continue shopping', product_user_index_path %></td>
<% if #cart.empty? %>
<p>Your cart is empty</p>
<% else %>
<div id="carts">
<%= render 'carts' %>
<br>
<h2><%= link_to 'Check out', check_out_index_path %></h2>
<br>
<td><%= link_to 'Empty your cart', cart_clear_path %></td>
</div>
<% end %>
views/cart/_carts.html.erb
<br>
<table>
<thead>
<tr>
<th>Product name</th>
<th>Image</th>
<th>Description</th>
<th>SubPrice</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody>
<br>
<% #cart.each do |id, quantity| %>
<% product = Product.find_by_id(id) %>
<tr>
<td><%= link_to product.name, product %></td>
<td><%= image_tag(product.image.thumb('45x45#').url, class: "SlideItMoo_element") if product.image_stored? %></td>
<td><%= product.description.html_safe %></td>
<td><%= sub_price(product, quantity) %></td>
<td>
**#link to *cart_quan_path***
<%= link_to "+", cart_add_quan_path(id), remote: true %>
<%= quantity %>
<%= link_to "-", cart_sub_quan_path(id) %></td>
<td><%= link_to 'remove', cart_remove_product_path(id) %></td>
</tr>
<% end %>
</tbody>
</table>
<h3 id ="total">Totald: <%= totalCart(#cart) %></h3>
views/cart/cart_add_quan.js.erb
$('#carts').html('<%= escape_javascript(render("carts")) %>');
console.log("hihi");
Related
I am having problems with Data tables on Rails 6.0.0
I used the Data tables CDN, the styles changed but the functionalities of data tables are not loading.
this is my html
<table id="example" class="title table index-table">
<tr>
<th>Title</th>
<% if #user['role'] === 'admin' or #user['role'] === 'instructor' %>
<th>Tags</th>
<% end %>
</tr>
<% #assignments.each do |hw| %>
<tr>
<% if #user['role'] === 'admin' or #user['role'] === 'instructor' %>
<td>
<span class="hw-title"><%= link_to hw.title, assignment_path(hw) %></span>
</td>
<% else %>
<td>
<span class="hw-title"><%= link_to hw.title, new_assignment_solution_path(hw) %></span>
</td>
<% end %>
<% if #user['role'] === 'admin' or #user['role'] === 'instructor' %>
<td>
<% if hw.tags.empty? %>
<em></em>
<% else %>
<% hw.tags.each do |tag| %>
<% unless tag.name.include? ' ' %>
<span class="hw-tag">#<%= tag.name %></span>
<% else %>
<% words = tag.name.split(' ') %>
<% words.each do |word| %>
<span>
#<%= word.strip %>
</span>
<% end %>
<% end %>
<% end %>
<% end %>
</td>
<% end %>
</tr>
<% end %>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
this is the script in the application.html.erb
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
is a simple table but it has some validations, which makes the tags unequal to the any clues? Thanks
Solved it. I just needed to add <thead> and the <tbody> tags
Let me know if this worked for somebody
<table id="example" class="title table index-table">
<thead>
<tr>
<th>Title</th>
<% if #user['role'] === 'admin' or #user['role'] === 'instructor' %>
<th>Tags</th>
<% end %>
</tr>
</thead>
<tbody>
<% #assignments.each do |hw| %>
<tr>
<% if #user['role'] === 'admin' or #user['role'] === 'instructor' %>
<td>
<span class="hw-title"><%= link_to hw.title, assignment_path(hw) %></span>
</td>
<% else %>
<td>
<span class="hw-title"><%= link_to hw.title, new_assignment_solution_path(hw) %></span>
</td>
<% end %>
<% if #user['role'] === 'admin' or #user['role'] === 'instructor' %>
<td>
<% if hw.tags.empty? %>
<em></em>
<% else %>
<% hw.tags.each do |tag| %>
<% unless tag.name.include? ' ' %>
<span class="hw-tag">#<%= tag.name %></span>
<% else %>
<% words = tag.name.split(' ') %>
<% words.each do |word| %>
<span>
#<%= word.strip %>
</span>
<% end %>
<% end %>
<% end %>
<% end %>
</td>
<% end %>
</tr>
<% end %>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
I am getting the error: missing ) after argument list while compiling ejs.
I tried many times, but I can't find the problem.
Here's the ejs that causes errors.
What is the problem with this code?
<%- include('../_layouts/adminheader') %>
<h2 class='page-title'>Products</h2>
<br>
Add a new product
<br><br>
<% if (count > 0) { %>
<table class="table table-striped">
<thead>
<tr class="home">
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Product Image</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<% products.forEach(function(product) { %>
<tr>
<td><%= product.title %></td>
<td>$<%= parseFloat(product.price).toFixed(2) %></td>
<td><%= product.category %></td>
<td>
<% if (product.image == "") { %>
<img src="/images/noimage.png">
<% } else { %>
<img src="product_images/<%= product._id %>/<%= product.image %>">
<% }%>
</td>
<td>Edit</td>
<td>Delete</td>
<% } %>
</tr>
<% }); %>
</tbody>>
</table>>
<% } else { %>
<h3 class="text-center">There are no products.</h3>>
<% } %>
<%- include('../_layouts/adminfooter') %>
Before your closing </tr>, the line
<% } %>
is superfluous. The parser therefore interprets this as ending the callback function of forEach() without providing further arguments or closing the
round bracket of the function call. (The error message is actually pretty clear about what's going on, if you think about it. :))
By the way you also got two superflous > behind your closing </tbody> and </table>.
Here's a working fixed code example you can put into https://ionicabizau.github.io/ejs-playground/
<%
var products = [
{title: "foobar", category: "things", image: "", _id: 1, price: 0}
];
var count = products.length;
%>
<h2 class='page-title'>Products</h2>
<br>
Add a new product
<br><br>
<% if (products.length > 0) { %>
<table class="table table-striped">
<thead>
<tr class="home">
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Product Image</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<% products.forEach(function(product) { %>
<tr>
<td><%= product.title %></td>
<td>$<%= parseFloat(product.price).toFixed(2) %></td>
<td><%= product.category %></td>
<td>
<% if (product.image == "") { %>
<img src="/images/noimage.png">
<% } else { %>
<img src="product_images/<%= product._id %>/<%= product.image %>">
<% }%>
</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<% }); %>
</tbody>
</table>
<% } else { %>
<h3 class="text-center">There are no products.</h3>>
<% } %>
I'm developing a web page using ruby on rails.
I found one of my page loading time is very long.
I use pingdom to test it,here is the result:
Then I refer to this and Yslow report
some of the F grade options:
1.Grade F on Make fewer HTTP requests
This page has 78 external Javascript scripts. Try combining them into one.
Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.
2.Grade F on Add Expires headers
There are 82 static components without a far-future expiration date.
3.Grade F on Use cookie-free domains
There are 81 components that are not cookie-free
4.Grade F on Put JavaScript at bottom
There are 78 JavaScript scripts found in the head of the document
I feel mostly is the messy java script or CSS cause the long waiting time.
Suggestion is put java script at end of page.
problem is:for ruby on rails,my Javascript is in file : app\assets\javascripts\custom.js
while my view page is in: app/view/sth.html.erb
I have no idea how to put it at the end.
attached is my code in app/view/sth.html.erb
<h3>Project Information</h3>
<div class="project-report">
<table class="content-table">
<tr>
<td><strong>PJO Number</strong></td>
<td><%= #project.job_number %></td>
</tr>
<tr>
<td><strong>Client</strong></td>
<td><%= #project.client_name %></td>
</tr>
<tr>
<td><strong>Location</strong></td>
<td><%= #project.jobsite_location %></td>
</tr>
<br>
<td>
<tr>
<td><strong>Contacts</strong></td>
</tr>
<br>
<table class="yellow-header-table contact-table">
<tr>
<th>Name</th>
<th>Designation</th>
<th>Email</th>
<th>SMS</th>
<th>Fax</th>
</tr>
<% #project.contacts.each do |contact| %>
<tr>
<td><%= contact.contact_person_name %></td>
<td><%= contact.designation %></td>
<td><%= contact.email %></td>
<td><%= contact.phone_number %></td>
<td><%= contact.fax_number %></td>
</tr>
<% end %>
</table>
</td>
</table>
<table class="yellow-header-table">
<tr>
<th>Instrument Type</th>
<th>Total</th>
<th>Installed</th>
<th>Active</th>
<th>Remarks</th>
</tr>
<tr>
<td>first Meter</td>
<td><%= #project.quantity_active %></td>
<td><%= #project.quantity_active %></td>
<td><%= #project.quantity_active %></td>
<td><%= #project.sound_remarks %></td>
</tr>
</table>
<div style='margin-left:50px;float:left;'>
<button id="buttonN" class="btn btn-info" style="width:190px;">View Data1</button>
<button id="buttonV" class="btn btn-info" style="margin-left:50px;width:190px;">View Data2</button>
<button id="buttonR" class="btn btn-info" style="margin-left:50px;width:190px;">Generate Report</button>
</div>
<div id="report-reviewn" class="hidden" style='margin-top:55px;'>
<% if (#devices.count > 0) %>
<h4 style="width:100%">1st Devices</h4>
<table id="tableselect" class="yellow-header-table">
<tr>
<th scope="Row">Select</th>
<th>Device ID</th>
<th>Brand</th>
<th>Address</th>
</tr>
<%= form_tag viewdata_devices_path,class:"form-horizontal viewlist-form" do %>
<% #project.first_devices.each do |first_device| %>
<tr>
<th scope='col'>
<%= radio_button_tag(:deviceID, first_device.id ) %></th>
<td><%= first_device.device_id %></td>
<td><%= first_device.serial_number %></td>
<td><%= first_device.brand %></td>
<td><%= first_device.last_calibration_date %></td>
<td><%= first_device.remarks %></td>
<td><%= #project.project_type %></td>
<td>
<select style='border:none;'>
<option><%= first_device.device_location %></option>
<option><%= first_device.device_latlng %></option>
</select>
</td>
</tr>
</tr>
<% end %>
</table>
<table class="table-row">
<tr>
<th> <%= text_field_tag 'startday', nil, placeholder: 'Start Date',style:'width:100px;', class: "date-picker" %></th>
<th> <%= text_field_tag 'endday', nil, placeholder: 'End Date' ,style:'width:100px;',class: "date-picker" %><th>
<%= hidden_field_tag "project_id", #project.id %>
<th> <%= submit_tag "View Data",class: "btn" %></th>
<% end %>
</tr>
</table>
<% else %>
<p style="width:100%;text-align:left;margin-left:50px;">There is no first device for this project </p>
<% end %>
</div>
<div id="report-reviewv" class="hidden" style='margin-top:55px;' >
<% if (#vdevices.count > 0) %>
<table class="yellow-header-table">
<h4 style="width:100%">second Devices</h4>
<tr>
<th scope="Row">Select</th>
<th>Device ID</th>
<th>Address</th>
</tr>
<%= form_tag viewdata_second_devices_path,class:"form-horizontal viewlist-form" do %>
<% #project.second_devices.each do |second_device| %>
<tr>
<th scope='col'>
<%= radio_button_tag(:deviceID, second_device.id ) %></th>
<td><%= second_device.device_id %></td>
<td><%= second_device.serial_number %></td>
<td><%= second_device.brand %></td>
<td><%= second_device.current_trigger_value %></td>
<td><%= second_device.last_calibration_date %></td>
<td><%= second_device.remarks %></td>
<td><%= #project.project_type %></td>
<td>
<select style='border:none;'>
<option><%= second_device.device_location %></option>
<option><%= second_device.device_latlng %></option>
</select>
</td>
</tr>
<% end %>
</table>
<table class="table-row">
<tr>
<th> <%= text_field_tag 'startday', nil, placeholder: 'Start Date',style:'width:100px;', class: "date-picker" %></th>
<th> <%= text_field_tag 'endday', nil, placeholder: 'End Date' ,style:'width:100px;',class: "date-picker" %><th>
<%= hidden_field_tag "project_id", #project.id %>
<th> <%= submit_tag "View Data",class: "btn" %></th>
<% end %>
</tr>
</table>
<% else %>
<p style="width:100%;text-align:left;margin-left:50px;">There is no second device for this project </p>
<% end %>
</div>
<div id="report-reviewr" class="hidden" style='margin-top:100px;'>
<div class="report-forms report-left-align">
<span><strong>Report Type</strong></span>
<%= select_tag "report-type", options_for_select([["first", "first-report"], ["second", "second-report"]]), :prompt => "Choose Report" %>
<div id="first-report" class="report-form hidden">
<%= form_tag report_first_devices_path, class: "form-horizontal device-form", target: "_blank" do %>
<div class="control-group">
<%= label_tag "Choose Devices", nil, class: "control-label" %>
<div class="controls">
<% selected_first_device = #project.first_devices.blank? ? nil : #project.first_devices.first.id %>
<%= select_tag "devices", options_from_collection_for_select(#project.first_devices, "id", "serial_number", selected_first_device), :multiple => false %>
</div>
</div>
<div class="control-group">
<%= label_tag "Choose Time", nil, class: "control-label" %>
<div class="controls">
<%= text_field_tag "time_range", nil, class: "input-large date-picker" %>
</div>
</div>
<%= hidden_field_tag "project_id", #project.id %>
<%= hidden_field_tag "device_type", "first" %>
<div class="control-group">
<div class="controls">
<%= submit_tag "Generate Report", class: "btn" %>
</div>
</div>
<% end %>
</div>
<div id="second-report" class="report-form hidden">
<%= form_tag report_second_devices_path, class: "form-horizontal device-form", target: "_blank" do %>
<div class="control-group">
<%= label_tag "Choose Devices", nil, class: "control-label" %>
<div class="controls">
<% selected_second_device = #project.second_devices.blank? ? nil : #project.second_devices.first.id %>
<%= select_tag "devices", options_from_collection_for_select(#project.second_devices, "id", "serial_number", selected_second_device), :multiple => false %>
</div>
</div>
<div class="control-group">
<%= label_tag "Choose Time", nil, class: "control-label" %>
<div class="controls">
<%= text_field_tag "time_range", nil, class: "input-large date-picker" %>
</div>
</div>
<%= hidden_field_tag "project_id", #project.id %>
<%= hidden_field_tag "device_type", "second" %>
<div class="control-group">
<div class="controls">
<%= submit_tag "Generate Report", class: "btn" %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
anyone can give some suggestions?
In the default app/views/layouts/ directory there should be a file named application.html.erb. This file contains the following lines within the head
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
If you move this to just below the closing body tag all your JS will be at the bottom of the page on every pageload. This is the most effective way of not blocking the rendering of the page client side.
All your files will be included via the compiled application.js in the end.
EDIT 1
As you've seen in your YSLOW results, you have alot - and with that i mean alot of JS. All these files perform a dns lookup (they will be cached but still frequently updated). Every n of dns lookups comes with a penalty due to the fact that a cached dns lookup only exists for something upto a day. Reducing the number of requests is key to making your application alot faster.
Info about the asset pipeline
SO post of assets not being compiled into one file
You may want to look at these for extra information about the asset pipeline and / or what to do to compress your assets.
I am using Ruby on Rails and rendering the pages using ajax_will_paginate. It is working fine but I used JavaScript table sorting in HTML pages. And when I click on next pages the ajax_will_paginate removes the table sorting functionality.
Here is my _cantacts.html.erb
<table class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Office</th>
<th>Fax</th>
<th>Cell</th>
<th>Email</th>
<th>Position</th>
<th>Mainconact</th>
<th></th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% #contacts.each do |contact| %>
<tr>
<td><%= contact.Name.capitalize %></td>
<td><%= contact.Office %></td>
<td><%= contact.Fax %></td>
<td><%= contact.Cell %></td>
<td><%= contact.Email %></td>
<td><%= contact.Position %></td>
<td><%= contact.MainContact %></td>
<td><%= link_to 'Show', edit_contact_path(contact) %></td>
<!--<td><%= link_to 'Edit', edit_contact_path(contact) %></td>-->
<td><%= link_to 'X', contact, :class=>'rmv-fld', method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
And index.js.erb is:
$('.sort_paginate_ajax').html("<%= escape_javascript(render("contacts"))%>")
Update DOM by calling the tablesorter plugin function after rendering partial contents to html element.
index.js.erb.
$('.sort_paginate_ajax').html("<%= escape_javascript(render("contacts"))%>")
$(".tablesorter").tablesorter();
This is the Units Table:
<div id="table_header">Units</div>
<table class="gridView location">
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {class: 'location'}) %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
<tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %> current_location">
<td><%= check_box("select", "all", {class: 'current_location'}) %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</table>
This is the Selected Units Table:
<div id="table_header">Selected Units</div>
<table class="gridView location">
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {class: 'location'}) %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
<tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %> current_location">
<td><%= check_box("select", "all", {class: 'current_location'}) %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</table>
Image button to push
<%= image_tag("blue_right_arrow.png", id: 'blue_right_arrow', :alt => "arro", title: 'Move to Selected Units') %>
By clicking this button, the selected row from the Units table should transferred to the Selected Units table.
Thanks in advance!.
Modified markup
<div class="table_header">Units</div>
<table class="gridView location" id="units">
<thead>
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {:class => "location"}) %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr class="current_location">
<td><%= check_box("select", "all", {:class => "current_location"}) %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</tbody>
</table>
<div class="table_header">Selected Units</div>
<table class="gridView" id="selected_units">
<thead>
<tr class="gridViewHeader">
<th><%= check_box("select", "all") %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %>">
<td><%= check_box("select", "all") %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</tbody>
</table>
<%= image_tag("blue_right_arrow.png", id: 'blue_right_arrow', :alt => "arro", title: 'Move to Selected Units') %>
Note down the new classes added.
Jquery code
$(document).ready(function() {
#copying the tr
$("#blue_right_arrow").click(function() {
$("input.current_location").each(function(i, el) {
if($(el).is(":checked")) {
$("table#selected_units tbody").append($(el).parent().parent().html());
$(el).remove()
}
});
});
});