Minulla on laajennus, joka toimii vakiona POST-muodossa, mutta ei AJAX POST -pyynnönä.
Saan Firebugissa ei-funktion virheen tällä toiminnolla:
TypeError: jQuery (…). ajaxSubmit ei ole funktio
jQuery(this).ajaxSubmit(options);
Tämä taika tuli apuun: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/
( function($) { } ) ( jQuery );
Tämä on js-tiedosto, jonka se kiinnitetään laajennuksellani – se latautuu otsikkoon:
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% } } });
Tässä on aliteemasta muodostettu lomake:
//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 }
Ja tässä on toiminto, jota lomake kutsuu Lähetä. Jos poistan AJAX-otsikkojen tarkistuksen, se lähettää tiedoston ja ohjaa minut tyhjälle sivulle.
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?"); } }
Vastaa
Sinun on lisättävä jquery.form.min.js
se toimii minulle,
Toivottavasti se toimii sinulle.
Kommentit
- Kyllä, jQuery.form vaaditaan – muista tarkkailla muita jQuery-esiintymiä, jotka korvaavat $ shorthandisi. (function ($) {}) (jQuery);
vastaus
ajaxSubmit
ei ole ”ta core jQuery” -toiminto.
Vaikuttaa siltä, että joudut joko sisällyttämään jQuery-laajennuksen (kuten tämä ) , tai kirjoita toiminto uudelleen käyttääksesi tämän tyyppistä syntaksia käyttämällä jQuery post()
$.post(ajaxurl, data, function(response) { // responsefunction }
tai jQuery ajax()
$.ajax({ url: ajaxurl, context: data });
Varmista, että olet määrittänyt ajaxurl
käyttöliittymässä – WordPress määrittelee sen automaattisesti taustalla.
Muuten, post()
on AJAX: n käyttö, kun lähetät pyyntösi asynkronisesti selaimelta palvelimelle ja käsittelet tulosta jälkikäteen. AJAX on kyse, vaikka funktiollasi ei olisikaan nimeä kuin AJAX 🙂
Kommentit
- Naulasit sen – ajaxSubmit on jQuery-muodosta. Yritin lisätä js-laajennuksen yhdelle sivulle – vain testattavaksi, mutta ' m, että saan edelleen ei ole toiminto. Päivitin yllä olevat j: t vastaamaan tähänastisia muutoksia.
- Näyttää siltä, että toinen kopio jQuerystä soitti päälläni. Löysi loukkaavan teeman ja tappoi sen. Kääri koodini kilpeen: (function ($) {}) (jQuery); Ei enää virheitä 🙂