Sending data and file with ajax and jquery

Question

I know that there is a topic speaking about this I followed it but i still have problem with my code Here is my code

var id_dossier              = $('#jform_id').val();
        var date_facture            = $('#jform_date_facture').val();
        var date_paiement_facture   = $('#jform_date_paiement_facture').val();
        var mode_paiement_facture   = $("select#jform_mode_paiement_facture option").filter(":selected").val();
        var idBanque                = $("select#jform_id_banque option").filter(":selected").val();
        var idCompte                = $("select#jform_id_compte option").filter(":selected").val();
        var cheque_facture          = $('#jform_cheque_facture').val();
        var montant_cheque          = $('#jform_montant_cheque').val();
        var numero_facture          = $('#jform_numero_facture').val();
        var numero_retenu_source    = $('#jform_numero_retenu_source').val();
        var echeance                = $('#jform_valeur_echeance').val();
var document_facture        = document.getElementById('facture_document');

the document_facture is the file input

Then I put the data in a other var I called donnee

var donnee ={
                        'id_dossier' : id_dossier,
                        'date_facture' : date_facture,
                        'date_paiement_facture' : date_paiement_facture,
                        'mode_paiement_facture' : mode_paiement_facture,
                        'id_banque' : idBanque,
                        'id_compte' : idCompte,
                        'cheque_facture' : cheque_facture,
                        'montant_cheque' : montant_cheque,
                        'numero_facture' : numero_facture,
                        'numero_retenu_source' : numero_retenu_source,
                        'echeance' : echeance,
                        'document_retenu_source' : document_retenu_source
                    };

Well in the other question there is this line of code and I dont know what is and how could I replace it in my code

var formData = new FormData($(this)[0]);

so I replace it with this

var formData = new FormData();
        formData.append('documents', document_facture.files[0]);

And I add it in the data of the Ajax Request

$.ajax({
                type:  'post',
                cache:  false ,
                url:  'index.php?option=com_tktransit&task=dossier.genererFacture',
                data: {donnee:donnee,formData:formData },
                success: function(resp)
                {
                    
                    if(resp == "1")
                    {
                        ajax_result_message("<?php echo JText::_( 'COM_TKTRANSIT_DOSSIER_FACTURE_GENERER' ); ?>",0,'facture');
                        afficher_button(2);
                        $('#td_facturation').html("<?php echo JText::_( 'COM_TKTRANSIT_FACTURE_DEJA_FACTURER' ); ?>");
                        $('#td_check_facturation').hide();
                        generate_pdf(id_dossier);
                    }
                    else if(resp == "2")
                    {
                        ajax_result_message("<?php echo JText::_( 'COM_TKTRANSIT_DOSSIER_FACTURE_NUMERO_FACTURE_EXISTE_DEJA' ); ?>",1,'facture');   
                    }
                    else
                        ajax_result_message("<?php echo JText::_( 'COM_TKTRANSIT_DOSSIER_FACTURE_ERREUR_GENERER_FACTURE' ); ?>",1,'facture');   
                    $("#ajax-facture-image_loader").hide();
                },
                error: function(XMLHttpRequest, textStatus, errorThrown)
                { 
                    ajax_result_message("<?php echo JText::_( 'COM_TKTRANSIT_DOSSIER_FACTURE_ERREUR_GENERER_FACTURE' ); ?>",1,'facture');   
                    $("#ajax-facture-image_loader").hide();
                }   

              });

well When I click on the button to call the ajax function I got this error TypeError: 'append' called on an object that does not implement interface FormData. Any help please

You should check out the `ajaxForm` plugin: http://malsup.com/jquery/form/ — leftclickben, Nov 24 '14 at 09:01

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

You should placed all your variables on the form in the html page, so, the line

var formData = new FormData($(this)[0]);

will become

var formData = new FormData($('#yourFormUniqueId')[0]);

I think you can find more details by this answer

edited May 23 '17 at 12:12

Community

1
1

answered Nov 24 '14 at 09:00

ivan.mylyanyk

2,051
4
30
37

Well in my form I have A lot of file,and the user can add a lot of input file,I'd like this specific one Well If you mentioned I'm using joomla 2.5 and I have a main form,and I add to it many template – Rad Nov 24 '14 at 09:05
@Rad Why not place that particular file into a separate form, and post it with ajax? – ivan.mylyanyk Nov 24 '14 at 09:08
@Rad and what do you mean that your users can add a lot of files? As I see, you choose to post only specific values. – ivan.mylyanyk Nov 24 '14 at 09:10
I have a button, that generat a javascript code witch allow to user to add an input of type file I mean, when the user Like to add some file (some time 2 file some time 5 ) he click on the button, so I generat a input file type – Rad Nov 24 '14 at 09:49
@Rad well, that's ok, but when do you need those files? In the code above you just use one exact file. In this way, you can add that fields(for additional files) to the another form, and post it separately, and post this exact file as above. Am I missing something? – ivan.mylyanyk Nov 24 '14 at 09:52
FormData($('#yourFormUniqueId')[0]) this will get all the input in my form, or, just the input of type file? if the first one,here there is a problem, beceause there is a lot of thing that I dont need if the second that's ok – Rad Nov 24 '14 at 10:11
@Rad it will add all input from the form. ok, I understand the problem, I will think further. – ivan.mylyanyk Nov 24 '14 at 10:49

Sending data and file with ajax and jquery

1 Answers1