Risoluzione di TypeError: ajaxSubmit() non è una funzione in WordPress

25 set 2014, 19:36:56
Visualizzazioni: 15.2K
Voti: 0

Ho un plugin che funziona come un normale POST ma non come una richiesta POST AJAX.

Sto ricevendo un errore "not a function" in Firebug con questa funzione:

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

jQuery(this).ajaxSubmit(options);

Questa soluzione magica è venuta in soccorso: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/

( function($) {

} ) ( jQuery );

Questo è il file js che viene caricato con il mio plugin - viene effettivamente caricato nell'header:

jQuery(document).ready(function(){

        var options = { 
            target:         '#output',   // elemento target da aggiornare con la risposta del server
            beforeSubmit:   beforeSubmit,  // callback pre-invio
            success:        afterSuccess,  // callback post-invio 
            uploadProgress: OnProgress, //callback progresso upload
            resetForm:      true        // resetta il form dopo l'invio riuscito    
        }

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

                alert('Chiamata submit jQuery');            
                jQuery(this).ajaxSubmit(options);
                alert('Post submit jQuery'); 
                // ritorna sempre false per prevenire l'invio standard del browser e la navigazione
                alert('Ricevuto dal server: ' + response);
                return false;
    });


//funzione dopo il caricamento riuscito del file (quando arriva la risposta del server)
function afterSuccess(){

    alert('jQuery afterSuccess');
    jQuery('#submit-btn').show(); //mostra il pulsante submit
    jQuery('#loading-img').hide(); //nasconde il pulsante di caricamento
    jQuery('#progressbox').delay( 1000 ).fadeOut(); //nasconde la barra di progresso
}

//funzione per controllare la dimensione del file prima dell'invio
function beforeSubmit(){

    alert('jQuery beforeSubmit');
    jQuery('#submit-btn').hide(); //nasconde il pulsante submit
    jQuery('#loading-img').show(); //mostra il pulsante di caricamento
    jQuery("#output").html("");
}

//funzione barra di progresso
function OnProgress(event, position, total, percentComplete)
{
    //Barra di progresso
    alert('jQuery OnProgress');
    jQuery('#progressbox').show();
    jQuery('#statustxt').show();
    jQuery('#progressbar').width(percentComplete + '%') //aggiorna la percentuale completata
    jQuery('#statustxt').html(percentComplete + '%'); //aggiorna il testo di stato
    if(percentComplete>50)
        {
            jQuery('#statustxt').css('color','#000'); //cambia il colore del testo dopo il 50%
        }
}

});  

Ecco il Form generato da un child theme:

//Form di upload per 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 FORM di Upload!<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'); ?>  
        <!-- Aggiungi nuovo File -->  
        <span class="btn btn-file">Seleziona file: 
        <input name="FileInput" id="FileInput" type="file" /></span>                
        <button type="submit" class="btn" id="submit-btn">Carica</button>                         
    </form>

    <img src="<?php echo $plugins_url; ?>images/ajax-loader.gif" id="loading-img"
    style="display:none;" alt="Attendi"/>
    <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 
}

