使用WordPress将JSON对象发送到jQuery标签的AJAX

我正在使用jQuery标签来编写使用WordPress的邮件系统。重点在于，当用户单击一个表示一个对话的选项卡时，将使用jQuery选项卡的功能自动执行AJAX调用。我编程的jQuery标签调用一个动作（我也编程）。该动作使用WordPress编程在PHP中，我可以通过localhost/mywebpage/wp-admin/admin-ajax.php？action = my_action调用它。使用WordPress将JSON对象发送到jQuery标签的AJAX

问题是：jQuery选项卡的默认功能需要PHP文件的原始输出（ajax操作）。这意味着我必须在PHP文件上编写HTML代码，以便将响应放在选项卡面板（ui.panel.html）上。不过，我认为这是效率低下，我想创建一个JSON对象使用在ui.ajaxSettings.dataFilter函数接收到的WordPres函数wp_send_json_success（jsonObject）。

当我将HTML发送到ui.ajaxSettings.dataFilter函数时，所有内容都正确显示在jQuery选项卡面板上。但是，当我发送json成功时，我可以在控制台上看到它，但我无法在jQuery选项卡面板上显示它。它出现一毫秒，然后消失。所以JSON对象正在接收，但由于某种原因无法显示。在jQuery选项卡面板上显示的唯一方法是通过我的PHP函数发送原始HTML。这里是一个非常简单的代码示例：

这是JS功能：

$(selector).tabs({ 
    beforeLoad: function(event, ui) { 
     ui.ajaxSettings.dataFilter = function(response) { 
      console.log(response); 
      ui.panel.html(response); 
    } 
});

这是PHP函数，做工不错：

<?php 
    echo 'Hello World!';

这是一个显示在PHP函数面板一毫秒然后消失。

<?php 
    wp_send_json_success('Hello World!);

在我看来，我觉得其他的东西正在执行和擦除什么我都显示在ui.panel.html但我不是在jQuery的标签，专家，所以如果有任何人在那里有更多经验那可以告诉我它发生了什么，我真的很感激它。

来源

2017-06-05 Máximo Obed Leza Correa

您是否检查http://api.jqueryui.com/tabs/#method-refresh？ – Twisty

我得到它的工作和修复是显而易见的，但我仍然不确定这是否是最好的方式来做到这一点。这就是我所做的：

var html = $('<div>').addClass('wrapper'); 

$(selector).tabs({ 
    beforeLoad: function(event, ui) { 
     ui.ajaxSettings.dataFilter = function(response) { 

      // Do whatever you want with the JSON object (obviously validations) 
      // In my case I want to create HTML elements with info from the response 
      var response_js_array = JSON.parse(response); 

      html.append($('<div>').text(response_js_array['message'])); 
    }, 
    load: function(event, ui) { 

     ui.panel.html(html); 

     // Do also whatever you want after the messages have been loaded. In my case, 
     // I scroll down to the last message 
     scrollDown(); // This is also a function I programmed 
    } 
});

来源

2017-06-05 19:05:40

使用WordPress将JSON对象发送到jQuery标签的AJAX

回答

相关问题