WordPress und Ajax – Shortcode-Inhalt neu laden

Lesezeit: 7 Minuten

Benutzeravatar von ninagath
Ninagath

In einem benutzerdefinierten Plugin generiere ich eine demoConnectors Shortcode und initialisieren Sie seinen Inhalt. Dieser enthält PHP-Variablen in input of type select. Der Benutzer muss also die Parameter auswählen und die PHP-Variablen werden per Ajax aktualisiert. Abhängig von den gewählten Parametern wird der Inhalt des Shortcodes modifiziert.

Das Problem ist, dass ich nicht weiß, wie ich den Shortcode-Inhalt aktualisieren soll, nachdem Ajax ausgelöst wurde.

Hier ist mein 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;
    }
}

Und hier mein 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);
            }
        });
    } );
} );

BEARBEITUNGEN

Ich versuche, den Filter zu verwenden do_shortcode_tag Um den Inhalt des Shortcodes zu aktualisieren, schaffe ich es nicht, dass dies funktioniert. Es aktualisiert einfach nicht den Inhalt

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

  • Zuerst einmal diese Funktion setProjectChosen müssen den neuen Inhalt des Shortcodes wiedergeben, dies wird ihn an den Ajax-Aufruf zurücksenden, fügen Sie dort einen weiteren Parameter hinzu, um den Erfolg zu behandeln success: function(response){ // handle response here } und verwenden Sie das Response-Objekt, um Ihren neuen Inhalt anzuzeigen

    – Ali_k

    14. Juni 2019 um 15:34 Uhr

  • Vielen Dank für Ihre Antwort, ich verstehe nicht, wie ich diesen neuen Inhalt wiedergeben soll: so etwas wie echo $this->contentDemoConnecteurs(); ? scheint nicht zu funktionieren

    – Ninagath

    14. Juni 2019 um 15:40 Uhr


  • Funktioniert nicht alleine, Sie müssen es in Ihrem jQuery-Ajax-Aufruf zurückverarbeiten, da es nicht vollständig ist. Überprüfen Sie einige der Antworten hier: stackoverflow.com/questions/5004233/…

    – Ali_k

    14. Juni 2019 um 15:44 Uhr

  • ok danke für eure antworten, werde das mal ausprobieren

    – Ninagath

    14. Juni 2019 um 15:45 Uhr

  • @ninagath versuchen Sie es in der Ajax-URL, die den vollständig aktualisierten HTML-Code zurückgibt, und ersetzen Sie dann einfach den Inhalt des Containers. dh Shortcode-Container wird aufgerufen box Sie geben also das neue HTML für zurück box und mit Javascript das HTML komplett ersetzen.

    – Deckerz

    17. Juni 2019 um 10:33 Uhr

Ich würde einen Kommentar schreiben, aber mein derzeitiger Ruf lässt mich nur eine Antwort schreiben. Hier ist meine Lösung, um den Inhalt der AJAX-Ausgabe erneut zu drucken.

Fügen Sie in PHP ein Container-Div mit ID hinzu:

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

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

Ich hoffe, das ist, was Sie brauchen.

  • danke für deine Antwort, ich habe die Lösung vor ein paar Tagen gefunden, aber das war es, was ich brauchte

    – Ninagath

    20. Juni 2019 um 12:30 Uhr

Benutzeravatar von ninagath
Ninagath

Ich habe es endlich geschafft, ich war verwirrt darüber, was ich tun wollte …

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

1386780cookie-checkWordPress und Ajax – Shortcode-Inhalt neu laden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy