Kbcoder Kbcoder - 1 month ago 8
Javascript Question

Wordpress ajax and extra php scripts

I have a simple form I am building for my wordpress site and I cant seem to figure out what I am doing wrong. I am using ajax to call a separate php script from the generic function.php script(I called it wpplugin.php) to handle all my form data but I cant seem to figure out if my javascript file or the url for the ajax is not triggering.

So I have 3 files, I have /wpplugin.php and /upload.php with /code/upload.js.

To add the js file I use this code in wpplugin.php:

add_action( 'wp_enqueue_scripts', 'all_enqueue_scripts' );
function all_enqueue_scripts()
{
wp_enqueue_script( 'uploadjs', plugins_url( '/code/upload.js', __FILE__), array('jquery'), '1.0', true );
}


and my ajax from the js script is as follows:

$("#uploadform").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
arr = data;
}
});
}));


I include the js script in n html block with in wpplugin.php like so:

<script src="code/upload.js">


The feed back from wordpress is so limited I cant tell if its my ajax not triggering or js not being used. I have tested all the code in both xxamp and a generic hard coded html online site, it works.

Any advice is welcome.

Answer

The script loading issue is because you're using plugins_url() in your functions.php file.

From the documentation on plugins_url():

Retrieves the absolute URL to the plugins or mu-plugins directory (without the trailing slash) or, when using the $path argument, to a specific file under that directory.

Source: https://codex.wordpress.org/Function_Reference/plugins_url

Assuming your theme directory looks like this:

|- style.css
|- index.php
|- functions.php
|- code
    |- upload.js

What you want to do is edit your functions.php file and replace:

wp_enqueue_script( 'uploadjs', plugins_url( '/code/upload.js', __FILE__), array('jquery'), '1.0', true );

with

wp_enqueue_script( 'uploadjs', get_template_directory() . '/code/upload.js', array('jquery'), '1.0', true );

EDIT: About upload.php

WordPress already has a built-in system for a single ajax endpoint for every theme and plugin to use.

The endpoint address is the return value from admin_url( 'admin-ajax.php' ), which in practice typically works out to be mydomain.com/wp-admin/admin-ajax.php.

Since every theme and plugin are using the same endpoint, how do you distinguish your calls from everyone else?

There's a special property you send across called action. It's what lets WordPress know who is hitting the admin-ajax.php.

All the info on it is here: https://codex.wordpress.org/AJAX_in_Plugins

A quick sample of what it will look like is this:

JS

$("#uploadform").on('submit',(function(e) {
    e.preventDefault();
    $.ajax({
        url: "wp-admin/admin-ajax.php?action=akamaozu_do_frontend_upload", 
        type: "POST",       
        data: new FormData(this)
    });
}));

functions.php

add_action( 'wp_ajax_akamaozu_do_frontend_upload', 'handle_signed_in_uploads' );
add_action( 'wp_ajax_nopriv_akamaozu_do_frontend_upload', 'handle_signed_out_uploads' );