php - Why my Ajax events are no longer detected after dynamic change of shortcode content

I have two input select (dropdown) in the content of my shortcode. The first is created when initializing the shortcode content, while the second is created when the user chooses the value of the first dropdown. For this purpose, the second one is created dynamically with an Ajax handle. The choice of the second entry must display some corresponding data.

The first dropdown works well: it displays the second dropdown with its values. The problem occurs when I want to choose the value of the second dropdown. I use the same jQuery event (element.on('change' ...) and it never goes off. It's exactly the same as the first one, but it doesn't work. Could someone please explain to me why?

Here is my PHP code:

<?php 
/**
 *   Plugin Name: demoConnecteurs
 *   Description: Plugin de démo des connecteurs Jenkins et Mantis
**/
require_once(file_with_external_fonctions.php);

$inst_demo = new demo();
if (isset($inst_demo)){
}

class demo{   
    private $dataFirstDropdown;
    private $dataSecondDropdown;
    private $dataDependingSecondDropdown;


    function __construct(){
        $this->setDataFirstDropdown();

        $this->initAjaxActions();

        add_action('admin_enqueue_scripts', array($this,'demo_scripts'));
        add_action('wp_enqueue_scripts', array($this,'demo_scripts'));


        $this->init();
    }

    function initAjaxActions(){
        add_action('wp_ajax_setChoiceFirstDropdown', array($this,'setChoiceFirstDropdown'));
        add_action('wp_ajax_nopriv_setChoiceFirstDropdown', array($this,'setChoiceFirstDropdown'));        
        add_action('wp_ajax_setChoiceSecondDropdown', array($this,'setChoiceSecondDropdown'));
        add_action('wp_ajax_nopriv_setChoiceSecondDropdown', array($this,'setChoiceSecondDropdown'));
    }

    function demo_scripts(){
        wp_register_script( 'ajaxHandle', plugins_url() . '/DemoConnecteurs/buttons_ajax.js');
        wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

        wp_enqueue_script( 'ajaxHandle');
    }

    function init(){
        add_shortcode( 'demo', array($this,'demo_shortcode') );
    }

    function demo_shortcode () {
        return $this->contentCore();
    }

    public function setDataFirstDropdown(){
        $this->dataFirstDropdown = getDataFirstDropdown(); //external function
    }

   public function setDataSecondDropdown(){
        $this->dataSecondDropdown = getDataSecondDropdown($this->dataFirstDropdown); //external function
    }

   public function setDataDependingSecondDropdown(){
        $this->dataResultsOfSecondDropdown = getDataDependingSecondDropdown($this->dataSecondDropdown);
    }

    public function setChoiceFirstDropdown(){
        if (isset ($_POST['demo_data_first_dropdown']))$this->dataFirstDropdown = $_POST['demo_data_first_dropdown'];

        $this->setDataSecondDropdown();
        echo $this->contentSecondDropdown();
        wp_die();
    }

    public function setChoiceSecondDropdown(){
        if (isset ($_POST['demo_data_second_dropdown']))$this->dataDependingSecondDropdown = $_POST['demo_data_second_dropdown'];

        $this->setDataDependingSecondDropdown();
        echo $this->contentDependingSecondDropdown();
        wp_die();
    }

    function contentCore(){
        $html = "";

        $html .= '<div id="firstDropdown" : ';        
        $html .= '<select id="selectFirstDropdown">';
        foreach($this->dataFirstDropdown as $f) {
           //working
        }
        $html .= '</select></div>';

        $html .= '<div id="secondDropdown"></div>';

        $html .= '<div id="dependingSecondDropdown"></div>';

        return $html;
    }

    public function contentSecondDropdown(){
        $html = '<select id="selectSecondDropdown">';
        foreach($this->dataSecondDropdown as $s) {
           //working
        }
        $html .= '</select></div>';
        return $html;
    }

    public function contentDependingSecondDropdown(){
        $this->dataDependingSecondDropdown;
        return $html;
    }
}

and here my jQuery functions with ajax handlers:

jQuery(document).ready(function($) {

    $('#firstDropdown').on('change', function (e) {
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                'action': 'setChoiceFirstDropdown',
                'demo_projet_name': $('#firstDropdown option:selected').val()
            },
            success: function (output) {
                $('#secondDropdown').html(output);
            }
        });
    } );

    $('#secondDropdown').on('change', function (e) {
        console.log('not logged...');
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                'action': 'setChoiceSecondDropdown',
                'demo_version_id': $('#secondDropdown option:selected').val()
            },
            success: function (output) {
                console.log(output);
                $('#dependingSecondDropdown').html(output);
            }
        });
    } );    
} );

