Am un plugin care funcționează ca un POST standard, dar nu ca o cerere AJAX POST.
Am primit o eroare care nu este o funcție în Firebug cu această funcție:
TypeError: jQuery (…). ajaxSubmit nu este o funcție
jQuery(this).ajaxSubmit(options);
Această magie 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 pe care îl stoarce cu pluginul meu – se încarcă în antet:
jQuery(document).ready(function(){ var options = { target: "#output", // target element(s) to be updated with server response beforeSubmit: beforeSubmit, // pre-submit callback success: afterSuccess, // post-submit callback uploadProgress: OnProgress, //upload progress callback resetForm: true // reset the form after successful submit } jQuery("#nanny_app_upload").on("submit", function(e) { e.preventDefault(); alert("jQuery submit called"); jQuery(this).ajaxSubmit(options); alert("jQuery post submit"); // always return false to prevent standard browser submit and page navigation alert("Got this from the server: " + response); return false; }); //function after succesful file upload (when server response) function afterSuccess(){ alert("jQuery afterSuccess"); jQuery("#submit-btn").show(); //show submit button jQuery("#loading-img").hide(); //hide loading button jQuery("#progressbox").delay( 1000 ).fadeOut(); //hide progress bar } //function to check file size before uploading. function beforeSubmit(){ alert("jQuery beforeSubmit"); jQuery("#submit-btn").hide(); //hide submit button jQuery("#loading-img").show(); //show loading button jQuery("#output").html(""); } //progress bar function function OnProgress(event, position, total, percentComplete) { //Progress bar alert("jQuery OnProgress"); jQuery("#progressbox").show(); jQuery("#statustxt").show(); jQuery("#progressbar").width(percentComplete + "%") //update progressbar percent complete jQuery("#statustxt").html(percentComplete + "%"); //update status text if(percentComplete>50) { jQuery("#statustxt").css("color","#000"); //change status text to white after 50% } } });
Iată Formularul generat dintr-o temă copil:
//Nannie upload form 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> An Upload FORM!<br> <form action="<?php echo admin_url("admin-ajax.php"); ?>" method="post" enctype="multipart/form-data"> <br> <?php wp_nonce_field("nannie_app_upload","nannie_upload_ajax_nonce"); ?> <!-- Add new File --> <span class="btn btn-file">Select file: <input name="FileInput" type="file" /></span> <button type="submit" class="btn">Upload</button> </form> <img src="<?php echo $plugins_url; ?>images/ajax-loader.gif" style="display:none;" alt="Please Wait"/> <div style="display:none;"><div></div > <div>0%</div></div> <div></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 care este numită de formular Trimite. Dacă elimin verificarea antetelor AJAX, acesta încarcă fișierul și 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 found"); if (!isset( $_POST["nannie_upload_ajax_nonce"]) || !wp_verify_nonce($_POST["nannie_upload_ajax_nonce"], "nannie_app_upload")){ print "Sorry, your nonce did not verify."; log_me("nannie_app_upload: nonce did not verify"); 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 Not Called #" . $app_uid); die(); } //Is file size is less than allowed size. if ($_FILES["FileInput"]["size"] > 5242880) { log_me("nannie_app_upload: File size is too big! #" . $app_uid); die("File size is too big!"); } $_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)) { //destination folder does not exist if(!is_dir($UploadDirectory)) { mkdir($UploadDirectory); if (!@file_exists($UploadDirectory)) { log_me("nannie_app_upload: Upload directory missing for AJAX upload #" . $app_uid); die("Make sure Upload directory exist!"); } } } //allowed file type Server side check switch(strtolower($_FILES["FileInput"]["type"])) { //allowed file types case "image/png": //png file case "image/gif": //gif file case "image/jpeg": //jpeg file case "application/pdf": //PDF file case "application/msword": //ms word file case "application/vnd.ms-excel": //ms excel file case "application/x-zip-compressed": //zip file case "text/plain": //txt file case "text/html": //html file //File Title will be used as new File name $FileName = strtolower($_FILES["FileInput"]["name"]); //uploaded file name $ImageExt = substr($FileName, strrpos($FileName, ".")); //file extension $NewFileName = substr($FileName, 0, strrpos($FileName, ".") ); //file name before random $FileType = $_FILES["FileInput"]["type"]; //file type $FileSize = $_FILES["FileInput"]["size"]; //file size $RandNumber = rand(0, 9999999999); //Random number to make each filename unique. $uploaded_date = date("Y-m-d H:i:s"); $NewFileName = preg_replace(array("/\s/", "/\.[\.]+/", "/[^\w_\.\-]/"), array("_", ".", ""), strtolower($NewFileName)); $NewFileName = $NewFileName."_".$RandNumber.$ImageExt; //Rename and save uploded file to destination folder. if(move_uploaded_file($_FILES["FileInput"]["tmp_name"], $UploadDirectory . $NewFileName )){ //future SQL Insert to record the files uploaded - new table napp_applications_files log_me("nannie_app_upload: Success Upload #" . $app_uid); die("Success! File Uploaded."); break; }else{ log_me("nannie_app_upload: Failed Upload #" . $app_uid); die("error uploading File!"); break; } break; default: log_me("nannie_app_upload: Unsupported Upload #" . $app_uid); die("Unsupported File!"); //output error enforcing file types break; } }else{ log_me("nannie_app_upload: Something wrong with upload! Is "upload_max_filesize" set correctly? #" . $app_uid); die("Something wrong with upload! Is "upload_max_filesize" set correctly?"); } }
Răspunde
Trebuie să adaugi jquery.form.min.js
funcționează pentru mine,
Sper că funcționează pentru tine.
Comentarii
- Da, este necesar jQuery.form – asigurați-vă că urmăriți alte instanțe jQuery care vă suprascriu $ stenograma. (function ($) {}) (jQuery);
Răspuns
ajaxSubmit
nu este o funcție de bază jQuery.
Se pare că trebuie să includeți fie un plugin jQuery (cum ar fi acest ) sau rescrieți funcția pentru a utiliza o sintaxă ca aceasta, utilizând jQuery post()
$.post(ajaxurl, data, function(response) { // responsefunction }
sau cu jQuery ajax()
$.ajax({ url: ajaxurl, context: data });
Asigurați-vă că aveți ajaxurl
definit în frontend – WordPress îl definește automat în Backend.
Apropo, folosirea post()
este folosirea AJAX, deoarece trimiteți cererea dvs. asincron de la browser la server și gestionați rezultatul ulterior. Acesta este ceea ce AJAX este despre, chiar dacă funcția dvs. nu are un nume ca AJAX 🙂
Comentarii
- Ați pus-o în cuie- ajaxSubmit este din forma jQuery. Am încercat să adaug pluginul js pe o singură pagină – doar pentru a testa, dar ' încă nu primesc o funcție. Am actualizat js-ul de mai sus pentru a reflecta schimbările de până acum.
- Se pare că o altă copie a jQuery se juca cu capul meu … Am găsit tema jignitoare și am ucis-o. Am împachetat codul meu într-un scut: (funcție ($) {}) (jQuery); Gata cu erorile 🙂