N
N
Nikita Kit2017-06-19 21:45:51
JavaScript
Nikita Kit, 2017-06-19 21:45:51

Why is formData not working with jquery ajax?

I have a feedback form that sends form fields to the server:

data = new FormData();
        dataInput = thisMod.find "input:not([data-type=spam]),textarea"
        dataInput.each ->
          thisField = $ this
          thisFieldType = thisField.attr('type')
          thisName = thisField.attr('name')
          thisData = thisField.val()
          if thisFieldType == 'submit'
            data.append thisClassMod, thisClassMod
          else
            if thisFieldType == 'file'
              console.log thisName
            else
              data.append thisName, thisData
              console.log thisName, thisData


        dataString = thisMod.serialize()
        #bug solution for "submitVar param of FormIt"
        dataString = "#{dataString}&#{thisClassMod}=#{thisClassMod}"

        url = (typeof thisMod.attr("action") == 'undefined') ? "" : thisMod.attr("action")
        resCall = require '../modal/modal'
        XHR = $.ajax
          url: url
          type: 'POST'
          processData: false
          contentType: false
          cache: false,
          data: data
        XHR.done (msg)->

          if thisClassMod == 'modal-rw'
            resCall("Спасибо за ваш отзыв",'В скором времени он будет опубликован модератором приложения', true)
          else
            resCall('Долго ждать?<br>Наберите нас прямо сейчас: ‎8 (499) 991-21-61','Спасибо! Ваша заявка отправлена!', true)
        XHR.fail (error) ->
            resCall('Возникла ошибка на сервере =(','Перезагрузите страницу', false)


dataString ajax sends normally, but formData does not want to. I need to append the files there (and I haven’t done it yet) - but it doesn’t work without them. At what in sending everything seems to be correct, the notification comes about sending - success. But no emails are sent to the mail.
Fucking for the second day - I dug up the entire stackoverflow - nothing helps. Only thisMod.serialize() works
On the MODX Revo server with the FormIt plugin

UPD: as promised, the module was uploaded and updated. I leave the link.
https://github.com/WebKieth/Black-UI/tree/master/s...

Answer the question

In order to leave comments, you need to log in

1 answer(s)
N
Nikita Kit, 2017-06-21
@ShadowOfCasper

UPD:
I solved my problem. As it turned out, the data in FormData was formed correctly and sent to the server as it should. However, the FormIt issue that people often run into has played a role, causing multiple FormIt forms to work on a page. To create several forms, you need to place the submitVar parameter in the snippet call, and form the value of this parameter in the sent data in the form submitParam=submitParam. In the script above, this fragment is marked with #bug solution for "submitVar param of FormIt" comment.
As a result, I sorted the data into FormData, putting there, by analogy, the same key-value of the submit-button. It went something like this:

thisClassMod = thisActiveSubmitter.attr 'name'
        formData = new FormData()
        $.fn.serializefiles = (formData)->
            obj = $ this
            $.each $(obj).find("input[type='file']"), (i, tag) ->
              $.each $(tag)[0].files, (i, file) ->
                console.log tag.name, file
                formData.append tag.name, file
                return formData
            params = $(obj).serializeArray();
            submitName = {
              name: thisClassMod
              value: thisClassMod
            }
            params.push submitName
            console.log params
            $.each params, (i, val) ->
              console.log val.name, val.value
              formData.append val.name, val.value
              return formData
            return formData;
        formData = thisMod.serializefiles(formData)

In the future, I will update the description and leave a link to github with a description of the use of the module. I find it much easier and more versatile than Naumkin's ajaxForm for three reasons:
1) The script can be friends not only with FormIt
2) It is written more cleanly and scales well (for example, all validation is placed in a separate switcher and relies on the data-type in fields, and not on the data in the snippet call, which in turn requires extra req-res from the server)
3) The script is written only in jquery and does not require form.jquery.js and jgrowl - in .done -> and .fail -> You can call any modal that you want to call. Personally, I wrote my own, because, again, js plugins generate dynamic modals, once again loading the browser with markup rendering.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question