0

a plugin provides 3 html elements 2 text inputs and 1 button to save it enter image description here

The code in my plugin php file, to provide the elements:

<?php
   /*
   Plugin Name: WSN Plugin
   description: Maintain all the connections to LimeSurvey
   Version: 0.2
   Author: M.Huber
   Author URI: www
   License: GPL2
   */

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 );
}

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

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>';
}

add_shortcode('new_company', 'wpb_new_company');

so on the related wordpress page i added the shortcode [new_company] and as you can see on the screenshot above it is loaded corectly.

to catch the onclick function i use a plugin specific js file:

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

But after i click the button i do not just get back the echo string but the whole header of the page itself, see screenshot below: enter image description here

Why is it passing some parts of the header as well as my echo command? and how can i pass variables from the js file to the php file and back?

Additional Information: If i change the ajax post url to 

url: 'http://localhost/wp/wp-content/plugins/wsn-plugin/wsn-plugin.php',

i get the following error and was advised in other posts that you should not do it like that so how should i do it?

enter image description here

Fatal error: Uncaught Error: Call to undefined function add_action() in C:\xampp\htdocs\wp\wp-content\plugins\wsn-plugin\wsn-plugin.php:11 Stack trace: #0 {main} thrown in C:\xampp\htdocs\wp\wp-content\plugins\wsn-plugin\wsn-plugin.php on line 11
Improve this question

2 Answers 2

Reset to default
1

@kratze is correct for why it is just returning the entire site. To expand on his answer:

You need to send the ajax request to the appropriate url for all wordpress ajax calls. Add 

wp_localize_script( 'test', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

right below (but in the same function still)

wp_enqueue_script

Now you should be able to use ajax_object.ajax_url for the url in your js file.

But that's not alllllll. Now it will be sending the ajax request to the appropriate url but that url isn't going to know what to do with the request, because right now you are expecting your plugin file to run and catch the request with $_POST['action'] check.

Replace:

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

With:

add_action( 'wp_ajax_call_this', 'stckvrflw_my_action' );
add_action( 'wp_ajax_nopriv_call_this', 'stckvrflw_my_action' );
function stckvrflw_my_action() {
    echo 'Did we get here?';
    wp_die();
}
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thank you so much for helping. Unfortunately after the changes i get a ReferenceError -> ajax_object is not defined -> localhost/wp/wp-content/plugins/wsn-plugin/test.js?ver=1.0:8:14
Do i need to write it like url: ajax_object.ajax_url, or like url: 'ajax_object.ajax_url', ?
It should be url: ajax_object.ajax_url since it should be defined as a variable
move the wp_localize_script code inside your function ajax_test_enqueue_scripts() but after wp_enqueue_script and tell me what happens
Ok, I edited my original answer to reflect this. Wordpress is complicated because it is very powerful. Don't let anyone try to tell you it's just blogging software.
|
0

In your ajax call you are not calling any php script. You call the site http://localhost/wp/ and if there is no logic to handle your post, the response will just load the site.

Improve this answer

5 Comments

how can wp be so complicated? if i load my php file it is not okay and giving me errors related to my other post if i do it like that it isn't doing anything so what is the catch with this framework?!
Well it isn't a framework. Wordpress is a blogsystem. Where is your php script? Just change the path in the ajax call url to the path of your php script which shall handle the post.
I updated my question with the insight of changing the url and the error message i get. My php script is in the same folder as the plugin which is trying to interact with it
The error says that you are calling the function add_action(); in your php script, but your script has no access to the wordpress function. I would recommend you, that you add all your custom php to the wordpress functions.php inside your theme. And then you just call the correct path inside the ajax call. Something like this: /wp-content/themes/twentyfifteen/functions.php
Telling him to send his ajax request to functions.php is extremely wrong. Read codex.wordpress.org/AJAX_in_Plugins for an explanation on how ajax requests are handled in wordpress.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.