将页面复制到div中会得到空div

时间:2014-07-16 17:47:56

标签: javascript jquery ajax

我发现一些代码应该加载带有页面内容的div(旨在显示我尝试修改的rss feed以显示网页)并使用计时器刷新它,但是虽然我看到它点击页面,它不显示其他页面的div内容。我正在寻找如何解决这个问题,以便它可以工作。

这是test.jsp中的代码,它是名为的主页:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Auto Refresh Div Content Demo | jQuery4u</title>
    <!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    (function($)
    {
        $(document).ready(function()
        {
            $.ajaxSetup(
                    {
                        cache: false,
                        beforeSend: function() {
                            $('#test').hide();
                            $('#loading').show();
                        },
                        complete: function() {
                            $('#loading').hide();
                            $('#test').show();
                        },
                        success: function() {
                            $('#loading').hide();
                            $('#test').show();
                        }
                    });
            var $container = $("#test");
            $container.load('http://localpage.com/rolestable.jsp?acronym=PEANUT #DOMTarget');
            var refreshId = setInterval(function()
            {
                $container.load('http://localpage.com/rolestable.jsp?acronym=PEANUT #DOMTarget');
            }, 9000);
        });
    })(jQuery);
</script>
</head>
<body>

<h2>Test</h2>
<div id="wrapper">
<div id="test"></div>
<img src="http://localpage.com/images/ajax-loader.gif" id="loading" alt="loading" style="display:none;" />
</div>

</body>
</html>

它调用的页面(即rolestable.jsp):

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html lang="en">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<jsp:useBean id="abean" class="abean.com" scope="page">
<jsp:setProperty name="nuts" property="*" />
<jsp:setProperty name="nuts" property="acronym" value="${param['acronym']}" />
</jsp:useBean>


<head>
<!-- <meta http-equiv="refresh" content="20"> -->
<style>
    #acronym {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        width: 100%;
        border-collapse: collapse;
    }
    table, td {
        border: 1px solid black;
        word-wrap: break-word;
    }
    #acronym th {
        font-size: 1.1em;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 4px;
        background-color: deepskyblue;
        color: #ffffff;
    }
</style>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Nutty Test</title>
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />
<script type="text/javascript" src="/jscript.js"></script>

<script type="text/javascript">
    var acronym = "";

    function init() {
        tableCreate();
    }

    function domTarget(t,s) {
       var target = document.getElementById(t);
        target.innerHTML = "";
        target.innerHTML = s;
    }

    function tableCreate(){
        acronym = "${param['acronym']}";

        var table = header + "<table id='acronym'>";
        var head = "<thead>";

        head += "<tr>";
        head += "<th>Administrators</th>";
        head += "<th>Developers</th>";
        head += "<th>Observers</th>";
        head += "<th>Users</th>";
        head += "</tr>";
        head += "</thead>";

        table += head;

        var body = "<tbody>";
        body += "<tr>";
        body += "<td>";

        // Administrators
        var cell = "";
        <c:forEach var="item" items="${abean.projAdministrators}" varStatus="status" >
            if (cell == "") {
                cell = "${item}";
            } else {
                cell +=", ${item}";
            }
        </c:forEach>
        body += cell;
        body += "</td>";

        // Developers
        body += "<td>";
        cell = "";
        <c:forEach var="item" items="${abean.projDevelopers}" varStatus="status" >
        if (cell == "") {
            cell = "${item}";
        } else {
            cell +=", ${item}";
        }
        </c:forEach>
        body += cell;
        body += "</td>";

        // Observers
        body += "<td>";
        cell = "";
        <c:forEach var="item" items="${abean.projObservers}" varStatus="status" >
        if (cell == "") {
            cell = "${item}";
        } else {
            cell +=", ${item}";
        }
        </c:forEach>
        body += cell;
        body += "</td>";

        // Users
        body += "<td>";
        cell = "";
        <c:forEach var="item" items="${abean.projUsers}" varStatus="status" >
        if (cell == "") {
            cell = "${item}";
        } else {
            cell +=", ${item}";
        }
        </c:forEach>
        body += cell;
        body += "</td>";

        body += "</tr>";
        body += "</tbody>";
        table += body;
        table += "</table>";

        domTarget("DOMTarget",table);
    }
    window.onload = init;

</script>
</head>

<body>

<div id="DOMTarget" name="DOMTarget" >

 </div>
</body>
</html>

浏览器开发人员工具显示它到达页面并显示它收到了首字母缩写词参数(即PEANUT)值,但DOMTarget div为空。如果我直接进入页面,它可以正常工作。

请注意,如果您打开开发人员工具并点击网络选项卡,我会看到它会在每次计时器运行带参数的rolestable.jsp页面调用时继续添加,如果您点击其中任何一个,它们会弹出页面我希望在div中看到的内容。我猜这意味着负载正在调用页面,但它不会进入测试div。

1 个答案:

答案 0 :(得分:0)

我认为这可能不起作用,因为你无法在setInterval()中访问$ container

JS:

$.ajaxSetup(
                    {
                        cache: false,
                        beforeSend: function() {
                            $('#test').hide();
                            $('#loading').show();
                        },
                        complete: function() {
                            $('#loading').hide();
                            $('#test').show();
                        },
                        success: function() {
                            $('#loading').hide();
                            $('#test').show();
                        }
                    });
            var $container = $("#test");
            $container.load('http://localpage.com/rolestable.jsp?acronym=PEANUT #DOMTarget');
            var refreshId = setInterval(function()
            {
                $("#test").load('http://localpage.com/rolestable.jsp?acronym=PEANUT #DOMTarget');
            }, 9000);