AJAX fileupload - TypeError: ajaxSubmit() nu este o funcție

25 sept. 2014, 19:36:56
Vizualizări: 15.2K
Voturi: 0

Am un plugin care funcționează ca un POST standard dar nu ca o cerere POST AJAX.

Primesc o eroare "not a function" în Firebug cu această funcție:

TypeError: jQuery(...).ajaxSubmit is not a function

jQuery(this).ajaxSubmit(options);

Această soluție magică a venit în ajutor: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/

( function($) {

} ) ( jQuery );

Acesta este fișierul js care este încărcat cu pluginul meu - se încarcă în header:

jQuery(document).ready(function(){

        var options = { 
            target:         '#output',   // elementul țintă care va fi actualizat cu răspunsul serverului
            beforeSubmit:   beforeSubmit,  // callback înainte de trimitere 
            success:        afterSuccess,  // callback după trimitere 
            uploadProgress: OnProgress, // callback pentru progresul încărcării 
            resetForm:      true        // resetează formularul după trimiterea cu succes    
        }

    jQuery('#nanny_app_upload').on('submit', function(e) {
                e.preventDefault();

                alert('Apelat submit jQuery');            
                jQuery(this).ajaxSubmit(options);
                alert('Post submit jQuery'); 
                // întotdeauna returnează false pentru a preveni trimiterea standard a browserului și navigarea pe pagină
                alert('Am primit acest răspuns de la server: ' + response);
                return false;
    });


//funcție după încărcarea cu succes a fișierului (când serverul răspunde)
function afterSuccess(){

    alert('jQuery afterSuccess');
    jQuery('#submit-btn').show(); //afișează butonul de submit
    jQuery('#loading-img').hide(); //ascunde butonul de încărcare
    jQuery('#progressbox').delay( 1000 ).fadeOut(); //ascunde bara de progres
}

//funcție pentru verificarea dimensiunii fișierului înainte de încărcare
function beforeSubmit(){

    alert('jQuery beforeSubmit');
    jQuery('#submit-btn').hide(); //ascunde butonul de submit
    jQuery('#loading-img').show(); //afișează butonul de încărcare
    jQuery("#output").html("");
}

//funcție pentru bara de progres
function OnProgress(event, position, total, percentComplete)
{
    //Bara de progres
    alert('jQuery OnProgress');
    jQuery('#progressbox').show();
    jQuery('#statustxt').show();
    jQuery('#progressbar').width(percentComplete + '%') //actualizează procentul complet al barei de progres
    jQuery('#statustxt').html(percentComplete + '%'); //actualizează textul de stare
    if(percentComplete>50)
        {
            jQuery('#statustxt').css('color','#000'); //schimbă culoarea textului de stare în negru după 50%
        }
}

});  

Iată Formularul generat dintr-un child theme:

//Formular de încărcare pentru Nannie
add_action("action_nannie_upload_form", "do_action_nannie_upload_form");

function do_action_nannie_upload_form()
{   
    $url = plugins_url();
    $plugins_url = $url . "/nannie-app/";
    ?><br>
    Un FORMULAR de încărcare!<br>
    <form action="<?php echo admin_url('admin-ajax.php'); ?>" 
    method="post" enctype="multipart/form-data" id="nannie_app_upload">
    <br>
        <?php wp_nonce_field('nannie_app_upload','nannie_upload_ajax_nonce'); ?>  
        <!-- Adaugă fișier nou -->  
        <span class="btn btn-file">Selectează fișier: 
        <input name="FileInput" id="FileInput" type="file" /></span>                
        <button type="submit" class="btn" id="submit-btn">Încarcă</button>                         
    </form>

    <img src="<?php echo $plugins_url; ?>images/ajax-loader.gif" id="loading-img"
    style="display:none;" alt="Te rog așteaptă"/>
    <div id="progressbox" style="display:none;"><div id="progressbar"></div >
    <div id="statustxt">0%</div></div>
    <div id="output"></div>
    <br>
    <br>                    
    <hr/>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/plugins/form/jquery.form.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/plugins/uload/ajaxFileUpload.js"></script> 

<?php 
}

Și iată acțiunea apelată la trimiterea formularului. Dacă elimin verificarea pentru anteturile AJAX, fișierul se încarcă dar mă redirecționează către o pagină goală.

add_action("wp_ajax_nopriv_nannie_app_upload", "nannie_app_upload");

