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

Question

I am trying to load dynamic content in each of the four jquery tabs. Whenever user click on tab, I request a jquery ajax call to get the content for that clicked tab. The content is a set of accordions with some script tags in it. When I do a console.log in chrome, I can see all the script tags. But as soon as I assign the content to the tab content like this

First I bind the tabs like below

$(".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);

              }
          });

when the particular tab is activated, I called a method to get the content through 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;
      }

and that's the line where i'm passing content to the active tab

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

tab_content has everything include script tab, but after passing it to .html, i cant see any script tag that were in tab_content.

I googled for few days and can see that one option is innerHTML, but in my case that's not working on tabs. I also tried .text, but that didnt render the html, instead just spit out content in plain text.

How can I load content from ajax call that has script tags in it.

NOTE: I am using asp.net(VB) to load the content which has html and javascript. Thank you in advance.

Answer 1

Try utilizing jquery $.parseHTML() , escaping closing script tags , ieg, <\\/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

The problem is that function GetMyData makes an AJAX ( Asynchronous JavaScript And XML) call.

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

The reason tab_content will always be undefined is that the call to GetMyData schedules the AJAX call and then continues executing the activate function. Since the AJAX call has not been called yet, it cannot return _optionList so the tab_content variable remains undefined.

After the activate function has finished executing, the AJAX call is made and _optionList is eventually returned, but since the activate function has finished executing the return is pointless (and ignored).

The solution is to pass along a reference to your container, or a callback that will fill the container, when the AJAX call has finished:

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

Another option is:

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

EDIT

I just saw where you are setting async to false which pretty much invalidates my answer. Please follow the code below to help us help you debug this.

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