Submiting Symfony 2 embedded form with file using ajax - ajax

Question

I'm creating embedded file uploading form with file validation in Symfony 2. For file uploading I used this example http://symfony.com/doc/current/cookbook/doctrine/file_uploads.html and for embedded forms this http://symfony.com/doc/current/cookbook/form/form_collections.html. It's work perfect, but I must submit a form using ajax, how can I do it?
Below is a example how I submit form using ajax.
$("#submit_form").click(function() {
var $form = $(this).parents('form:first');
var $that = $(this);
$.ajax({
type: 'POST',
dataType: 'json',
cache: false,
data: $form.serialize(),
success: function($data) {
if ($data.status == 'ok') {
$that.parents('#lightbox').html($data.template);
}
},
url: $form.attr('action')
});
return false;
});
So the problem is I can't pass files with ajax.

Answer 1

Use this plugin http://malsup.com/jquery/form/ . Works like a charm!
This can submit the form and also upload files. All you need to do is call ajaxSubmit and then implement the method that handles the response.
$('#myForm2').submit(function() {
$(this).ajaxSubmit({success: showResponse});
});
function showResponse(responseText, statusText, xhr, $form) {
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}