function nannie_app_upload(){
    global $wpdb;   

    if(isset($_FILES["FileInput"])){
        log_me("nannie_app_upload: FileInput găsit");

    if (!isset( $_POST['nannie_upload_ajax_nonce']) || 
       !wp_verify_nonce($_POST['nannie_upload_ajax_nonce'], 'nannie_app_upload')){
       print 'Ne pare rău, nonce-ul nu s-a verificat.';
       log_me("nannie_app_upload: nonce-ul nu s-a verificat");
       exit;
    }

    if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
        if(isset($_SESSION["naap_app_uid"])){
             $app_uid = $_SESSION["naap_app_uid"];
        }
        log_me('nannie_app_upload: AJAX Nu a fost apelat #' . $app_uid);
        die();
    }

    //Verifică dacă dimensiunea fișierului este mai mică decât cea permisă.
    if ($_FILES["FileInput"]["size"] > 5242880) {
        log_me('nannie_app_upload: Dimensiunea fișierului este prea mare! #' . $app_uid);
        die("Dimensiunea fișierului este prea mare!");
    }       

    $_SESSION["naap_app_uid"] = $app_uid;    
    $UploadDirectory = WP_PLUGIN_DIR."/nannie-app/tmp/" . $app_uid . "/";

        ////////////////////////////////////////////////////
        //http://www.saaraan.com/2012/06/ajax-file-upload-with-php-and-jquery

        if (!@file_exists($UploadDirectory)) {
                //folderul destinație nu există
            if(!is_dir($UploadDirectory)) {
                mkdir($UploadDirectory);
                if (!@file_exists($UploadDirectory)) {

                    log_me('nannie_app_upload: Directorul de încărcare lipsește pentru încărcarea AJAX #' . $app_uid);
                    die("Asigură-te că directorul de încărcare există!");

                }
            }
        }

        //verificare tip fișier pe server
        switch(strtolower($_FILES['FileInput']['type']))
        {
                //tipuri de fișiere permise
                case 'image/png': //fișier png
                case 'image/gif': //fișier gif 
                case 'image/jpeg': //fișier jpeg
                case 'application/pdf': //fișier PDF
                case 'application/msword': //fișier word
                case 'application/vnd.ms-excel': //fișier excel
                case 'application/x-zip-compressed': //fișier zip
                case 'text/plain': //fișier txt
                case 'text/html': //fișier html

                        //Titlul fișierului va fi folosit ca nume nou
                        $FileName       = strtolower($_FILES['FileInput']['name']); //numele fișierului încărcat
                        $ImageExt       = substr($FileName, strrpos($FileName, '.')); //extensia fișierului              
                        $NewFileName    = substr($FileName, 0, strrpos($FileName, '.') ); //numele fișierului înainte de randomizare 

                        $FileType       = $_FILES['FileInput']['type']; //tipul fișierului
                        $FileSize       = $_FILES['FileInput']["size"]; //dimensiunea fișierului

                        $RandNumber     = rand(0, 9999999999); //Număr random pentru a face fiecare nume de fișier unic.
                        $uploaded_date  = date("Y-m-d H:i:s");

                        $NewFileName = preg_replace(array('/\s/', '/\.[\.]+/', '/[^\w_\.\-]/'), array('_', '.', ''), strtolower($NewFileName));
                        $NewFileName = $NewFileName.'_'.$RandNumber.$ImageExt;

                        //Redenumește și salvează fișierul încărcat în folderul destinație.
                        if(move_uploaded_file($_FILES['FileInput']["tmp_name"], $UploadDirectory . $NewFileName )){
                                    //viitor Insert SQL pentru a înregistra fișierele încărcate - tabel nou napp_applications_files
                                    log_me('nannie_app_upload: Încărcare cu succes #' . $app_uid);
                                    die('Succes! Fișier încărcat.');
                                    break;

                        }else{
                                    log_me('nannie_app_upload: Încărcare eșuată #' . $app_uid);
                                    die('eroare la încărcarea fișierului!');
                                    break;
                        }            

                        break;
                default:
                        log_me('nannie_app_upload: Fișier nesuportat #' . $app_uid);
                        die('Fișier nesuportat!'); //eroare pentru tipuri de fișiere nepermise
                        break;
        }

    }else{
        log_me('nannie_app_upload: Ceva nu a funcționat la încărcare! Este setat corect "upload_max_filesize"? #' . $app_uid);
        die('Ceva nu a funcționat la încărcare! Este setat corect "upload_max_filesize"?');
    }
}
0
Toate răspunsurile la întrebare 2
2

ajaxSubmit nu este o funcție de bază din jQuery.

Se pare că trebuie să incluzi un plugin jQuery (cum ar fi acesta), sau să rescrii funcția ta folosind o sintaxă precum aceasta, utilizând post() din jQuery

$.post(ajaxurl, data, function(response) {
    // funcția de răspuns
}

sau cu ajax() din jQuery

$.ajax({
    url: ajaxurl,
    context: data
});

Asigură-te că ai definit ajaxurl în partea de frontend - WordPress îl definește automat în Backend.

Apropo, folosirea post() este folosirea AJAX, deoarece trimiți cererea asincron de la browser la server și procesezi rezultatul ulterior. Aceasta este esența AJAX, chiar dacă funcția ta nu are un nume precum AJAX :)

26 sept. 2014 10:18:39
Comentarii

Ai atins exact problema - ajaxSubmit este din jQuery form. Am încercat să adaug plugin-ul js doar pe o pagină - doar pentru test, dar tot primesc eroarea că nu este o funcție. Am actualizat js-ul de mai sus pentru a reflecta modificările făcute până acum.

jharrell jharrell
28 sept. 2014 04:43:05

Se pare că o altă copie a jQuery mi-a dat de furcă... Am găsit tema vinovată și am rezolvat-o. Am încapsulat codul meu într-un scut: ( function($) {

} ) ( jQuery );

Nu mai am erori :-)

jharrell jharrell
28 sept. 2014 05:05:46
1

Trebuie să adaugi jquery.form.min.js pentru mine funcționează,

Sper să funcționeze și pentru tine.

20 mai 2015 13:50:36
Comentarii

Da, jQuery.form este necesar - asigură-te că verifici dacă alte instanțe jQuery nu suprascriu prescurtarea $.

( function($) {

} ) ( jQuery );

jharrell jharrell
20 mai 2015 17:02:07