Передача файла типа ввода из формы в colorbox - PullRequest
Новая
       55

Передача файла типа ввода из формы в colorbox

0 голосов
/ 07 января 2020

Может ли кто-нибудь помочь мне выполнить ajax запрос на форму в окне colorbox?

Форма загружается в colorbox (как и другие формы в приложении) после отправки формы вызывает ajax функция и по результатам покажет любые ошибки или закроет окно. Это прекрасно работает со всеми формами, пока я не положу <input type="file" name="logo" id="logo"> в форме. Моей первой находкой было то, что переменная $ _FILES не была передана в вызов ajax. Я проверил, что тип формы имеет enctype = "multipart / form-data", что он делает.

Я прочитал, я могу сделать следующее: 

var logo = $( '#logo' ).files[0];
form.append("logo", logo);

Это, похоже, работает, действие Событие продолжилось и содержало переменную $ _FILES. однако при дальнейшей отладке выяснилось, что как только он достиг первой строки, он выходил из javascript и переходил к поведению по умолчанию (ie запускало действие). Я пробовал такие вещи, как form.preventDefault (), но, увы, до сих пор нет go.

. Вот пример формы, используемой внутри colorbox, с проблемой: 

<div id="cboxLoadedContent" style="width: 475px; overflow: auto; height: 1852px;">  
<div class="project-info infobox popup-editor">
    <form class="form-editor admin-link" action="//local.this.com/?action=save-company&amp;company-id=6&amp;user-id=51" method="post" enctype="multipart/form-data">
        <div class="output-message">

        </div>
        <h2>
            Company editor - New Company. (<i class="fas fa-clipboard-check"></i>)
        </h2>
        <h3>All fields marked with an <span class="compulsory">*</span> are compulsory</h3>
        <h2>
            Parent Company Details
        </h2>
        <p>
            <label>
                Parent Group<span class="compulsory">*</span>:
            </label>

        <select class="combobox" name="group_id">
            <option value="1">Test Tester</option>
        </select>

        </p>
        <h2 id="logos">Company Logo's</h2>
        <h6>If no company logo is provided the default will be assumed.</h6>

        <p>
            <label>
                Logo:
            </label>
            <input class="filebox" type="file" name="logo" id="logo">
        </p>
        <h6>Image should be 291x37</h6>
        <p class="centre controls">
            <input class="button" type="submit" value="Save"> 
            <input type="button" class="button cancel" value="Cancel">
        </p>
    </form>
</div>
</div>

вот немного больше о javascript функции, которую вызывает submit: 

function handleForm(form, $) {
    var ll = $( '#logos' ).length;
    if (  ll > 0 ) {
        var logo = $( '#logo' ).files[0];
        form.append("logo", logo); // <- this line is where it breaks
    }
    alert('oomph');<- this is not hit when the form contains a logo image
    jQuery.ajax({
        url: form.attr("action") + "&output=json",
        cache: false,
        dataType: "json",
        method: "post",
        data: form.serialize(),
        success: function (data) {
            form.fadeTo(700, 1);
            var ok = true;
            if (!data) {
                form.find(".output-message:first").html("<div class=\"error-message\">No data returned from server</div>");
                ok = false;
            }
            if (data.message) {
                form.find(".output-message:first").html("<div class=\"message\">" + data.message + "</div>");
            }
            if (data.error) {
                form.find(".output-message:first").html("<div class=\"error-message\">" + data.error + "</div>");
                ok = false;
            }
            alert(ok);
            [ some more irrelevent code]
        },
        error: function (jqXHR, textStatus, errorThrown) {
            form.find(".output-message:first").html("<div class=\"error-message\"> + textStatus + " - " + errorThrown + </div>");
            $.colorbox.resize();
        }
    });
}

Я потратил много времени на это, но ничего не получил. Как упоминалось ранее, тот же сценарий вызывается для другой всплывающей формы, этот файл не вводится в файл и проходит по желанию ajax.

спасибо

Крейг

...