Javascript 将页复制到div会得到空div_Javascript_Jquery_Ajax

Javascript 将页复制到div会得到空div

javascript jquery ajax

Javascript 将页复制到div会得到空div,javascript,jquery,ajax,Javascript,Jquery,Ajax,我发现一些代码应该加载一个带有页面内容的div（设计用于显示我试图修改的rss提要，以便只显示一个web页面）并用计时器刷新它，但是尽管我看到它击中了页面，但它没有显示另一个页面的div内容。我正在寻找如何解决这个问题，使它将工作以下是test.jsp中的代码，它是名为： <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title&

我发现一些代码应该加载一个带有页面内容的div（设计用于显示我试图修改的rss提要，以便只显示一个web页面）并用计时器刷新它，但是尽管我看到它击中了页面，但它没有显示另一个页面的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>


自动刷新Div内容演示| jQuery4u
（函数（$）
{
$（文档）.ready（函数（）
{
$.ajaxSetup(
{
cache:false，
beforeSend:function（）{
$（'#test'）.hide（）；
$（“#加载”）.show（）；
},
完成：函数（）{
$（“#加载”）.hide（）；
$（'#test'）.show（）；
},
成功：函数（）{
$（“#加载”）.hide（）；
$（'#test'）.show（）；
}
});
var$container=$（“#测试”）；
$container.load（'http://localpage.com/rolestable.jsp?acronym=PEANUT #DOMTarget'）；
var refreshId=setInterval（函数（）
{
$container.load（'http://localpage.com/rolestable.jsp?acronym=PEANUT #DOMTarget'）；
}, 9000);
});
})（jQuery）；
试验

它调用的页面（即rolestable.jsp）：


#首字母缩略词{
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
宽度：100%；
边界塌陷：塌陷；
}
表，td{
边框：1px纯黑；
单词包装：打断单词；
}
#首字母缩略词th{
字体大小：1.1米；
文本对齐：居中；
垫面：5px；
垫底：4px；
背景颜色：深蓝；
颜色：#ffffff；
}
坚果试验
var首字母缩写=”；
函数init（）{
tableCreate（）；
}
函数domTarget（t，s）{
var target=document.getElementById（t）；
target.innerHTML=“”；
target.innerHTML=s；
}
函数tableCreate（）{
acronym=“${param['acronym']}”；
变量表=表头+“”；
var head=“”；
头部+=”；
head+=“管理员”；
head+=“开发人员”；
head+=“观察员”；
head+=“用户”；
头部+=”；
头部+=”；
表+=头；
var body=“”；
正文+=”；
正文+=”；
//管理员
var cell=“”；
如果（单元格==“”）{
单元格=“${item}”；
}否则{
单元格+=“，${item}”；
}
体+=细胞；
正文+=”；
//开发者
正文+=”；
单元格=”；
如果（单元格==“”）{
单元格=“${item}”；
}否则{
单元格+=“，${item}”；
}
体+=细胞；
正文+=”；
//观察员
正文+=”；
单元格=”；
如果（单元格==“”）{
单元格=“${item}”；
}否则{
单元格+=“，${item}”；
}
体+=细胞；
正文+=”；
//使用者
正文+=”；
单元格=”；
如果（单元格==“”）{
单元格=“${item}”；
}否则{
单元格+=“，${item}”；
}
体+=细胞；
正文+=”；
正文+=”；
正文+=”；
表+=正文；
表+=”；
domTarget（“domTarget”，表）；
}
window.onload=init；

browser developer工具显示它进入了页面，并显示它收到了首字母缩写词参数（即Peant）值，但DOMTarget div为空。如果我直接进入页面，它工作正常

请注意，如果您打开开发者工具并单击网络选项卡，每次计时器运行带有参数的rolestable.jsp页面调用时，它都会不断添加该选项卡，并且如果您单击其中任何一个选项卡，它们会弹出包含我希望在div中看到的内容的页面。我猜这意味着负载在调用该页面时起作用，但它只是不在test div中运行。

我认为这可能不起作用，因为您无法在setInterval（）内访问$container

JS:

您是否检查了tablecreate（）fct中的首字母缩略词是否不为null？是的，如果我查看开发人员工具信息，它会显示变量正在接收参数值。很有趣，但为什么$container仍不在范围内？我稍微修改了代码，将其改为不使用.load，而是使用：

$container.html（“”）

和voila的东西出现在div中。它没有显示精彩的iframe滚动条和东西，所以它很烂，但至少它会弹出。下一步我可以试着解决小问题。我需要看看，如果使用元刷新方法，刷新是否不那么明显。解决方案太糟糕了。它比一个好的旧的元刷新更值得注意。我想办法是让ajax只填充/刷新表数据，而不只是尝试用数据替换表。

<%@ 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>

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