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.
Related
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?
I'm building out a bootstrap based accordion. It's almost there, except i need to wrap each accordion with a tab with a unique ID. My thought was to use the repeaters control ID. So how i can access this from a transformation, and also the HTML envelope?
Here is the HTML envelope from the repeater
<div class="accordion" id="askUsAccordion">
</div>
Here is my transformation code
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<%# DataItemIndex + 1 %> <%# Eval("Heading") %>
</h4>
</div>
<div id="accordionPanel<%# DataItemIndex + 1 %>" class="panel-collaspe collapse" role="tabpanel" aria-labeledby="panel<%# DataItemIndex + 1 %>">
<div class="panel-body">
<%# Eval("Panel") %>
</div>
</div>
</div>
Why not just use the Repeater's ClientID?
Try <%# Container.ClientID %> in this case Container should reference the Repeater the transformation is running on.
Mark, not sure this is the best solution, but it should work for you. Add server side function into your transformation like this:
<script runat="server">
protected string GetID()
{
Control parent = this;
while ( (!(parent is CMSWebParts_Viewers_Documents_cmsrepeater)) &&
(parent != null))
{
parent = parent.Parent;
}
return (parent as CMSWebParts_Viewers_Documents_cmsrepeater).WebPartID;
}
</script>
And call this method in your transformation like this:
<%# GetID() %>
While this isn't my preferred method, i wrote a quick js snippet. I try to avoid having too much JS.
/* Accordions */
// we first detect if there is an accordion in the DOM, and if see we ensure that each is with it's own names space
if ($accordion.length){
// we need the ID of each accordion on the page which then becomes the data-parent value, which is needed to ensure we can isolate accordions
$accordion.each(function(i,v){
var $this = $(this),
$id = $this.attr('id');
// loop through each accordion panel
$this.children('.panel').each(function(){
var $that = $(this);
$('.panel-title-link', $that).attr('data-parent', $id);
});
});
}
Does hanami support below code?
<%= form_for :question, routes.question_path. method: 'post' do %>
<div class="box-body">
<div class="row">
<div class="box-body pad">
<textarea id="content"></textarea>
</div>`enter code here`
</div>
</div>
<% end %>
And how can I can do it in my template?
Though this is possible, the official Hanami guide discourages it as it has to resort to monkey patching in order to work with the various template engines.
You can read more about it here.
An alternative approach is to define a single form rendering method in your view, like this:
def form
form_for :question, routes.questions_path, method: 'post' do
div(class: 'box-body') do
div(class: 'row') do
div(class: 'box-body pad') do
text_area :content, id: 'content'
end
end
end
end
end
Then, somewhere in your template, you can call it like this to render the form:
<%= form %>
And I'm supported by author the best way I want is:
<form action="<%= routes.question_path %>" method="POST">
<input type="hidden" name="_csrf_token" value="<%= csrf_token%>">
<!-- rest of the form goes here -->
</form>
Maybe it's help for someone else.
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 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