javascript - JqG​​rid 不通过移动选项卡加载

Question

这是我的选项卡代码:

  <ul class="nav nav-tabs" role="tablist" id="myTab">
  <li class="active"><a href="#Realted Articles" role="tab" data-toggle="tab">Realted Articles</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="Realted Articles">
      <div class="padding-all">
<table id="TABLE"></table>  
<div id="PAGER"></div> 
</div>
  </div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

这是它的输出:

这是Ajax 调用函数:

function TabData(data) {
    if (data == '#Realted Articles') {
      $('#myTab a:first').tab('show');
        $.ajax({
            type: "POST",
            url: "../Downloads.aspx/GetRelatedArticles",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            //async: false,
            success: function (response) {
                debugger;
                var item = response.d;
                if (item != null && item != "" && typeof (item) != 'undefined') {

                    $("#TABLE").jqGrid({
                        data: JSON.parse(item),
                        datatype: 'local',
                        colNames: ['Description', 'Id'],
                        colModel: [
                        { name: 'Description', index: 'Description', width: 900, align: 'left', stype: 'text', editable: false },
                        { name: 'Id', index: 'Id', width: 50, align: 'left', stype: 'text', editable: false }
                        ],
                        rowNum: 5,
                        height: 'auto',
                        altRows: true,
                        hoverrows: true,
                        rowList: [5, 10, 20],
                        pager: '#PAGER',
                        sortname: 'Id',
                        sortorder: 'asc',
                        caption: "Important Articles",
                        viewrecords: true,
                        loadonce: true,
                        gridview: true,
                        width: 950,
                        loadError: function (xhr) {
                            alert("The Status code:" + xhr.status + " Message:" + xhr.statusText);//Getting reponse 200 ok
                        }
                    });
                }
                else {
                    var result = '<tr align="left"><td>' + "No Record" + '</td></tr>';
                    $('#TABLE').empty().append(result);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("error");
            }
        });
    }
    }

这是我的文档就绪函数:

$(document).ready(function () {
    TabData("#Realted Articles");
    $('#myTab a').click(function (e) {
            var temp = $(this)[0].hash;       
            TabData(temp);    
        $(this).tab('show');
    });
});

当我更改选项卡，然后单击返回相关文章选项卡时，输出为:

我调试了代码，ajax 调用的响应是100% 正常，它得到了所需的数据，但是为什么Jqgrid 没有显示？请帮助我。谢谢。

Answer 1

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

您不能使用 white space在您的 DOM ID 中。你应该使用 camelCase或 snake_case :

HTML

<div class="tab-pane active" id="Realted_Articles">

JavaScript

TabData("#Realted_Articles");