Question

<H2> Would you like to bounce an instance or application?</H2>
<form name="dropDown" method="POST">

    <select name="choiceDropDown" onchange="include()">
        <option value="1">Instance Level</option>
        <option value="2">Application Level</option>
    </select>
</form>

<div id="inst" class="outsidePages"><jsp:include page='Instance_List.htm'/></div>

<!-- END CONTAINER -->

</td>
</tr>
</table>
<!-- end content -->

</td>             </tr>         </table>     </div> </div>

<div id="footerWrapper">     <div id="footer">Footer content goes here</div> </div>

</body>

<script type="text/javascript"> function include() {     var container = document.getElementById("inst");          container.innerHTML = "";

    container.innerHTML = " <jsp:include page='Home.htm'/>  ";

    }
</script>
</html>

因此，对于上面的脚本我想要做的是如果下拉框改变那么div“inst”应该改变，以便它包括一个不同的页面。问题是，当我尝试这样做时，它会中断。如果我制作container.innerHTML = "Good morning"或其他任何东西，它就可以了。任何想法为什么会这样？

Answer 1

您正在将服务器端和JavaScript代码混合在一起。您的代码的结果将是使用文字HTML <jsp:include page='Home.htm'/>替换div的内容，而不是按照您的意图替换Home.htm的HTML内容。

要执行您想要执行的操作，您需要执行ajax调用以从服务器检索新内容，然后用该替换div的旧内容。

使用jQuery之类的JavaScript库，这可能非常简单。您的container.innerHTML行会变成以下内容：

$('#dist').load('Home.htm');

Answer 2

在没有看到你的代码示例的情况下，我会说你想要使用jQuery，特别是.load方法。它让这样的东西变得非常简单。

<body>
    <a href="#" id="loadSomePage">load some page</a>
    <div id="contentArea">content goes here</div>
</body>
<script>
    $("#loadSomePage").click(function(){
        $("#contentArea").load("http://www.foo.com/content.html");
    });
</script>

试图动态地将一个html页面嵌入到另一个页面中

2 个答案: