I have a model called Details, and two controller methods new and create. New method displays a form to create Details (in new.html.erb), which gets posted to the Create method that saves it. (when it succesffully saves, it it renders the new.html.erb file with the details.) This works as expected.
Now i want a separate page with a link to fill in these details. I want the click to do the intended work through a popup, example redbox. When you click on that link, a popup should show the form, whose submit should post the form, and if it is successfully done, then refresh the original page. If the post is unsaved, then the same form should show the errors. What do i need to do to make it work in Ror? I guess i need some stuff to go in new.js.rjs and maybe create.js.rjs, but i can't really figure out what to put in those files.
Redbox updates the page's dom to add a div at the end of it. So your form is a part of the main page.
So if you add a form tag in this redbox, all your page will be reloaded as there's only one.
So you add anywhere in your page (preferably at the end) :
<div id="redbox" style="display: none;">
<%= form_for #details do %>
# Whatever form fields you want here
<% end -%>
</div>
You do a link that'll open the redbox :
<%= link_to_redbox 'Open The Details Form', 'redbox' %>
This will display your redbox with your form.
And as it is the same page, not a new windows, when you'll validate your form, it'll reload the all of it.
I used a link_to_remote_redbox for this, which on clicking, fetches the form rendered by the new method call in a popup widnow. it submits to the create function and it is now working. actually i had previously made it work without ajax and i was having difficulty in making it work with ajax. the problem was solved once i made separate partials for ajax calls, and doing:
respond_to do |format|
format.js { render :template => 'detail/ajax_template'}
...
end
I provided different templates for both create and new method calls, used the :html => {:id => 'some-id'} in form and the :update => {:some-id} to replace the form with the message that it worked correctly.
So I didnt know that i needed separate templates for the different styles of forms, and that i needed to use the :update option to replace the form when i asked the above question.
Related
I know this is an old question, but I cant get it solved..
I want to show a list of comments in a modal, specific to each iteration.
Content has_many comments, Comment belongs_to content`
#contents.each do |content|
content.title
button_to('read', category_modal_path(:comment_id => content.id), remote: true, :class=> 'modal-trigger2', 'data-target'=>'modal3')
end
controller
def category_modal
#comments = Comment.online.where(content_id: params[:comment_id])
respond_to do |format|
format.js
end
the modal
<div id="modal3" class="modal modal-fixed-footer">
...here I want show the list of comments
category_modal.js
$('#modal3').html(<%= j( render partial: 'shared/modal2', locals: {comments: #comments} )%> );
coffee
$('.modal-trigger2').leanModal()
Modal opens but no data.. help would be very nice..
Okay after an hour efforts I am able to solve your issue. Follow these steps.
First of all remove $('.modal-trigger2').leanModal() from coffee script. It does not need any more.
In category_modal.js paste the following code
$('#modal3').html("<div href='#modal3' id='content_<%=params[:comment_id] %>'><%= j( render partial: 'shared/modal2', locals: {comments: #comments} )%></div>");
$('#content_<%=params[:comment_id]%>').leanModal();
$('#content_<%=params[:comment_id]%>').trigger('click');
You might need to add method: :get on your category listing If your route is not of post type so
#contents.each do |content|
content.title
button_to('read', category_modal_path(:comment_id =>content.id), remote: true, :class=> 'modal-trigger2',method: :get)
end
okay now tell me what was the issue.
Basically it was the mess of leanModal If you have used bootstap modal it would not be the problem.
Basically Whenever we call leanModal on any element It stops it default behaviour i-e Click So from now on when some one click on it , It open the popup in which it shows the corresponding content which was mentioned in href of the clicked item.
So when I call $('.SomeClass').leanModal() It will add a click event for all of the item having class SomeClass and open modal when some one click on it and show the content.
So in your case when you called $('.modal-trigger2').leanModal() It simply added a click event for all of your Contents buttons and open the popup whenever you clicked on any of it. It even didn't send an ajax call to server.
As you know initially there was not any content in modal3 container that's why it opened empty modal.
So now what I did was to remove this call and moved all of the popup logic in category_modal.js
So whenever you click on a Content it send an ajax request to server. In JS view I am doing the same thing you were doing but now I added a wrapper around your comments and set the ID unique depending on your requested content_id .
After that I call leanModal on this newly created wrapper div.
And trigger the click event on it so modal will show automatically.
P.S
You don't necessarily need this dynamic ID stuff following code will also work .
$('#modal3').html("<div href='#modal3' id='leanModalContainer'><%= j( render partial: 'shared/modal2', locals: {comments: #comments} )%></div>");
$('#leanModalContainer').leanModal();
$('#leanModalContainer').trigger('click');
I've got a view that renders a contact form. This contact form is rendered through javascript. There is also a javascript filter that the user can set viewing options in. (Depending on the settings, different markers are shown on a google map. The user can then click on the markers and in the viewbox click on a view button that renders some info and the contact form below the map)
If I were to make a normal form and use the post method with a #contact and contact routes, I would have to rerender the entire page after the #contact#create method was called. Which would mean all of the current users filter options would be unset. I could obviously save the settings, but feel like this is a hassle.
What I would like is for the contact form to call a method upon submit without actually changing paths, but I have no idea if this is even possible. (i'm using simple form so an answer for that would be preferable)
Since your question is quite broad, I'll have to answer as such:
if this is even possible
Yes it's possible.
You'll have to use ajax to send an asynchronous request to your server.
Ajax (Asynchronous Javascript And Xml) sends requests out of scope of typical HTTP; you can send/receive "hidden" data without reloading (this is what you want):
Don't worry - ajax is really simple once you understand it.
There's a great Railscast about it here:
Implementation
For you, you will just have to get your form to submit over ajax (javascript). There are two ways to do this:
Standard JS (JQuery)
Rails UJS (unobtrusive Javascript)
Basically, javascript acts as a mini browser, opening a url on your server, handling the returned data & doing what you tell it on the path:
<% form_tag contact_path, remote: true %>
<%= text_field_tag "name %>
<%= email_field_tag "email" %>
<%= submit_tag %>
<% end %>
You'll then be able to back this up with the corresponding controller action on your server:
#app/controllers/contact_forms_controller.rb
class ContactFormsController < ApplicationController
def create
... #-> your own logic here
respond_to do |format|
format.js #-> when receiving a pure xml request, this will fire
format.html
end
end
end
#app/views/contact_forms/create.js.erb
$("body").append("<%=j #variable %>");
Without going into too much detail, this is the most efficient way to achieve what you want. I can elaborate if required.
I'm quite new to Rails and trying to make app with Foundation framework. The problem is with modal window.
I have an index.html.erb file in views/users folder, generated by scaffold.
Also there is a new.html.erb file in the same folder.
I want to open ../users/new link in modal window on index page.
I used examples in Reveal (Foundation Documentation), put new.html.erb file content in:
<div id="myModal" class="reveal-modal">
.
.
</div>
Also, add to New User link "href" attribute.
<%= link_to 'New User', new_user_path, 'data-reveal-id' => 'myModal' %>
as was described here.
Now I need to render new.html.erb in index.html.erb, cause I need this code just before /body tag, as described in Foundation Docs.
I've tried to render it as partial, but it doesn't work.
Is there any way to do it, without double new.html.erb as _new.html.erb and inserting it as partial in index.html.erb?
I don't think, that RoR with all there's "Write less code!" stuff, doesn't have the way for do it without code duplicating.
Thanks!
You cannot use the new action as it is, though you can put your form in one partial, use across new and your action to generate form in modal.
On Page load you can use _form partial.
You can use ajax to generate the form for the model if you want on fly, this can be use for edit as well as new.
Step1 :link_to "your action path", remote: true, id: "abc"
Step2: your action path should return html of the form using render to string
Step3: now using jquery ajax success of $("#abc") replace your model inner content with the form.
And use the create action for both ajax and postback.
Code is DRY.
Let me know if you need the code.
Thanks
I am developing rails 3 application (I am newbie in Rails).
Currently, I have a form (use "form_for") for submit, there is a div area under the form. What I want is when user click the 'submit' button of the form, based on the user input data in the form, application will first go to the database to retrieve and organize some data, then the div area under the form will be rendered with the organized data.
That's the content of the div area is rendered dynamically based on user's input in the form, and the div render happens when user click "submit" form button .
The index.html.haml:
=form_for :myform do |form|
= ...
= ...
=form.submit "submit"
%div.result
/dynamic content to be rendered here, when user submit the form
=render :partial 'result'
I think my form submission should first go to run a controller method to organize the data from Database, and what's the next step I should do? As you noticed from the above code, I have a partial there under div, I would like to update the 'result' partial when user submit form, but how to implement this??
examples of how you may update your page in response to ajax polling
#some_controller.rb
def your_action
end
# javascript erb file. views/some_controller/your_action.js.erb
$('div.result').html('<%= escape_javascript(render :partial => 'your_action' -%>');
# _your_action.html.haml
= #dynamic_data
Rails scaffolding will give you a clue on how to do this. Just include the form as partial as well in your show template. Something like this:
index.html.haml (or new.htm.haml):
= render 'new'
show.html.haml:
= render 'new'
# display your #object
How do I attach an onclick event to a link_to_function such that clicking on the event refreshes an element on the page (using partials)?
When the user clicks the generated link, I'd like to refresh the partial containing the code so that i gets updated.
def add_step_link(form_builder)
logger.info 'ADD_STEP_LINK'
link_to_function 'add a step' do |page|
form_builder.fields_for :steps, Step.new, :child_index => 'NEW_RECORD' do |f|
logger.info 'inserted js'
html = render(:partial => 'step', :locals => { :step_form => f, :i=>#i+=1})
page << "$('steps').insert({ bottom: '#{escape_javascript(html)}'.replace(/NEW_RECORD/g, new Date().getTime()) });"
end
end
end
I have a partial in a larger form that contains just:
<%= add_step_link(technique_form) %>
I am attempting keeping track of the number of steps in a technique. In the form I am creating, users can add new steps to a set of instructions. Right now, I have default fields for steps 1-7. Adding one step, gets you step 8. The problem is that subsequent steps are numbered '8' also.
I am extending the "Multiple child models in a dynamic form" tutorial in http://railsforum.com/viewtopic.php?id=28447 for my own purposes.
Ok, I'm a little confused about what you are doing, but I'm going to try and make some suggestions.
Rather than use link_to_function, use link_to_remote. Link to function calls javascript, but what you actually want to do is call back to a controller that then runs some rjs to either replace the full partial or, more likely, append the new partial (containing the step) to the end of your current steps.
This is similar to all those examples you will have seen where people append a comment to the end of their blog comments (expect using link_to_remote rather than remote_form_for) see 3/4 of the way through http://media.rubyonrails.org/video/rails_blog_2.mov
You can see the docs for link_to_remote here: http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper.html
I suggest using link_to_remote as RichH suggests. The trick for you it seems is keeping track of #i. I'd either put it as a URL parameter in link_to_remote, or in the session object. I'd suggest the session—it seems easier.