0

I have a plugin that works as a standard POST but not as an AJAX POST request.

I am getting a not a function error in Firebug with this function:

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

jQuery(this).ajaxSubmit(options);

This magic came to the rescue: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/

( function($) {

} ) ( jQuery );

This is the js file that it being enqueued with my plugin - it does load in the header:

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%
        }
}

});  

Here is the Form that is generated from a child theme:

//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" id="nannie_app_upload">
    <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" id="FileInput" type="file" /></span>                
        <button type="submit" class="btn" id="submit-btn">Upload</button>                         
    </form>

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

And here is the action that is called by the form submit. If I remove the check for AJAX headers it uploads the file and redirects me to a blank page.

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?');
    }
}
1

You have to add jquery.form.min.js it work for me ,

Hope it works for you.

  • 1
    Yes the jQuery.form is required - be sure to watch for other jQuery instances overwriting your $ shorthand. ( function($) { } ) ( jQuery ); – jharrell May 20 '15 at 14:02
2

ajaxSubmit isn't a core jQuery function.

It seems that you have to either include a jQuery Plugin (like this), or rewrite your function to use a syntax like this one, using jQuery post()

$.post(ajaxurl, data, function(response) {
    // responsefunction
}

or with the jQuery ajax()

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

Be sure that you have ajaxurl defined in the frontend - WordPress automatically defines it in the Backend.

By the way, using post() is using AJAX, as you send your Request asynchronously from the Browser to the Server, and handle the result afterwards. This is what AJAX is about, even if your function does not have a name like AJAX :)

  • You nailed it- ajaxSubmit is from jQuery form. I tried adding the js plugin to the one page - just to test but I'm still getting an is not a function. I Updated the js above to reflect the changes so far. – jharrell Sep 28 '14 at 1:43
  • It looks like another copy of jQuery was playing with my head... Found the offending theme and killed it. Wrapped my code in a shield: ( function($) { } ) ( jQuery ); No more errors :-) – jharrell Sep 28 '14 at 2:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.