Here is my PHP code:

<?php 
/**
 *   Plugin Name: demoConnecteurs
 *   Description: Plugin de démo des connecteurs Jenkins et Mantis
**/
require_once(file_with_external_fonctions.php);

$inst_demo = new demo();
if (isset($inst_demo)){
}

class demo{   
    private $dataFirstDropdown;
    private $dataSecondDropdown;
    private $dataDependingSecondDropdown;


    function __construct(){
        $this->setDataFirstDropdown();

        $this->initAjaxActions();

        add_action('admin_enqueue_scripts', array($this,'demo_scripts'));
        add_action('wp_enqueue_scripts', array($this,'demo_scripts'));


        $this->init();
    }

    function initAjaxActions(){
        add_action('wp_ajax_setChoiceFirstDropdown', array($this,'setChoiceFirstDropdown'));
        add_action('wp_ajax_nopriv_setChoiceFirstDropdown', array($this,'setChoiceFirstDropdown'));        
        add_action('wp_ajax_setChoiceSecondDropdown', array($this,'setChoiceSecondDropdown'));
        add_action('wp_ajax_nopriv_setChoiceSecondDropdown', array($this,'setChoiceSecondDropdown'));
    }

    function demo_scripts(){
        wp_register_script( 'ajaxHandle', plugins_url() . '/DemoConnecteurs/buttons_ajax.js');
        wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

        wp_enqueue_script( 'ajaxHandle');
    }

    function init(){
        add_shortcode( 'demo', array($this,'demo_shortcode') );
    }

    function demo_shortcode () {
        return $this->contentCore();
    }

    public function setDataFirstDropdown(){
        $this->dataFirstDropdown = getDataFirstDropdown(); //external function
    }

   public function setDataSecondDropdown(){
        $this->dataSecondDropdown = getDataSecondDropdown($this->dataFirstDropdown); //external function
    }

   public function setDataDependingSecondDropdown(){
        $this->dataResultsOfSecondDropdown = getDataDependingSecondDropdown($this->dataSecondDropdown);
    }

    public function setChoiceFirstDropdown(){
        if (isset ($_POST['demo_data_first_dropdown']))$this->dataFirstDropdown = $_POST['demo_data_first_dropdown'];

        $this->setDataSecondDropdown();
        echo $this->contentSecondDropdown();
        wp_die();
    }

    public function setChoiceSecondDropdown(){
        if (isset ($_POST['demo_data_second_dropdown']))$this->dataDependingSecondDropdown = $_POST['demo_data_second_dropdown'];

        $this->setDataDependingSecondDropdown();
        echo $this->contentDependingSecondDropdown();
        wp_die();
    }

    function contentCore(){
        $html = "";

        $html .= '<div id="firstDropdown" : ';        
        $html .= '<select id="selectFirstDropdown">';
        foreach($this->dataFirstDropdown as $f) {
           //working
        }
        $html .= '</select></div>';

        $html .= '<div id="secondDropdown"></div>';

        $html .= '<div id="dependingSecondDropdown"></div>';

        return $html;
    }

    public function contentSecondDropdown(){
        $html = '<select id="selectSecondDropdown">';
        foreach($this->dataSecondDropdown as $s) {
           //working
        }
        $html .= '</select></div>';
        return $html;
    }

    public function contentDependingSecondDropdown(){
        $this->dataDependingSecondDropdown;
        return $html;
    }
}

and here my jQuery functions with ajax handlers:

jQuery(document).ready(function($) {

    $('#firstDropdown').on('change', function (e) {
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                'action': 'setChoiceFirstDropdown',
                'demo_projet_name': $('#firstDropdown option:selected').val()
            },
            success: function (output) {
                $('#secondDropdown').html(output);
            }
        });
    } );

    $('#secondDropdown').on('change', function (e) {
        console.log('not logged...');
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                'action': 'setChoiceSecondDropdown',
                'demo_version_id': $('#secondDropdown option:selected').val()
            },
            success: function (output) {
                console.log(output);
                $('#dependingSecondDropdown').html(output);
            }
        });
    } );    
} );

Share Improve this question edited Jun 20, 2019 at 12:44 asked Jun 17, 2019 at 13:22 Melinsuna 1135 bronze badges

None of your action or function names match. On #firstDropdown the action you're sending is setChoiceFirstDropdown, but there's no hook for wp_ajax_setChoiceFirstDropdown. You have hooked wp_ajax_actionFirstDropdown, but then the callback function for it is array($this,'actionFirstDropdown'), which doesn't exist. – Jacob Peattie Commented Jun 18, 2019 at 1:22
you're right, I made a mistake while copy/paste and change the name of my variables – Melinsuna Commented Jun 20, 2019 at 12:42

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

