Pretty stumped at the moment trying to figure something out. I have a modal that shows a table, and for each of the entries in the table, I have actions (i.e., show, edit, delete, etc). When the user clicks on "Edit" for an entry row in this model, I want it to populate another model with a form to show the data associated with that entry.
Is there a convenient way to do this? For one, I do not know how to pass a parameter to a modal from another modal. I don't know how to make this form "reinitialize" after it's already been rendered when the first page is loaded.
Any suggestions?
I have been in the same situation and I suggest that you just keep the one modal and replace the contents through AJAX (IMO). Once you have rendered into the modal in the first place, your links can then just render as AJAX the same way that they would and overwrite the information inside the modal. The way I did it was this:
Populate the modal (you've already done that).
Create a link = link_to "Text", "url", remote: true (let's say this is the edit action).
Run the edit action in the controller as usual.
The edit.js.erb file would contain one line: $('#Modal_content').html("<%= j render 'edit' %>") (#Modal_content is just a div that I put in my modal so that I can replace all the contents without messing up the close button and other modal required html).
The _edit.html.erb file is called where you would put all of what you needed that comes from the edit action.
As for passing information, the id is passed through the link that you click on to call the controller#edit action.
Let me know if you need more details, but that should get you most of the way there.
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
(Rail 5 beta 3)
I have a table on an index page (action) of a view with around 15 columns. Some of them are for text and some of them are for integers only. Every entry of this list (table) will be filled out by a 'form_for' form (in new or edit action).
For editing or deleting there are links with each list entry in the index view leading to the corresponding show, edit or destroy actions. This all works well. Some of these entries are entered by a select with pulldown on the new or edit view. This works well, too.
But if one of these selects should be changed for more than one entry in the list it takes too much time to click on 'edit', change the select and click on submit at each list item. To make this a better user experience I would like to be able to change the selects in the list (table) directly. It would be good to have the select/pulldown in place. The change of the state or choosen entry should than be saved in place as well or with an extra button ("save changes") above/below the table.
To say it in short:
I want to update multiple entries in a table in an index view without editig each single entry via edit view. The dates will be changed by a select and the data should be saved by a submit button on this page
Has anybody an idea how I can solve this?
Try best_in_place gem. It can solve the problem you have quoted. here are some links to it
https://github.com/bernat/best_in_place
http://railscasts.com/episodes/302-in-place-editing?view=asciicast
Your original text wasn't that confusing to me...
You want what's called a bulk edit feature. Easiest way would be to set up a new target at the controller level specifically to handle this request. I'll give you the pseudocode and it should be easy enough to fill in the blanks, but essentially:
Create a "bulk edit" form (the drop down select menu above the table)
Create a controller method to handle the bulk edit (controller#bulk)
Update routes.rb to direct a URL to that new method
Handle the bulk update in the controller and redirect back to index upon completion (cheap way of updating the page after editing is done).
Note: I'm assuming your model name is "Resource" because you did not specify what it actually was
On your index page, you want HTML like:
<form method="POST" action="/resources/bulk">
<select name="bulk_value">...</select>
</form>
On change/form submit/whatever, submit that form.
If you're using resourceful routing, you can hook this into config.rb via:
resources :resources do
post :bulk, on: :collection
end
Otherwise, hook the route however you see fit.
Then, in your controller:
def bulk
value = params[:bulk_value]
Resource.update_all value: value
redirect_to {resources_path}
end
Now, you said index view, so I am assuming you want all. But if you just want a subset, you can pass the preferred IDs along with the form as a hidden field, then use a where clause to filter, i.e.
Resource.where(id: parmas[:id_array]).update_all(value: value)
Anyway, that should get you down the right path.
I want to have a contact form in a Bootstrap modal. Making a modal pop up was pretty simple.
The email will not go to the admin. The idea with my app is sort of like Airbnb, where users can have a house (one-to-one in my case). So on a show house page, a user can click a button to contact the owner. I can get the email from the relationship between the house and the user.
My contact form should not save to the database, just send an email. The only field I need is the message. I should be able to get the email from controller of the page serving the modal (that's why I don't want to introduce another controller).
There are some tutorials on making a contact form, such as this one: https://rubyonrailshelp.wordpress.com/2014/01/08/rails-4-simple-form-and-mail-form-to-make-contact-form/
But that creates a contact model, view, and controller. Right now my modal is a partial. How can I make that partial be the view for the contacts?
I feel like I shouldn't need a new model, view, and controller. Couldn't I just do this with a new mailer?
My question was probably dumb, due to my lack of understanding of Rails. I figured it out, and here is what I did, in order to help others.
The fact the form is in a modal does not matter. It's easy to render a form in a modal.
Because when you push the submit button, the form has to do something, a controller and route is needed. Then I needed a mailer. Basically this is the answer, but I did not need another view, since the form is already in my modal:
Contact Form Mailer in Rails 4
For your action of controller create a js.erb file like contact.js.erb and render your form partial in that. For example
jQuery("#modal_pops").html("<%= j render 'your_modal' %>");
jQuery("#model_container").modal("show");
and in that modal write your form. If you dont want to save that the information to database then just submit the form to an action and send email from that action. I hope you get it.
I am trying to implement two pages. The first page being a selection of the items I want to show on the second page.
On my first page, I have done a selection of the items which I want to render.
On click of a button, 1. the ids of these items will be placed in an array and 2. the user will be redirected to a new page through:
window.location.replace("/schedule");
Right now, I want to achieve the following:
Do an ajax call through rails to get each of the array items. i.e. make an ajax calls to the urls of myclass/[id]. The id belonging to the items in the array.
I am not sure how I could get my array items from the current page to the next page or if there is a better way of achieving this. Any advice or suggestion will be greatly appreciated.
Add :remote => true to your form. Then, app will render your action_name.js.erb view instead of action_name.html.erb. In js file you can put code, which will repleace div without redirection, f.e.
$('#div_id').html('<%= escape_javascript render(your_partial_name) %>');
You don't need to do anything special in partial and controller action, its all the same.
I am looking for the best way to create ajax enabled subforms from items in a list with MVC 3. A static list of values should be generated, but with an "edit" link/button next to every item, to toggle inline edits.
I did follow the tutorial at this link
http://blog.janjonas.net/2011-07-24/asp_net-mvc_3-ajax-form-jquery-validate-supporting-unobtrusive-client-side-validation-and-server-side-validation [1]
However it is based on the form edit fields always being visible
I'd like to show a static list with field values, but let the user activate an edit field by clicking "edit" (e.g. button)
I did modify the example at [1] by creating a default partial view with a form with submit button only. When posting the data by ajax the edit form will show. It looks like it is working, (I only need to hide validation errors on the first POST - which does not send real data).
Update:
An even better solution would probably be to leave out all forms in the static view, just have a single css class button/link next to each item, and let jquery fetch the relevant view for the clicked item. I am not sure how to do that with MVC 3+jQuery though.
Another update:
I discovered Ajax.Actionlink, which did exactly what I wanted!
I found out how to do it, and it turned out to be real simple!
I created two partial views.
One for rendering each static item. I used used Ajax.ActionLink with InsertionMode "replace", and set the parent of the item as the target
The second for rendering the form. Here I used Ajax.Beginform with similar options.
On successfully saved data, I returned the static view, on failure, I returned the partial view with the ajax form again.
I'm happy I found a MVC-centric way to do it (although it is fun creating custom stuff with jQuery)
It sounds like you need an inline editing plugin for jQuery. I would try jEditable. I have not used it myself but appears to have extensive docs.
this entry might help: code + video + explanation ;)
http://ricardocovo.wordpress.com/2011/04/03/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms/
-covo