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