3

I have a very simple plugin with a javascript file and a PHP file. I want to call the PHP file from my javascript code and get the output. The javascript functions is something like the following:

function img_upload(){

        var ajax = new XMLHttpRequest();           
        ajax.open('GET', 'http://My_Domain_Name.com/wp-content/plugins/My_Plugin/auth.php', false);
        ajax.send();

    if (ajax.status === 200) {

      console.log(ajax.responseText);

    }

and the PHP file which returns the results:

<?php
$token=Get_Token();
echo $token;
function Get_Token()
{
   //Do some stuff
   return $token;
}
?>

both files (auth.php and myjs.js) are in the root directory of the plugin.

/home/My_Username/public_html/wp-content/plugins/My_Plugin

If I use the domain name I can call the php file in ajax.open() and get the results, but I know this is not the right way to do that. How can I call the php file inside my javascrip code via ajax.open('path_to_php') in Wordpress properly without indicating the domain name?

1

Here's an example:

Use this sample JavaScript code:

jQuery(document).on('click', '.some-element', function(e){
    var ipc = jQuery(this).data('collection-id');
    jQuery('.some-other-element').show();

    jQuery.ajax({
        method: 'post',
        url: ipAjaxVar.ajaxurl,
        data: {
            collection_id: ipc,
            action: 'my_function',
        }
    }).done(function(msg) {
        // Do something when done
    });

    e.preventDefault();
});

PHP (include the function in your plugin, do not use a separate file):

// Include the JavaScript above in your plugin
wp_enqueue_script('main', plugins_url('js/jquery.main.js', __FILE__), array('jquery'), '', true);

wp_localize_script('main', 'ipAjaxVar', array(
    'ajaxurl' => admin_url('admin-ajax.php')
));

add_action('wp_ajax_my_function', 'my_function');

UPDATE:

Add the PHP code to your main plugin file. Create a JavaScript file - js/jquery.main.js - and add the code above. That should do the trick.

  • May you please describe your codes a little more? I am newbie to plugins world. I need just a simple code. Where should I add wp_enqueue_script, wp_localize_script? – Sinai Aug 1 '18 at 15:42
  • I have updated my answer. Add the PHP code to your main plugin file. Create a JavaScript file - js/jquery.main.js - and add the code above. That should do the trick. – Ciprian Aug 1 '18 at 16:27
-2

Use plugins_url() to get the location of site/wp-content/plugins:

ajax.open('GET', '<?php echo plugins_url(); ?>/My_Plugin/auth.php', false);

This will put the following HTML code in:

ajax.open('GET', 'http://my.domain.com/wp-content/plugins/My_Plugin/auth.php', false);

If your file is a full JavaScript file and not part of a template, you can make your JavaScript file in to a PHP file like so:

<?php
header('Content-Type: application/javascript'); //mark this PHP file as a JS file
?>
var pluginUrl = '<?php echo plugins_url(); ?>';

ajax.open('GET', pluginUrl + '/My_Plugin/auth.php', false);
//.....

Save this with the name image_upload.js.php (or whatever you are naming it) and then just include it normally:

wp_enqueue_script('image_upload', plugins_url() . '/My_Plugin/image_upload.js.php');
  • As described in the question, the JavaScript is in a .js file. They can’t use PHP functions there. – Jacob Peattie Aug 1 '18 at 15:05
  • Please see my edit. You can inject PHP in to a JS file just fine so long as it is saved as a PHP file and included as a JS file. – Adam Mellen Aug 1 '18 at 15:06
  • I don't want to change the structure of my files. I mean I don't want to put javascipts in php file. I think I should somehow use admin-ajax.php for this purpose but I don't know how to do that? – Sinai Aug 1 '18 at 15:39
  • See my answer above. – Ciprian Aug 1 '18 at 16:27

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.