Risoluzione di TypeError: ajaxSubmit() non è una funzione in WordPress
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?');
}
}
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 :)

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.
