Question

我正在尝试在四个jquery选项卡中的每一个中加载动态内容。每当用户单击选项卡时，我都会请求jquery ajax调用以获取该单击选项卡的内容。内容是一组带有一些脚本标签的手风琴。当我在chrome中执行console.log时，我可以看到所有脚本标记。但是，只要我将内容分配给标签内容，就像这样

首先我绑定标签如下

$(".tabs").tabs({
              activate: function (event, ui) {
                  var active = $('.tabs').tabs('option', 'active');
                  console.log(active);
                  $(".tabs-" + active).html('test content');

                  var tab_text = $(".tabs ul>li a").eq(active).html();
                  var GroupCode;
                  if (tab_text == "Excel 2003")
                      GroupCode = "2003";
                  else if (tab_text == "Excel 2007")
                      GroupCode = "2007";
                  else if (tab_text == "Excel 2010")
                      GroupCode = "2010";
                  else if (tab_text == "Excel 2013")
                      GroupCode = "2013";


                  var tab_content;
                  tab_content = GetMyData(GroupCode);
                  //console.log(tab_content);
                  $('.ui-tabs-panel').not('.ui-tabs-hide').html(tab_content);

              }
          });

当激活特定选项卡时，我调用了一个方法来通过jquery获取内容ajax GetMyData（GroupCode）

function GetMyData(groupCode) {
         groupCode = groupCode.replace("CGRO","");
          var _optionList;              

          $.ajax({
              type: "POST",
              url: "getcontent.aspx?cg=" + groupCode,
              data: {},
              async: false,
              dataType: "html",
              success: function (response) {

                  _optionList = response;
                  $(".accordion").accordion();
              },
              failure: function (response) {
                  alert(response.d);
              },
              error: function (jq, status, message) {
                  alert('A jQuery error has occurred. Status: ' + status + ' - Message: ' + message);
              }
          });

         // console.log(_optionList);
          return _optionList;
      }

这就是我将内容传递到有效标签

的行

 $('.ui-tabs-panel').not('.ui-tabs-hide').html(tab_content);

tab_content包含脚本选项卡，但在将其传递给.html后，我无法看到tab_content中的任何脚本标记。

我用谷歌搜索了几天，可以看到一个选项是innerHTML，但在我的情况下，我没有在标签上工作。我也试过.text，但是没有渲染html，只是用纯文本吐出内容。

如何从包含脚本标记的ajax调用中加载内容。

注意：我使用asp.net（VB）加载具有html和javascript的内容。提前谢谢。

Answer 1

尝试使用jquery $.parseHTML()，转义关闭script标记，例如，<\/script>

$(function() {
var str = "<script type=text/javascript>alert(123)<\/script>"
             + "<span>abc</span>";
var script = $.parseHTML(str, document, true);
    $("body").append($("<div>"));
    $("div").html(script);
});

jsfiddle http://jsfiddle.net/guest271314/uH42S/

Answer 2

问题是函数GetMyData进行了AJAX（异步 JavaScript和XML）调用。

tab_content = GetMyData(GroupCode); // <-- hidden AJAX call
//console.log(tab_content); // <-- will always be undefined
$('.ui-tabs-panel').not('.ui-tabs-hide').html(tab_content); // <-- appends undefined

tab_content始终未定义的原因是对GetMyData的调用会调度AJAX调用，然后继续执行activate函数。由于尚未调用AJAX调用，因此无法返回_optionList，因此tab_content变量仍未定义。

activate函数执行完毕后，进行AJAX调用并最终返回_optionList，但由于activate函数已完成执行，return无意义（并忽略）。

解决方案是在AJAX调用完成时传递对容器的引用或填充容器的回调：

function GetMyData(groupCode, container) { // passing reference to container
    $.ajax({
        // ... other options ....
        "success": function (response) {
            container.html(response);
            // _optionList = response; // <-- not needed unless you want to store the response somewhere, like in a data attribute.
            $(".accordion").accordion();
        },
        // ... other options ....
    });
}

// call like this

GetMyData(GroupCode, $('.ui-tabs-panel').not('.ui-tabs-hide'));

另一种选择是：

function GetMyData(groupCode, callback) { // passing callback
    $.ajax({
        // ... other options ....
        "success": function (response) {
            callback(response);
        },
        // ... other options ....
    });
}

// call like this

GetMyData(GroupCode, function (tab_content) {
    $('.ui-tabs-panel').not('.ui-tabs-hide').html(tab_content);
    $(".accordion").accordion();
});

修改

我刚刚看到您将async设置为false的位置，这几乎使我的答案无效。请按照以下代码帮助我们帮助您进行调试。

function GetMyData(groupCode) { var _optionList; groupCode = groupCode.replace('CGRO', ''); $.ajax({ "type": "POST", "url": "getcontent.aspx?cg=" + groupCode, "data": {}, "async": false, "dataType": "html", "success": function (response) { console.log(response); // <-- Add this line exactly here and post the log in your question. _optionList = response; $('.accordion').accordion(); }, "failure": function (response) { alert(response.d); }, "error": function (jq, status, message) { alert('A jQuery error has occurred. Status: ' + status + ' - Message: ' + message); } }); // console.log(_optionList); return _optionList; }

带有脚本标记的jquery选项卡中的动态内容

2 个答案: