csanta
2013-Sep-19 19:13 UTC
CRUD model in a bootstrap modal with jquery, ajax - best practice
Hi,
i have an model, which i want to show edit and update in a dialog via ajax.
What i do at the moment:
To open the Modal and render the partial, i send an ajax request to
controller#show with ujs
this is the link:
<a class="person-dialog" data-remote="true"
data-type="script"
href="/en/people/32" onclick="return false">Fidel Markus
Armstrong</a>
this runs the script in new.js.erb which renders the show partial inside
the dialog and opens it.
To get the edit form, i do the same
<a class="person-dialog" data-remote="true"
data-type="script"
href="/en/people/32/edit" onclick="return false">Fidel
Markus Armstrong</a>
this runs edit.js.erb
Now: To update my model, i send the form data as json to the
controller#update
<form accept-charset="UTF-8" action="/en/people/32"
class="form-horizontal"
data-remote="true" data-type="json"
id="edit_person_32" method="post">
if there is an error in the form, i do render_to_string(form_partial)
inside the controller and respond with this inside of the json response.
Now i have the partial html inside of the json object. I do this, to get
the rails error messages and fields_with_errors.
Is there a better way to do it? all the mix between script and json format
and the partial html inside the json doesn''t feel right.
This is the ajax for the form submit:
$(''#dialog'').on(''submit'', ->
$(this).find(''form'').unbind(''ajax:beforeSend'').bind(''ajax:beforeSend'',(evt,
xhr, settings) ->
).unbind(''ajax:success'').bind(''ajax:success'',(evt,
data, status, xhr) ->
#insert Data to selectbox it there comes a type attribute with the
request
if xhr.status == 201 # :created
url = data.url #this is en/people/:id
# Load show dialog on success - runs show.js.erb
$.ajax({
url: url,
type: ''get'',
dataType: ''script''
})
else
# Render the dialog html including the error messages and fields with
errors
$(''#person-dialog'').html(data.error) #data.error is the
partial
$(''.field_with_errors
input'').first().trigger(''focus'')
$(''.modal-header'').prepend(action)
false
).unbind(''ajax:complete'').bind(''ajax:complete'',(evt,
xhr, settings) ->
).unbind(''ajax:error'').bind(''ajax:error'',
(evt, xhr, status, error) ->
)
)
>
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit
https://groups.google.com/d/msgid/rubyonrails-talk/c2f0ea23-fb98-44d9-a85d-a270489c8a07%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
Seemingly Similar Threads
- jquery, format.js and IE
- Rails and JQuery and Ajax/Json question
- Rails 3.2 jQuery JSONP request not working - Moved Permanently
- link_to with :remote=>true works when bound to "click" but not "ajax:beforeSend"
- Issues implementing jquery-form plugin for displaying image via an ajax call in my rails poc
