WordPress Custom Plugin button onclick call php function

Question

My plugin shows 2 input fields and a button wherever you put the placeholder in WP. After clicking the button it calls a js function which should start a php function using AJAX but somehow i get the error message: "reference error myAjax is not defined"

wsn-plugin.php

function wpb_new_company(){
    echo '<input type="text" class="form-control" id="companyName" placeholder="Firmenname">';
    echo '<input type="text" class="form-control" id="companyYear" placeholder="Jahr">';
    echo '<button onclick="myAjax();" id="btnNewCompany" type="submit" class="btn btn-primary">Erstellen</button>';
}

script.js (which handles all the events)

function myAjax() {
    alert("myAjax gestartet");
      $.ajax({
           type: "POST",
           url: 'localhost/wp/wp-content/plugins/wsn-plugin/wsn-plugin.php',
           data:{action:'call_this'},
           success:function(html) {
             alert(html);
           }

      });
      alert("myAjax ausgeführt");
 }

and again wsn-plugin.php which should then run some function

if($_POST['action'] == 'call_this') {
    echo "i reached it";
}

Changed

function wpb_adding_scripts() {
wp_register_script('wsn_script', plugins_url('script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('wsn_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

and js script:

function myAjax() {
    alert("myAjax gestartet");
      $.ajax({
           type: "POST",
           url: '/wp/wp-content/plugins/wsn-plugin/wsn-plugin.php',
           data:{action:'call_this'},
           success:function(html) {
             alert(html);
           }

      });
      alert("myAjax ausgeführt");
 }

no chrome shows the error message: localhost says
fatal error uncaught error call to undefined function add_action() in wsn-plugin.php:16

Max Jones · Accepted Answer · 2018-05-15 01:02:29Z

1

It sounds like you did not load your javascript file from your plugin using wp_register_script() and wp_enqueue_script().

EDIT: There are other issues here but I ignored them since they were not the cause of the error you got. You will want to read https://codex.wordpress.org/AJAX_in_Plugins and pay special attention to the section "Separate JavaScript File". That should get you sending the data to the correct URL and being able to process it.

edited May 15, 2018 at 1:02

answered May 14, 2018 at 22:58

Max Jones

1407 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Max Jones Over a year ago

because you are calling your plugin directly in the ajax (big wordpress-no-no) the rest of the wordpress framework is not being loaded so add_action is not defined. The link in my edit should help.

J. Doe Over a year ago

mhpf, yeah i read that already 3 times and still don't get it. sadly there is now simple step-by-step explenation.

Max Jones Over a year ago

Well, the first thing to understand is Wordpress is a content management system with features that basically make it a php framework. To work properly all the core functionality needs to be loaded (in the correct order) for it to work. This is why you can't send a successful request directly to you plugin. You need to send the request to the ajaxurl. The section I told you to focus on explains how to surface that url to your javascript functions. I don't think I can help more without seeing all of your plugin code and that goes far beyond the scope of the original question asked here.

J. Doe Over a year ago

do i need to reference the backend ajax file in the url?

Max Jones Over a year ago

Wordpress is a big framework with a lot of moving parts. I know I always felt lost when reading the documentation when I first started with it, but it gets easier. The code in the link I added goes in your plugin, either in the main php file, a file loaded by the main php file, or in a js file that is enqueued by the main php file. As I said before you might want to open a new question and add your plugin's full code so it will be easier to tell what parts are missing or loaded incorrectly.

|

J. Doe · Accepted Answer · 2018-05-15 16:08:44Z

just for completion what i did to reach my goal was. I put some comments in front of the code lines. However I'm not certain if they are correct but at the moment they help at least me to understand it a little bit better.

    my plugin php file:

    //reference to the backend ajax framework   
    add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
    function ajax_test_enqueue_scripts() {
        wp_enqueue_script( 'test', plugins_url( '/test.js', __FILE__ ), array('jquery'), '1.0', true );
        wp_localize_script( 'test', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
    }

    // to reference the ajax call to this function
    add_action( 'wp_ajax_nopriv_call_this', 'new_company_variable_transfer' );
    function new_company_variable_transfer() {
        echo 'Did we get here?';
        wp_die();
    }

 result div
    function wpb_new_company(){
        echo '<input type="text" class="form-control" id="companyName" placeholder="Firmenname">';
        echo '<input type="text" class="form-control" id="companyYear" placeholder="Jahr">';
        echo '<button onclick="callAjax()" id="btnNewCompany" type="submit" class="btn btn-primary">Erstellen</button>';

        echo '<div id="result">Hier steht das resultat</div>';
    }
    //to be able to put it on any page with the shortcode [new_company]
    add_shortcode('new_company', 'wpb_new_company');

and the simple ajax call in the script file

    function callAjax(){
        $.ajax({
            type: "POST",
            url: ajax_object.ajax_url,
            data:{action:'call_this'},
            success:function(response) {
            alert(response);
            $("#result").html(response);
            }
        });
    }

And to show you the result visually the pictures of the steps

Unfortunately because of the stack overflow code correction i cannot post pictures here...

At the end you can see it changed the text to the variable we get from the php file

Collectives™ on Stack Overflow

WordPress Custom Plugin button onclick call php function

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related