CODEWITHSUNDEEP
javascriptphpwordpress
J. Doe
J. Doe

Reputation: 483

WordPress Custom Plugin button onclick call php function

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

Upvotes: 1

Views: 10249

Answers (2)

J. Doe
J. Doe

Reputation: 483

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

Upvotes: 0

Max Jones
Max Jones

Reputation: 140

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.

Upvotes: 1

Related Questions