Ed ecco l'azione chiamata dall'invio del form. Se rimuovo il controllo per gli header AJAX, il file viene caricato ma vengo reindirizzato a una pagina vuota.

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 trovato");

    if (!isset( $_POST['nannie_upload_ajax_nonce']) || 
       !wp_verify_nonce($_POST['nannie_upload_ajax_nonce'], 'nannie_app_upload')){
       print 'Spiacente, il tuo nonce non è verificato.';
       log_me("nannie_app_upload: nonce non verificato");
       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 Non Chiamato #' . $app_uid);
        die();
    }

    //La dimensione del file è inferiore a quella consentita?
    if ($_FILES["FileInput"]["size"] > 5242880) {
        log_me('nannie_app_upload: La dimensione del file è troppo grande! #' . $app_uid);
        die("La dimensione del file è troppo grande!");
    }       

    $_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)) {
                //la cartella di destinazione non esiste
            if(!is_dir($UploadDirectory)) {
                mkdir($UploadDirectory);
                if (!@file_exists($UploadDirectory)) {

                    log_me('nannie_app_upload: Directory di upload mancante per il caricamento AJAX #' . $app_uid);
                    die("Assicurati che la directory di upload esista!");

                }
            }
        }

        //controllo lato server del tipo di file consentito
        switch(strtolower($_FILES['FileInput']['type']))
        {
                //tipi di file consentiti
                case 'image/png': //file png
                case 'image/gif': //file gif
                case 'image/jpeg': //file jpeg
                case 'application/pdf': //file PDF
                case 'application/msword': //file word
                case 'application/vnd.ms-excel': //file excel
                case 'application/x-zip-compressed': //file zip
                case 'text/plain': //file txt
                case 'text/html': //file html

                        //Il titolo del file verrà usato come nuovo nome
                        $FileName       = strtolower($_FILES['FileInput']['name']); //nome del file caricato
                        $ImageExt       = substr($FileName, strrpos($FileName, '.')); //estensione del file              
                        $NewFileName    = substr($FileName, 0, strrpos($FileName, '.') ); //nome del file prima del random 

                        $FileType       = $_FILES['FileInput']['type']; //tipo di file
                        $FileSize       = $_FILES['FileInput']["size"]; //dimensione del file

                        $RandNumber     = rand(0, 9999999999); //Numero random per rendere unico ogni filename
                        $uploaded_date  = date("Y-m-d H:i:s");

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

                        //Rinomina e salva il file caricato nella cartella di destinazione
                        if(move_uploaded_file($_FILES['FileInput']["tmp_name"], $UploadDirectory . $NewFileName )){
                                    //futuro Insert SQL per registrare i file caricati - nuova tabella napp_applications_files
                                    log_me('nannie_app_upload: Caricamento Riuscito #' . $app_uid);
                                    die('Successo! File Caricato.');
                                    break;

                        }else{
                                    log_me('nannie_app_upload: Caricamento Fallito #' . $app_uid);
                                    die('errore nel caricamento del File!');
                                    break;
                        }            

                        break;
                default:
                        log_me('nannie_app_upload: File Non Supportato #' . $app_uid);
                        die('File Non Supportato!'); //errore nell'imposizione dei tipi di file
                        break;
        }

    }else{
        log_me('nannie_app_upload: Qualcosa è andato storto con il caricamento! "upload_max_filesize" è impostato correttamente? #' . $app_uid);
        die('Qualcosa è andato storto con il caricamento! "upload_max_filesize" è impostato correttamente?');
    }
}
0
Tutte le risposte alla domanda 2
2

ajaxSubmit non è una funzione core di jQuery.

Sembra che tu debba includere un plugin jQuery (come questo), oppure riscrivere la tua funzione utilizzando una sintassi come questa, usando jQuery post()

$.post(ajaxurl, data, function(response) {
    // funzione di risposta
}

oppure con jQuery ajax()

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

Assicurati di avere ajaxurl definito nel frontend - WordPress lo definisce automaticamente nel Backend.

A proposito, usare post() è usare AJAX, visto che invii la tua richiesta in modo asincrono dal browser al server, e gestisci il risultato successivamente. Questo è il principio di AJAX, anche se la tua funzione non ha un nome che lo suggerisce :)

26 set 2014 10:18:39
Commenti

Hai centrato il punto - ajaxSubmit proviene da jQuery form. Ho provato ad aggiungere il plugin js alla singola pagina - solo per testare, ma continuo a ricevere l'errore "is not a function". Ho aggiornato il js sopra per riflettere i cambiamenti fatti finora.

jharrell jharrell
28 set 2014 04:43:05

Sembra che un'altra copia di jQuery mi stesse giocando brutti scherzi... Ho trovato il tema colpevole e l'ho eliminato. Ho protetto il mio codice con uno scudo: ( function($) {

} ) ( jQuery );

Niente più errori :-)

jharrell jharrell
28 set 2014 05:05:46
1

Devi aggiungere jquery.form.min.js per me ha funzionato,

Spero funzioni anche per te.

20 mag 2015 13:50:36
Commenti

Sì, jQuery.form è necessario - assicurati di controllare che altre istanze di jQuery non sovrascrivano la tua abbreviazione $.

( function($) {

} ) ( jQuery );

jharrell jharrell
20 mag 2015 17:02:07