I'm trying to render the creation of a post with jquery ajax but I can't seem to get it to work correctly. It seems to render the post with very strange (I think nonexistent) styling and the flash message appears only after the page is refreshed. The post also get formatted correctly after the page is refreshed.
Here's the javascript:
$("#micropost_form").before('<div id="flash_notice"><%= escape_javascript(flash.delete(:notice))%></div>');
$("#user_info").html("<%= pluralize(current_user.microposts.count, "micropost") %>");
$("#feed_items").prepend(" <%= escape_javascript(render(:partial => #micropost)) %>")
$("#micropost_form")[0].reset();
The body of my application layout:
<body>
<div class="container">
<%= render 'layouts/header' %>
<section class="round">
<div id="flash_notice"><%= render 'shared/flash_messages'%></div>
<%= yield %>
</section>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
</body>
Here's my home page (rendered in the yield of the application layout):
<table class="front" summary="For signed-in users">
<tr>
<td class="main">
<h1 class="micropost">What's happening?</h1>
<%= render 'shared/micropost_form' %>
<%= render 'shared/feed' %>
</td>
<td class="sidebar round">
<%= render 'shared/user_info' %>
<%= render 'shared/stats' %>
</td>
</tr>
</table>
Here's my feed partial:
<% unless #feed_items.empty? %>
<table id="feed_items" class="microposts" summary="User microposts">
<%= render :partial => 'shared/feed_item', :collection => #feed_items %>
</table>
<%= will_paginate #feed_items %>
<% end %>
My flash messages partial:
<% flash.each do |key, value| %>
<div class="<%= key %>"><%= value %></div>
<% end %>
Let me know if there's any other code I should post.
So what am I doing wrong? If you want to look at all the code and run it locally to get a better understanding of what's happening, you can find it here: https://github.com/meltzerj/sample_app
When you're using ajax, you need to use flash.now for flash messages. See docs here. Rails is looking for a page refresh/redirect to push and pop from the flash hash stack, using now will set it immediately, then you can access it as above. You can use flash.now in replace of your regular flash usage in the controller. Something like this is very typical:
if #object.save
flash.now[:notice] = "Object successfully created"
else
...
end
So that will fix your flash issue.
As for the weird content/styling, it's a bit hard to comment without actually seeing the markup. The only thing that looks odd to me is the render :partial => #micropost
I'm not sure if #micropost is just a string, but you'd normally do something like render :partial => 'path/to/partial', :object => #micropost
Again it's almost impossible to say without seeing all the other markup
Related
I'm trying to create a notification center that have pagination(via Kaminari)
like facebook.
I want this center to show pagination from any page(this center is contained in a header file).
Now I've written code below, then it shows appropriately when I access to home.html
But its pagination doesn't work in other page (eg. views/test/test.html.erb).
Probably, ajax seems cannot read js file so if I put test.js.erb file in the views/test, it will work.
In views of operation and maintenance, that is undesirable way.
How can I read pagination by using only one js.erb file? thank you for your helping
Source code is below.
Model
app/models/item.rb
class Item < ActiveRecord::Base
paginates_per 50
end
Controller
app/controller/items_controller.rb
before_action :pagination
def pagination
#items = Item.page params[:page]
end
View
app/views/static/home.html.erb
<%= render 'static/header' %> <!-- reading partial header-->
app/views/static/_header.html.erb
<div><%= render 'application/items', items:#items %></div>
app/views/static/home.js.erb
$('#items').append("<%= escape_javascript(render '_items', object: #items) %>");
$("#more_link").replaceWith("<%= escape_javascript(link_to_next_page(#items, 'more', remote: true, id: 'more_link')) %>");
app/views/application/_items.html.erb
<div id="items">
<%= render 'items' %>
</div>
<%= link_to_next_page #items, 'more', remote: true, id: 'more_link' %>
app/views/application/__items.html.erb
<% #items.each do |item| %>
<div><%= item.name %></div>
<% end %>
I'd suggest creating a separate controller action to handle ajax requests:
class ItemsController
def paginate
end
end
then move js.erb code under views/items/paginate.js.erb.
Kaminari's link_to_next_page helper uses link_to inside so it should be possible to add controller and action params to link:
<%=
link_to_next_page #items, 'more',
controller: 'items',
action: 'paginate',
remote: true,
id: 'more_link'
%>
I need to append a link_to block in, but I encountered some troubles.
Here is the link_to block
<%=link_to user_create_question_sort_section_path, :remote=> true , :method=> :post do %>
<button class="btn glyphicon glyphicon-sort-by-attributes"></button>
<% end %>
It works fine and displays perfectly in html, but it would display wrongly if I use js.erb to append.
In js.erb I typed
$('#sort_btn').append("<%= j link_to user_create_question_sort_section_path, :remote=> true , :method=> :post do %><button class="btn glyphicon glyphicon-sort-by-attributes"></button><% end %>");
However, it displays like this
It seems took the path arg as name.
Wrap the link_to block into a partial and render it in your js.erb template.
# _link.html.erb
<%= link_to user_create_question_sort_section_path, :remote=> true, :method=> :post do %>
<button class="btn glyphicon glyphicon-sort-by-attributes"></button>
<% end %>
And in your template, render the link
# action.js.erb
$('#sort_btn').append("<%= render 'link' %>");
I have a form in my Rails 4 app.
I have some jQuery to hide or show form fields based on selections made elsewhere in the form.
This works in development mode, but when I push to production the hidden fields are not shown when the relevant selections are made.
I have a projects form which has:
<%= f.input :ethics_relevance, as: :boolean, boolean_style: :inline, :label => 'Is a research ethics review relevant to or required for this project?' %>
</div>
<div id="project_ethics_relevance_content" class="content hidden">
<div class="row">
<%= f.simple_fields_for :ethics do |f| %>
<%= render 'ethics/ethic_fields', f: f %>
<% end %>
</div>
<div class="row">
<div class="col-md-6">
<%= link_to_add_association 'Add an ethics consideration', f, :ethics, partial: 'ethics/ethic_fields' %>
</div>
</div>
</div>
In my projects.js file, I have:
jQuery(document).ready(function() {
jQuery("#project_ethics_relevance").on('click', function() {
if (jQuery(this)[0].checked) {
jQuery('#project_ethics_relevance_content').removeClass('hidden');
} else {
jQuery('#project_ethics_relevance_content').addClass('hidden');
}
});
});
In development, when the :ethics_relevance boolean is true, the form fields for ethics_fields are displayed.
In production, I check the box, but the form fields do not display. I don't have any related console errors showing in my code inspector.
Can anyone see what might need to be done to get javascript files to work in production mode?
I wanted to create a one-page only based website. the problem is, how to I render a template later?
also, how to render a specific post?
eg:
<!-- situation 1-->
<% include ../_header %>
<div width="40%">
<% include ../menu %> <!-- lots of post, once clicked will become situation 2 -->
</div>
<% include ../_footer %>
<!-- situation 2-->
<% include ../_header %>
<div width="40%">
<% include ../menu %>
</div>
<div width="60%">
<% include ../posts %>
</div>
<% include ../_footer %>
If you are using nodejs, and express, you will have two routes:
router.get '/posts' (req, res) -> res.render('posts_template')
router.get '/posts/:post_id' (req, res) -> res.render('post_template')
As you can see, you have two different routes and templates for displaying posts and a single post.
You will use layouts, have a post_template that defines only a post:
File: post_template.ejs
<% layout('layout') %>
<h1><%= title %></h1>
<p><%= body %></p>
And you will have a layout template for this post template:
File: layout_template.ejs
<h1>Posts list </h1>
<%= body %>
Now the post_template will be nested inside the layout_template, where the <%= body %> is.
I have a list of user 'submissions' in my Rails app, and when a user submission is clicked, I would like the full submission to load into the view, without having to go to a new page.
Here's the code for the list of submissions:
<div id="submission-list-container">
<% current_user.submissions.each do |i| %>
<a href='#'>
<div id="post-container">
<%= i.title %>
</div>
</a>
<% end %>
</div>
The partial I have created, <%= render "show", :submission => i %>,, works fine, but I would like the full submission to be loaded into the view (index.html.erb), when that link above is clicked. Is there a good method for doing this? Should I just do something else like an AJAX call in JavaScript? I like these partials because it feels more clean and organized to seperate code.
My partial is pretty simple at the moment:
<%= submission.title %>
<%= dat_markdown(submission.content) %>
You can do this using a TitlePane in the Dojo Toolkit, and probably there's a similar widget with jQueryUI.
I can only speak to the Dojo Toolkit's version
You would do something like:
<div data-dojo-type="dijit/TitlePane" data-dojo-props="href: '/blah', title: '<%= submission.title %>', open: false">
You can include this in your application layout for lite usage of dojo, loaded from a CDN:
<script data-dojo-config="async: true, parseOnLoad: true"></script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
The TitlePane is wired up so that when it is expanded, it will autoload the content that is provided to the href parameter.
While this isn't exactly a rails solution directly, it can be used as an alternative.
For a Rails Solution, you can simply use an AJAX call to a controller that renders the partial. You may even be able to hook it up using the
def blah
#submission = Submission.find(...)
respond_to do |format|
format.html # default render
format.js # js behavior
end
end
then a blah.html.erb
<%= render partial: 'submission/submission', object: #submission %>
with the partial
<div id='submission-<%= submission.id %>'>
<div id='submission-<%= submission.id %>-title'><%= link_to(submission.title, 'blah/blah', remote: true) %></div>
<div id='submission-<%= submission.id %>-content'></div>
</div>
and a blah.js.erb
$.get('/submission/content', function(data) { $('#submission-<%= #submission.id %>-content').html(data) } );
and an entry into the submissions_controller with route
def content
#submission = Submission.find(...)
render text: #submission.content
end
This probably isn't an exact solution, but hopefully it'll put you on the right path.