WordPress and Ajax - reload shortcode content
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.
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);
}
});
} );
} );