WordPress and Ajax - reload shortcode content

Question

In a custom plugin, I generate a demoConnectors shortcode and initialize its content. This one contains PHP variables in input of type select. The user must therefore select the parameters and the PHP variables are updated via ajax. Depending on the selected parameters, the content of the shortcode is modified.

The problem is that I don't know how to update the shortcode content after the Ajax is triggered.

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_demoConnecteurs = new demoConnecteurs();
if (isset($inst_demoConnecteurs)){
}

class demoConnecteurs{   
    private $projects;
    private $versions;

    private $project_id;
    private $project_name;
    private $version_id;


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

        $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_setProjectChosen', array($this,'setProjectChosen'));
        add_action('wp_ajax_nopriv_setProjectChosen', array($this,'setProjectChosen'));
    }

    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( 'demoConnecteurs', array($this,'demoConnecteurs_shortcode') );
    }

    function demoConnecteurs_shortcode () {
        return $this->contentDemoConnecteurs();
    }

    public function setProjects(){
        $this->projects = getProjects();
    }

    public function setProjectChosen(){
        if (isset ($_POST['demo_projet_name']))$this->project_name = $_POST['demo_projet_name'];
        $this->project_id = getProjectIdFromName($this->mantisClient,  $_SESSION['username'], $_SESSION['password'], $this->project_name);

        $this->setVersions();
        echo $this->contentDemoConnecteurs();
        wp_die();
    }

    public function setVersions(){
        $this->versions = getVersionsOfProjectChosen($this->project_id);
    }

    function contentDemoConnecteurs(){
        $html = "";

        $html .= 'Choix du projet : ';        
        $html .= '<select id="projectChosen" name="project">';
        foreach($this->projects as $p) {
            $selected = ($p->id == $this->project_id) ? 'selected="selected"' : '';
            $html .= '<option value="' . $p->name .'" '. $selected . ' >' . $p->name . '</option>';
        }
        $html .= '</select><br>';

        $html .= 'Choix de la version : ';
        if (isset ($this->versions)){
            $html .= '<select id="versionChosen" name="version">';
            foreach($this->versions as $v) {
                $selected = ($v->id == $this->version_id) ? 'selected="selected"' : '';
                $html .= '<option value="' . $v->id .'" '. $selected . ' >' . $v->id . '</option>';
            }
            $html .= '</select>';
        }

        return $html;
    }
}

And here my jQuery code:

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

    $('#projectChosen').on('change', function () {
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                'action': 'setProjectChosen',
                'demo_projet_name': $('#projectChosen option:selected').val()
            },
            success: function (output) {
                //how can I update the content of my shortcode with my variable output 
            },
            error: function(errorThrown){
                console.log(errorThrown);
            }
        });
    } );
} );

EDITS

I'm trying to use the filter do_shortcode_tag to update the content of the shortcode, I don't manage to make this work.. It just does not update the content

public function setProjectChosen(){
        if (isset ($_POST['demo_projet_name']))$this->project_name = $_POST['demo_projet_name'];
        $this->project_id = getProjectIdFromName($this->mantisClient,  $_SESSION['username'], $_SESSION['password'], $this->project_name);

        $this->setVersions();

        apply_filters( 'do_shortcode_tag', array($this, 'contentDemoConnecteurs'), 'demoConnecteurs',10,3 );

        wp_die();
    }

Answer 1

I would wirte a comment, but my current reputation only lets me to write an answer. Here id my solution to reprint the content of the AJAX output.

On PHP, add a container div with ID:

function contentDemoConnecteurs(){
    $html = '<div id="projectSelector">';

    $html .= 'Choix du projet : ';        
    $html .= '<select id="projectChosen" name="project">';
    foreach($this->projects as $p) {
        $selected = ($p->id == $this->project_id) ? 'selected="selected"' : '';
        $html .= '<option value="' . $p->name .'" '. $selected . ' >' . $p->name . '</option>';
    }
    $html .= '</select><br>';

    $html .= 'Choix de la version : ';
    if (isset ($this->versions)){
        $html .= '<select id="versionChosen" name="version">';
        foreach($this->versions as $v) {
            $selected = ($v->id == $this->version_id) ? 'selected="selected"' : '';
            $html .= '<option value="' . $v->id .'" '. $selected . ' >' . $v->id . '</option>';
        }
        $html .= '</select>';
    }
    $html .= '</div>';
    return $html;
}

On JQuery:

jQuery(document).ready(function($) {
    $('#projectChosen').on('change', function () {
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                'action': 'setProjectChosen',
                'demo_projet_name': $('#projectChosen option:selected').val()
            },
            success: function (output) {
                $( "div#projectSelector" ).replaceWith(output);
            },
            error: function(errorThrown){
                console.log(errorThrown);
            }
        });
    } );
} );

I hope that's what you need.

Answer 2

I finally made it, I got confused about what I wanted to do...

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

$inst_demoConnecteurs = new demoConnecteurs();
if (isset($inst_demoConnecteurs)){
}

class demoConnecteurs{   
    private $projects;
    private $versions;

    private $project_id;
    private $project_name;
    private $version_id;


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

        $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_setProjectChosen', array($this,'setProjectChosen'));
        add_action('wp_ajax_nopriv_setProjectChosen', array($this,'setProjectChosen'));
    }

    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( 'demoConnecteurs', array($this,'demoConnecteurs_shortcode') );
    }

    function demoConnecteurs_shortcode () {
        return $this->contentDemoConnecteurs();
    }

    public function setProjects(){
        $this->projects = getProjects();
    }

    public function setProjectChosen(){
        if (isset ($_POST['demo_projet_name']))$this->project_name = $_POST['demo_projet_name'];
        $this->project_id = getProjectIdFromName($this->mantisClient,  $_SESSION['username'], $_SESSION['password'], $this->project_name);

        $this->setVersions();
        echo $this->contentDemoConnecteurs();
        wp_die();
    }

    public function setVersions(){
        $this->versions = getVersionsOfProjectChosen($this->project_id);
    }

    function contentDemoConnecteurs(){
        $html = '<div id="contentDemoConnecteurs">';

        $html .= 'Choix du projet : ';        
        $html .= '<select id="projectChosen" name="project">';
        foreach($this->projects as $p) {
            $selected = ($p->id == $this->project_id) ? 'selected="selected"' : '';
            $html .= '<option value="' . $p->name .'" '. $selected . ' >' . $p->name . '</option>';
        }
        $html .= '</select><br>';

        $html .= 'Choix de la version : ';
        if (isset ($this->versions)){
            $html .= '<select id="versionChosen" name="version">';
            foreach($this->versions as $v) {
                $selected = ($v->id == $this->version_id) ? 'selected="selected"' : '';
                $html .= '<option value="' . $v->id .'" '. $selected . ' >' . $v->id . '</option>';
            }
            $html .= '</select>';
        }
        $html .= '</div>';
        return $html;
    }
}

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

    $('#projectChosen').on('change', function () {
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                'action': 'setProjectChosen',
                'demo_projet_name': $('#projectChosen option:selected').val()
            },
            success: function (output) {
                $('#contentDemoConnecteurs').replaceWith(output);
            },
            error: function(errorThrown){
                console.log(errorThrown);
            }
        });
    } );
} );