actions - How to run an ajax call in elementor editor

I am having a strange issue. I am not able to execute an ajax call while in Elementor edit mode.

add_action( 'wp_ajax_slug_configureheader', [ $this, 'rename_configureheader_callback' ] );
add_action( 'wp_ajax_nopriv_slug_configureheader', [ $this, 'rename_configureheader_callback' ] );

and I have a callback function like this

public function rename_configureheader_callback(){
      // there is code in in here
        // post id is from ajax
      update_post_meta($post_id, 'car_model', 157 );
      echo "Hello";
      die;
    }

even though I specified the callback function to be this

 //console.log(renameDataheader);
    $.ajax({
      url: slug.ajax_url,
      type: 'POST',
      data: {
        action: slug.ajaxaction, //slug_configureheader
        nonce: slug.nonce,
        idofpost: slug.pageid,
      },
      success: function(response) {
        alert("Success");
        console.log(response);
        // $('#output').append(response);
      },
    });

I get the alert-success but the callback function never executes. How Elementor prevents the callback function? I am stuck on this for the past two days pls help

I am having a strange issue. I am not able to execute an ajax call while in Elementor edit mode.

add_action( 'wp_ajax_slug_configureheader', [ $this, 'rename_configureheader_callback' ] );
add_action( 'wp_ajax_nopriv_slug_configureheader', [ $this, 'rename_configureheader_callback' ] );

and I have a callback function like this

public function rename_configureheader_callback(){
      // there is code in in here
        // post id is from ajax
      update_post_meta($post_id, 'car_model', 157 );
      echo "Hello";
      die;
    }

even though I specified the callback function to be this

 //console.log(renameDataheader);
    $.ajax({
      url: slug.ajax_url,
      type: 'POST',
      data: {
        action: slug.ajaxaction, //slug_configureheader
        nonce: slug.nonce,
        idofpost: slug.pageid,
      },
      success: function(response) {
        alert("Success");
        console.log(response);
        // $('#output').append(response);
      },
    });

I get the alert-success but the callback function never executes. How Elementor prevents the callback function? I am stuck on this for the past two days pls help

• ajax
• actions

Share Improve this question asked Nov 13, 2020 at 13:30 user145078user145078 3

• You need to contact Elementor support or ask in an Elementor community, 3rd party plugin dev support is off topic here. If this is indeed Elementor doing what you say it is then we cannot help you, but I am doubtful. How is your object being created and where? How are you testing that the AJAX handler ran? I'm assuming the AJAX handler is what you meant by the callback? – Tom J Nowell ♦ Commented Nov 13, 2020 at 13:34
• @TomJNowell Yes, I meant AJAX handler. Is there any way to check ajax handler ran. Problem is that console.log(response) does not have the echo "Hello". it prints a big HTML instead. – user145078 Commented Nov 13, 2020 at 13:42
• What is the big HTML? This implies your calling the wrong URL, but there is no code showing how you enqueued and localised those values to debug – Tom J Nowell ♦ Commented Nov 13, 2020 at 14:42

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

In my option, you cant use function of widgets class as ajax callback because widget class should be initiated again.