Trying to render an SVG generated with svg.js in a PDF (wkhtmltopdf) in Rails 5 but nothing comes out. All other rendering in the PDF works so it's likely the JS not being called but I can't understand why. Rendering the JS in a plain HTML view works so I'm sure the actual JS works.
In my show.pdf.erb
<head>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
<%= wicked_pdf_stylesheet_link_tag "application" %>
<%= wicked_pdf_javascript_include_tag "svg_graph" %>
</head>
In assets/javascripts/svg_graph.js
var svg_graph = ({
.....
lots of js (a function called initialize among others)
.....
);
In show.print.erb:
<div class="pdf-page">
<div class="content">
<%= render 'svg_graph', location_id: location.id %>
</div>
<%= render 'footer' %>
</div>
And in svg_graph.html.erb:
<div class="svg-graph mt-3" id="svg-graph-<%= location_id %>"></div>
<script>
svg_graph.initialize(document.getElementById("svg-graph-" + <%= location_id %>), <%= location_id %>);
</script>
Any idea where I'm going wrong?
Related
I have model with date time field after render new view and submit it all fields of model saved to database except date time field even I am using date time picker
Can any body help me to solve this problem
This is the code I am working on:
Interview controller
def new
#interview = Interview.new(:batch_id => #batch.id)
end
def create
#interview = Interview.new(interview_params)
# Save the object
if #interview.save
# If save succeeds, redirect to the index action
flash[:notice]= "تم إنشاء المقابلة بنجاح."
redirect_to(interviews_path(:batch_id => #batch.id))
else
# If save fails, redisplay the form so user can fix problems
render('new')
end
end
Interview new view code
<% #page_title = "إنشاء مقابلة" %>
<div id="content-header">
<div class='header-icon hr-icon'></div>
<h1>المقابلات</h1>
<div class='header-sep'>|</div>
<div class='sub-header'>إنشاء مقابلة</div>
<div id="inner-tab-menu">
<ul>
<li class='themed_bg themed-dark-hover-background'><%= link_to("<< العودة للجدول", interviews_path(:batch_id => #batch.id)) %></li>
</ul>
</div>
</div>
<div id="page-yield">
<div class="iterviews new">
<%= form_for(#interview, :url =>interviews_path(:batch_id => #batch.id)) do |f| %>
<%= render(:partial => 'form', :locals => {:f => f}) %>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
locale: 'ar-sa'
});
</script>
<div><%= f.submit("إنشاء مقابلة", :class => 'submit_button') %></div>
<% end %>
</div>
</div>
form code
<div class="label-field-pair">
<div class="right-column">
<label for="student_grade">رقم المقابلة<span class="necessary-field">*</span> </label>
<div class="text-input-bg"><%= f.text_field(:code, style: "width: 240px;") %></div>
</div>
</div>
<div class="label-field-pair">
<div class="right-column">
<label for="student_grade">تاريخ المقابلة<span class="necessary-field">*</span></label>
<div class="text-input-bg" style="direction: ltr; margin: 0 10px 0 0;">
<div class='input-group date' id='datetimepicker1'>
<%= f.datetime_field(:interview_date , class: "form-control", style: "width: 200px;margin: 0;") %>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<%= f.hidden_field(:batch_id, value: #batch.id) %>
I could find out the solution for this problem, of course the reason was that datetimepicker doesn't understand the values in my fields so what I did is the following:
1- change the numbers in moment-with-locales.js in the 'ar-sa' section from Indian numbers to Arabic numbers.
2- set the format: option to datetimepicker to match model attribute data type format in case it is date type or datetime type
and that's solve my problem
I'm brand new to rails (and coding in general) so I've a quick question on retrieving images from a database
Running rails 3.2.8
I have a list of products, code, description, price and product_image in the database, The product images is stored as 123.jpg in the database and the image itself is stored in app/assets/images folder
In my view I have the following code
<div class="center_content">
<div class="center_title_bar">Latest Products</div>
<% #camera_catalogues.each do |camera_catalogue| %>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><%= camera_catalogue.model_description %></div>
<div class="product_img"><%= link_to (image_tag camera_catalogue.product_image),camera_catalogue %></div>
<div class="prod_price"><span class="reduce">350$</span> <span class="price"><%=number_to_currency(camera_catalogue.price, :unit =>"€")%> </span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<img src="assest/cart.gif" alt="" title="" border="0" class="left_bt" />
<img src="assest/favs.gif" alt="" title="" border="0" class="left_bt" />
<img src="assets/favorites.gif" alt="" title="" border="0" class="left_bt" />
details
</div>
</div>
Everything displays correctly except that the image is not retrieved from the database
which is this line
<div class="product_img"><%= link_to (image_tag camera_catalogue.product_image),camera_catalogue %></div>
Does the image in the database need to be saved with a different url. i.e. instead of 123.jpg it is saved as assets/123.jpg
or is there some other error in my code.
Help/advice greatly appreciated :)
Use it like this
<div class="product_img"><%= link_to (image_tag (camera_catalogue.product_image)),camera_catalogue %></div>
I guess it will work for you. You need not use 'assests/image_name'
My project is using twitter bootstrap tabs and in each tab there is collection of Rails Model Object.
i need to use kaminari pagination for the collection in each tab.
As, in every tab there will be a pagination for the content of this tab from the model object presented.
Thanks.
I ran across this same problem yesterday and though I would post the solution I found here. (Works in bootstrap 3x)
I too wanted to use Kaminari to paginate across multiple tables within tabs in bootstrap. the problem is, every time you advance the page, it refreshes and sends you back to the first tab.
The first step required for solving this problem is find out how to direct your page to a specific tab when it loads. With some searching, I figured out that I could do this by appending the hash linking to tab to the url of the tab. (I can’t remember where I found this.)
// Example
#tab1, #tab2, #tab3
Coffeescript
$ ->
hash = window.location.hash
hash and $("ul.nav a[href=\"" + hash + "\"]").tab("show")
$(".nav-tabs a").click (e) ->
$(this).tab "show"
scrollmem = $("body").scrollTop()
window.location.hash = #hash
$("html,body").scrollTop scrollmem
return
return
Javascript
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});
Then, all need is to pass the correct anchor to Kaminari.
= paginate #foo, :param_name => "page_method", :params => { :anchor => 'tab4' }
Cheers
Here is a snippet of a solution that works within a view using bootstrap 2.3. If a 'tab' param is provided in the calling URL, that tab will be displayed; otherwise, the first tab will be displayed.
<ul class="nav nav-tabs" id="my_tabs">
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
</ul>
<div class="tab-content">
<div id="one" class="tab-pane">
<%= paginate #stuff, :params => {:tab => "one"}, :theme => 'twitter-bootstrap', :pagination_class => "pagination-large" %>
</div>
<div id="two" class="tab-pane">
<%= paginate #stuff, :params => {:tab => "two"}, :theme => 'twitter-bootstrap', :pagination_class => "pagination-large" %>
</div>
<div id="three" class="tab-pane">
<%= paginate #stuff, :params => {:tab => "three"}, :theme => 'twitter-bootstrap', :pagination_class => "pagination-large" %>
</div>
</div>
<% #tab_id = params[:tab] ? "#my_tabs a[href=" + %Q(##{params[:tab]}) + "]" : "#my_tabs a:first" %>
<% content_for :footer do %>
<script>
$(function () {
$('#<%= #tab_id %>').tab('show');
})
</script>
<% end %>
If you use jQuery.tabs() then this way can help you.
You should add kaminari themes for all tabs.
$> rails g kaminari:views default
$> cd app/views/kaminari
$> mkdir one
$> cp *_.html.* one/
Then you should edit files in kaminari/first_tab. You should replace variable url to "#{url}"#one everywhere in directory.
Like this:
app/views/kaminari/one/_first_page.html.erb
<%= link_to 'prev', "#{url}#one", class: 'first', page: '1' %>
then you should add theme name:
<script>
$(document).ready(function () {
$("#my_tabs").tabs();
});
</script>
<ul class="nav nav-tabs" id="my_tabs">
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
</ul>
<div class="tab-content">
<div id="one" class="tab-pane">
<%= paginate #stuff, theme: 'one' %>
</div>
<div id="two" class="tab-pane">
<%= paginate #stuff, theme: 'two' %>
</div>
</div>
I'm using Rails and jQuery UI to implement tabs in each user's profile. I've got it working without ajax - with ajax, things go south. I'm new to Rails and jQuery and am hoping someone can help me identify what's going wrong.
<div id="tabs-1"> is the first tab and it is associated with ProfilesController by default. That works by using an <a href>.
<div id="tabs-2"> would access MessagesController and load a partial show_messages that loads #user.messages.
What happens instead is that when I click "Messages" I get an ActionController::Routing error in Profiles#show.
No route matches {:action=>"show", :controller=>"messages", :id=>[#<Message id: 3, user_id: 2,...>, #<Message id: 4, user_id: 2,...">]}
My code is below:
application.js:
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
});
My profile show.html.erb:
<div id="tabs">
<ul id="infoContainer">
<li></li>
<li><%= link_to "Messages", message_path(#user.messages) %></a></li>
<ul>
<div id="tabs-1">
</div>
</div>
My _show_messages partial in MessagesController:
<div id="tabs-2">
<% for 'message' in #user.messages %>
<div class="message">
</div>
<% end %>
</div>
in show.html.erb message_path(#users.messages) is wrong. Try messages_path which should point to the index action of the messages controllr. Here I am assuming you are using the standard Rails convection for messages routes.
I have a Profile in my Rails 3 app. When the Profile is viewed, the Profile's about information shows in a div container by default. What I want to do is replace the "about" information in the div with messages from the User when a "messages" link is clicked. (The messages should load according to the profile_messages template.) To do this, I turned to jQuery UI Tabs.
So the "about" information exists in Tab-1. The "Messages" is in a template called profile_messages that I've tried loading from both the ProfilesController and the MessagesController.
I've gotten a lot of help here on SO to get to where I'm at. However, for some reason I can't get the actual messages to show up. What happens when I click "messages is I see the error message in my jQuery. If I inspect the element, I see this:
Failed to load resource: the server responded with a status of 404 (Not Found) `profile_messages`
Here is my code. If anyone can help me figure out what's going on I'd appreciate it greatly.
ProfilesShow show.html.erb:
<div id="tabs">
<ul id="infoContainer">
<li>About</li>
<li><%= link_to "Messages", "/profiles/profile_messages", :remote => true %></li>
</ul>
<div id="tabs-1">
</div><!-- end profile-about -->
profile_messages.html.erb:
<div id="tabs-2">
<% for 'message' in #user.messages %>
<div class="message-1">
</div>
</div><!-- end messages -->
<% end %>
ProfilesController:
def show
#profile = Profile.find(params[:id])
#user = User.find(#profile.user_id)
end
Routes.rb:
resources :messages do
resources :responses
end
resource :messages do
collection do
get :profile_messages
end
end
profile_messages.js.erb:
$( "#tabs" ).html( "<%= escape_javascript( render(#profile.messages) ) %>" );
From rake routes:
message GET /messages/:id(.:format) {:action=>"show", :controller=>"messages"}
profile GET /profiles/:id(.:format) {:action=>"show", :controller=>"profiles"}
profile_messages_messages GET /messages/profile_messages(.:format {:action=>"profile_messages", :controller=>"messages"}
jQuery UI Tabs:
$(function() {
$( "#tabs" ).tabs({
spinner: '<img src="">' },{
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"There was an error loading this tab. Please try again." );
}
}
});
});
As I said, I'm really close so if anyone can help me figure out what I'm doing wrong I'd appreciate it.
UPDATE: If I switch the route from profiles/profile_messages to messages/profile_messages here is the HTML output of the jQuery UI Tabs:
<div id="tabs">
<ul id="infoContainer">
<li>About</li>
<li>Messages</li>
</ul>
<div id="tabs-1">
Here is what I see in Firebug:
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul id="infoContainer" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">About</li>
<li class="ui-state-default ui-corner-top">Messages</li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
</div>
</div>
The fact that Firebug shows the second link as #ui-tabs-1 seems odd to me.
The routes output says it all: profile_messages_messages, but you also need to append _path--if you were using the generated path variable and not using a string path.
Does this route exist?
/profiles/profile_messages
This is what you are calling from your link_to. From your routes output, it seems this should be:
/messages/profile_messages
Thanks to the combined efforts of folks here on SO I was able to get this to work. Check out these questions for more code:
Exclude application layout in Rails 3 div
Rails 3 jQuery UI Tabs issue loading with Ajax