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 和 NAME 标记必须以字母 ([A-Za-z]) 开头，并且可以是 后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、 下划线（“_”）、冒号（“:”）和句点（“.”）。

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

HTML

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

JavaScript

TabData("#Realted_Articles");