WordPress 和 Ajax - 重新加载短代码内容

Posted 2023-05-08

技术标签:

【中文标题】WordPress 和 Ajax - 重新加载短代码内容【英文标题】：WordPress and Ajax - reload shortcode content 【发布时间】：2019-10-29 06:25:14 【问题描述】：

在自定义插件中，我生成一个demoConnectors 短代码并初始化其内容。这个包含input of type select 中的 php 变量。因此，用户必须选择参数并且 PHP 变量通过 ajax 进行更新。根据所选参数，修改简码的内容。

问题是我不知道在触发 Ajax 后如何更新简码内容。

这是我的 PHP 代码：

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

这里是我的 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) 
                //how can I update the content of my shortcode with my variable output 
            ,
            error: function(errorThrown)
                console.log(errorThrown);
            
        );
     );
 );

编辑

我正在尝试使用过滤器do_shortcode_tag 来更新简码的内容，但我无法做到这一点.. 它只是不更新内容

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

【问题讨论】：

首先这个函数setProjectChosen需要回显短代码的新内容，这会将它发送回ajax调用，在那里添加另一个参数来处理成功success: function(response) // handle response here 并使用响应对象以显示您的新内容感谢您的回答，我不明白应该如何回应这个新内容：像 echo $this->contentDemoConnecteurs(); 之类的东西？似乎不起作用不能单独工作，你需要在你的 jQuery ajax 调用中处理它，因为它不完整。在这里查看一些答案：***.com/questions/5004233/… 好的，谢谢你的回答，去试试 @ninagath 在 ajax url 中尝试返回完整更新的 HTML，然后简单地替换容器的内容。即短代码容器称为box，因此您返回box 的新html，并使用javascript 完全替换HTML。 【参考方案1】：

我会写评论，但我目前的声誉只能让我写一个答案。这是我重新打印 AJAX 输出内容的解决方案。

在 PHP 上，添加一个带有 ID 的容器 div：

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;

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

我希望这就是你所需要的。

【讨论】：

感谢您的回答，我前几天找到了解决方案，但这正是我需要的【参考方案2】：

我终于成功了，我对自己想做的事情感到困惑......

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

【讨论】：

以上是关于WordPress 和 Ajax - 重新加载短代码内容的主要内容，如果未能解决你的问题，请参考以下文章

简单的 Wordpress AJAX 分页

Wordpress + Gravity Forms Ajax + Swup JS

Wordpress 无法通过 ajax 请求加载正确的语言 mo 文件

如何使用 Ajax onclick 加载 Wordpress Post

使用 AJAX 将 Wordpress 帖子内容加载到 DIV

AJAX 为 WordPress 帖子加载更多内容