Dynamiczny formularz i moment kiedy zwrócono odpowiedź

0

Hej wszystkim.
Mam taką zagwozdkę że mam funkcję w JS która tworzy dynamicznie formularz

$('.download-file').click(function(e) {
    var downloadUrl = url + '/' + ajax_url;
    var form = null;
    var type = $(this).attr('data-type');
    if (type == 'pdf' || type == 'print') {
    	/* PDF's */
    	form = $("<form target='_blank' action='" + downloadUrl + "' style='display: none'></form>");
    } else {
    	/* Excel and CSV */
    	displayMessage('info', 'File is being generated. This might take a while ...');
    	form = $("<form action='" + downloadUrl + "' style='display: none'></form>");
    }
    var file_name = $(this).attr('file-name');
    form.append('<input type="text" name="download" value="' + type + '">');
    form.append('<input type="text" name="file_name" value="' + file_name + '">');
    $('#search_form *').filter(':input').each(function () {
        var name = $(this).attr("id");
        var val = $(this).val();
        if (typeof name != 'undefined') {
            form.append('<input type="text" name="' + name + '" value="' + val + '">');
        }
    });
    form.appendTo('body').submit();
    form.remove();
});

Wszystko działa prawie jak należy, niestety ... potrzebuję w chwili obecnej zmienić tekst na przycisku 'download-file' na 'Please Wait', problem w tym, że nie mam pojęcia w jaki sposób wykryć że odpowiedź (jakakolwiek) wróciła z form.submit(); aby z powrotem wrócić na oryginalny tekst.

0

Ja bym na Twoim miejscu zmienił koncepcję. W JavaScript istnieje coś takiego jak FormData i Ajax. Nie musisz tworzyć ukrytego formularza i pół po to, żeby coś wysłac.

Jedyna róznica jest taka, że Twój skrypt PHP(czy tam jakiś inny) musisz zwrocić link pod którym będzie można plik pobrać. Czyli dzielisz obecny skrypt na dwa:

  1. downloadUrl powinien zawierać logikę, która wygeneruje Ci plik csv/excel/inny i zapisze go na dysku
// pseudo kod, dla pliku generateFile.php
// patrze co przyszło z requesta
// generuje plik pdf/csv...
// zapisuje plik na dysku
// zwracam link echo download.php?filename=mojplik_2017_03_23_23f23n82d238yf23ne.pdf, a nie sam plik
  1. window.location = download.php?filename=mojplik_2017_03_23_23f23n82d238yf23ne.pdf
// pseudo kod, dla pliku downloadFile.php
$data = file_get_contents("mojplik_2017_03_23_23f23n82d238yf23ne.pdff");
header("Content-type: application/octet-stream");
header("Content-disposition: attachment;filename=mojplik_2017_03_23_23f23n82d238yf23ne.pdf");

echo $data;

U Ciebie obecnie wszystko się chyba dzieje za jednym razem. Wysyłasz formularz pod jakiś url i tam się generule plik + wysyła się od razu do przeglądarki, żeby zadziałał poniższy sposób, to trzeba to podzielić tak jak wyżej napisałem.

$('.download-file').click(function (e) {
    // Dwie pierwsze linijki zapakuja nam wszystkie dane z forma do zmiennej formData,
    // czyli stanie się dokładnie to samo, co po zrobieniu tego:
    // $('#search_form *').filter(':input').each(function () {
    //     var name = $(this).attr("id");
    //     var val = $(this).val();
    //     if (typeof name != 'undefined') {
    //         form.append('<input type="text" name="' + name + '" value="' + val + '">');
    //     }
    // });
    var form = $('#search_form')[0], // [0], zeby uzyskać obiekt JavaScript'owy, a nie jQueryowy
        formData = new FormData(form),
        downloadUrl = url + '/' + ajax_url,
        type = $(this).attr('data-type'),
        file_name = $(this).attr('file-name');

    // to nam zastępuje
    // form.append('<input type="text" name="download" value="' + type + '">');
    // form.append('<input type="text" name="file_name" value="' + file_name + '">');
    formData.append('download', type);
    formData.append('file_name', file_name);

    // extra message for excel and CSV
    if (type !== 'pdf' && type !== 'print') {
        displayMessage('info', 'File is being generated. This might take a while ...');
    }

    // to zastępuje form.appendTo('body').submit();
    // Twój submit na formularzu wykona GET request
    // (domyslnie jest to GET, bo nie sprecyzowałeś <form method="POST lub GET"></form>)
    // więc można to zastąpić czymś takim
    $.ajax({
        url: downloadUrl,
        data: formData,
        beforeSend: function () {
            // request się zaraz rozpocznie
            // więc możesz zmienić tekst na Prosze czekać...
        },
        success: function (data) {
            // request się wykonał,
            // możesz zmienić tekst guzika
            // ta linijka spowoduje faktyczny download pliku
            // zakładam, że data.url = download.php?filename=mojplik_2017_03_23_23f23n82d238yf23ne.pdf
            window.location = data.url;
        },
        error: function (jqXHR) {
            // coś nie tak...
            // jakiś komunikat o błędzie?
        }
    });
});

1 użytkowników online, w tym zalogowanych: 0, gości: 1