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
Related
I'm trying to get my task-manager app to render tasks stored in mongoDB via mongoose on my projects.ejs which contains three as follows:
<%- include("partials/taskCard", {taskState:"New task",}) %>
<%- include("partials/taskCard", {taskState:"In progress"}) %>
<%- include("partials/taskCard", {taskState:"Completed tasks"}) %>
I tried, rendering tasks individually using the value of the task state in the submit button, however, it only equates to "New task", even when other buttons are clicked
<button
class="btn task-submit-btn"
name="submitTaskButton"
value="<%= taskState %>"
type="submit"
>
ADD
</button>
Rendered task.
The code is available on Github
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.
im following this tutorial : http://untame.net/2012/08/twitter-bootstrap-build-a-stunning-two-column-blog/
and my carousel works fine (scrolling works fine, all the images are rendered) but when i navigate to an EDIT page then is just disappears but still shows the scrolling function
here it is working :
http://s7.postimage.org/dsf75yc6z/Carousel.png
and now i pressed EDIT : http://s13.postimage.org/64i1v0hif/Carousel2.png
this is the carousel code in my layout:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="../slider/musteri.jpg" /></div>
<div class="item"><img src="../slider/Deepak.jpg" /></div>
<div class="item"><img src="../slider/4.jpg" /></div>
<div class="item"><img src="../slider/1.jpg" /></div>
<div class="item"><img src="../slider/2.jpg" /></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
my EDIT function is scaffold made:
# GET /news/1/edit
def edit
#news = News.find(params[:id])
respond_to do |format|
format.html # new.html.erb
format.json { render json: #news }
end
end
My EDIT view simply renders <%= render 'form' %>
that form is the same as the one that is used for NEW and there the carousel works fine!
and that is making me nuts! Any ideas ? :D
The issue here is the path to your images. Rails has the asset pipeline so you don't really need to put the images within another folder within the asset folder. (hope that makes sense)
Take your images out of your slider folder and just place them in
assets/images
and then when you want to call an image just use
<img src="/assets/filename.jpg">
Hope that helps
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.