Question

我正在将数据发送到客户端，但数据没有显示在选项卡中？以下是我点击标签时发送的ajax请求响应的内容：

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: application/json;charset=UTF-8
Content-Length: 196
Date: Wed, 23 May 2012 08:57:02 GMT

{
    "footerPkg": {
        "hotelRoomPrice": 1,
        "idHolidayPackage": 1,
        "idHolidayPackageVariant": 1,
        "idOriginCity": 1,
        "itineraryHeader": "Header",
        "miscPrice": 0,
        "name": "name",
        "occupancyType": "TWIN",
        "variantPrice": 10
    }
}

在我的jsp中，我使用它创建标签：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%-- <%@ taglib prefix="sj" uri="/struts-jquery-tags"%> --%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link
    href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
  $(document).ready(function() {
    $("#tabs").tabs({
        ajaxOptions: {
            dataType: "json",
            success : function(data, status) {
                alert(data.footerPkg.name);
            }
        }
    });
  });
  </script>

<title>Hello World!</title>
</head>
<body onload="alert('body load');">

    <div id="tabs">
        <ul>
            <li><a href="getJsonResult.action?idPkg=1">Tab 0</a></li>
            <li><a href="getJsonResult.action?idPkg=1">Tab 1</a></li>
            <li><a href="HelloWorld.jsp">Tab 3</a></li>
        </ul>
    </div>      
</body>
</html>

但是，我在标签内容中看不到任何内容。甚至是纯文本的Homepage.jsp也没有显示在标签3中。

这就是它的样子：

empty tabs

Answer 1

数据返回到ajax success方法后，必须有一个回调函数。回调是让jquery ui知道有新数据需要处理的必要条件。

这可能是这个问题的重复。

Callback after ajax loading a tab

这是另一个具有所需负载功能的明显示例

How to execute a callback function after ajax content has been loaded into a newly added jquery ui tab

jquery选项卡不显示ajax数据

1 个答案: