I'm new to using jquery modal dialog boxes with rails and was wondering how I can :
show a jquery modal dialog box
with 1 field (eg "title")
post this form to a rails controller (via
ajax)
have the modal dialog form
redisplay if field is not filled in
(with normal red css in error field)
Any tutorials or examples welcome.
Using Rails 3 and jQuery. Thanks for your time.
Here's an example of how I'd do it: https://github.com/ramblex/modal-form.
You should be able to:
download the app
run bundle
rake db:migrate
rails s
Go to localhost:3000/articles and the modal form should come up when you click on the 'New article' link.
An error message should be shown when the title field is left empty. Otherwise it should create the article and display it.
Hope it helps.
For modal box I use jQuery Tools.
Once you set that up, next step is to bind an ajax request when the form is submitted (eg: form.submit(function(){ $.post... })) and post the form's data to controller.
Third step is setting up your Rails controller to respond to ajax request (using respond_to block) and render something as response (probably using :layout => false).
If validation failed, you will replace content of your modal box with this response body, or if successful (let's say response was just head :ok), you will display a success message.
I hope this makes sense to you.
Related
I am doing a module using modal windows, where in the index I am showing all the records, saving data, editing and deleting everything using ajax. Pressing the respective buttons in the row of each record opens the modal window depending on the button. But I would like to press the "edit" button to send the log id to the controller, search the data and return it in the modal window. To send the id to the controller should I place a form on each button?
A traditional non-AJAX edit button that you would typically see in a Rails index page would look something like this:
<td><%= link_to 'Edit', edit_thing_path(thing) %></td>
You would need to do three things to AJAX-ify this:
change the link_to so that it sends an AJAX request instead,
get the things_controller#edit method to respond with JSON,
write some JS that picks up the JSON response from the server, and populates it in the modal's form.
An alternative approach, which might be easier, would be to use UJS as recommended by the Rails core team. In this case:
change the link_to to request a JS response
change the controller's edit method to respond by rendering a JS file
build a JS file that renders the modal server, side, and then replaces the current modal in your HTML with the newly-built modal form, and then
reveal the modal in the page
Have a look here in the Rails Guides (for Rails v4.2).
To do that I really like to use Best In place its supper simple to use and implement.
there is also a video on how to use it, its a bit old 302-in-place-editing
I have an admin form that updates a model via a html submit. I'd like to be able to send the form's contents to an Ajax modal dialog for a 'preview' via a link or button in the admin form.
Is there a way to send the form's contents to the modal dialog via Ajax without breaking the html submit? So far all I can do is get the data into the modal as html which breaks the js rendering. All the Ajax submit examples I find attach to the form which will break the html submit.
Suggestions and/or pointers are appreciated.
We are using Rails 3.2.12 for what it's worth.
I suppose it depends on how you are rendering your modal. If you're doing it server side and just need to get the form values to your ajax controller action you could do something like this with jquery"
$.post(ajaxUrl + "?" + $("#myform").serialize())
to generate a query string of your form values that you could sent to you ajax model.
Or if you're building the modal client side try
$("#myform").serializeArray()
to get an array of name, value pairs
This is what it took to get this to work under Rails 3.2.12
View:
<%= link_to 'Preview Promotion UI', admin_preview_promotion_url, id: :promotion_preview %>
The above link is inside the form do/end.
Javascript in application.js
$("#promotion_preview").live('click', (function (event) {
event.preventDefault();
$.post("/store/admin/promotions/preview",
$(event.currentTarget.parentElement).serialize().replace('=put&', '=post&'),
{},
"script"
);
}));
Rails.js injects some hidden code in the page that sets the type of response to PUT and then gets in the way of the routing. At least in this case simply replacing PUT with POST fixes things.
With this bit of code I can post my form updates as usual and activate a modal dialog "preview" using the form data.
I want to add a Ajax link into my application. When I click on the link it should pop up a modal dialog which contains event's details..
I add this link in my helper class.
link_to(event.name, events_path(#event), :remote => true
Then I create js file to insert content into hidden div.
$('.modal').html(<%= escape_javascript(render(#event)) %>);
$('.modal').dialog();
In here modal is my hidden div. But it could not pop up any modal dialog. I cannot understand what is the error and why is it not working. Plz can anybody help me to correct this?
Change
$('.modal').html(<%= escape_javascript(render(#event)) %>);
to
$('.modal').html("<%= escape_javascript(render(#event)) %>");
From a JS point of view, your code will be invalid because you're not wrapping your render in quotes and it will try to evaluate your HTML.
EDIT
If you're trying to link to this on a show click, you'll need to use show.js.erb to show your modal dialog rather than create.js.erb. create will only be called if you POST a form to /events whereas here it looks like you're trying to show just the details of the event.
Put the code above (with quotes) in the show.js.erb, make sure you have a respond.js response in your show method on the controller, and try it again.
Could be possible that you didnt install Jquery since the rails default is Prototype library. I would upgrade to Rails 3.1 which makes it easy to use jquery:
rails new example -j jquery
or install jquery:
http://railscasts.com/episodes/136-jquery
Sorry, only have been using rails for 10 day and I'm completely lost. Have a post model/controller and comment model/controller.
In post/show, I want to click an ajax button and replace a div (#addcomment) with the partial generated from comment/new (The new action takes two params and builds a comment for an ajax form partial). The comment/new partial is an add comment form with remote => true.
Anyone willing to point me in the right direction?
Tried using an ajax button in the view, that calls an action that replaces the div with the comment/new but it didn't work.
i just started building a small test app to help me learn MVC. i have a view that displays user comments. Under each comment i would like to have a reply action link. Clicking on the link should return a small form for adding a comment directly above the reply link.
What is the general approach for this? I'm imaging the form would be a partial view that i can somehow return using the reply link. Thanks for any help!
Using jQuery to retrieve and post the forms in partial views is how I would do it.
Just return partial view to be loaded by jQuery load:
$('#comment').load('/MyController/ActionReturnsPartial');
You should not have to retrieve anything from the server if the user is not providing any extra information along with the retrieval.
Instead of retrieving the form when the user clicks, just let the page render a form below each comment. Put the form in a div with style="display: none;". Then, when the user cliks the link, use jQuery to show the form. Something like
$('.commentlink').click(function(){
$(this).closest('div').find('.formdiv').show();
});
You may also be able to use jQuery's .toggle() method.