I found the solution, I had to do the right ajax actions... For the second dropdown, I had to first detect the click on the statically created div then detect the change on the dynamically created dropdown.

Here the correct code:

<?php 
/**
 *   Plugin Name: demoConnecteurs
 *   Description: Plugin de démo des connecteurs Jenkins et Mantis
**/
require_once(file_with_external_fonctions.php);

$inst_demo = new demo();
if (isset($inst_demo)){
}

class demo{   
    private $dataFirstDropdown;
    private $dataSecondDropdown;
    private $dataDependingSecondDropdown;


    function __construct(){
        $this->setDataFirstDropdown();

        $this->initAjaxActions();

        add_action('admin_enqueue_scripts', array($this,'demo_scripts'));
        add_action('wp_enqueue_scripts', array($this,'demo_scripts'));


        $this->init();
    }

    function initAjaxActions(){
        add_action('wp_ajax_setChoiceFirstDropdown', array($this,'setChoiceFirstDropdown'));
        add_action('wp_ajax_nopriv_setChoiceFirstDropdown', array($this,'setChoiceFirstDropdown'));        
        add_action('wp_ajax_setChoiceSecondDropdown', array($this,'setChoiceSecondDropdown'));
        add_action('wp_ajax_nopriv_setChoiceSecondDropdown', array($this,'setChoiceSecondDropdown'));
    }

    function demo_scripts(){
        wp_register_script( 'ajaxHandle', plugins_url() . '/DemoConnecteurs/buttons_ajax.js');
        wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

        wp_enqueue_script( 'ajaxHandle');
    }

    function init(){
        add_shortcode( 'demo', array($this,'demo_shortcode') );
    }

    function demo_shortcode () {
        return $this->contentCore();
    }

    public function setDataFirstDropdown(){
        $this->dataFirstDropdown = getDataFirstDropdown(); //external function
    }

   public function setDataSecondDropdown(){
        $this->dataSecondDropdown = getDataSecondDropdown($this->dataFirstDropdown); //external function
    }

   public function setDataDependingSecondDropdown(){
        $this->dataResultsOfSecondDropdown = getDataDependingSecondDropdown($this->dataSecondDropdown);
    }

    public function setChoiceFirstDropdown(){
        if (isset ($_POST['demo_data_first_dropdown']))$this->dataFirstDropdown = $_POST['demo_data_first_dropdown'];

        $this->setDataSecondDropdown();
        echo $this->contentSecondDropdown();
        wp_die();
    }

    public function setChoiceSecondDropdown(){
        if (isset ($_POST['demo_data_second_dropdown']))$this->dataDependingSecondDropdown = $_POST['demo_data_second_dropdown'];

        $this->setDataDependingSecondDropdown();
        echo $this->contentDependingSecondDropdown();
        wp_die();
    }

    function contentCore(){
        $html = "";

        $html .= '<div id="firstDropdown" : ';        
        $html .= '<select id="selectFirstDropdown">';
        foreach($this->dataFirstDropdown as $f) {
           //working
        }
        $html .= '</select></div>';

        $html .= '<div id="secondDropdown"></div>';

        $html .= '<div id="dependingSecondDropdown"></div>';

        return $html;
    }

    public function contentSecondDropdown(){
        $html = '<select id="selectSecondDropdown">';
        foreach($this->dataSecondDropdown as $s) {
           //working
        }
        $html .= '</select></div>';
        return $html;
    }

    public function contentDependingSecondDropdown(){
        $this->dataDependingSecondDropdown;
        return $html;
    }
}

jQuery(document).ready(function($) {

    $('#selectFirstDropdown').on('change', function (e) {
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                'action': 'setChoiceFirstDropdown',
                'demo_projet_name': $('#firstDropdown option:selected').val()
            },
            success: function (output) {
                $('#secondDropdown').html(output);
            }
        });
    } );

    $('#secondDropdown').on('click', function (e) {
        $('#selectSecondDropdown').on('click', function (e) {
                jQuery.ajax({
                type: "POST",
                url: ajax_object.ajaxurl,
                data: {
                    'action': 'setChoiceSecondDropdown',
                    'demo_version_id': $('#secondDropdown option:selected').val()
                },
                success: function (output) {
                    console.log(output);
                    $('#dependingSecondDropdown').html(output);
                }
            } );
        } );
    } );    
} );

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

php - Why my Ajax events are no longer detected after dynamic change of shortcode content

1 Answer 1

与本文相关的文章

评论列表(0)