Trying to dynamically embed one html page inside of another
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>
So for the script above what I want to do is if the drop box changes then the div "inst" should change so that it is including a different page. The problem is when I try to do this it breaks. If I make container.innerHTML = "Good morning" or anything else it works fine. Any ideas why this happens?
2 answers
solution1
1 2011-06-21 19:19:34
You are mixing server-side and JavaScript code together. The result of your code would be to replace the content of your div with the literal HTML <jsp:include page='Home.htm'/> , rather than the HTML content of your Home.htm, as you intended.
To do what you want to do, you will need to perform an ajax call to retrieve the new contents from the server, then replace the old contents of the div with that.
Using a JavaScript library such as jQuery, this could be quite simple. Your container.innerHTML line would become something like the following:
$('#dist').load('Home.htm');
solution2
1 ACCPTED 2011-06-21 19:19:44
Without seeing your code sample, I'm going to go out on a limb and say you want to use jQuery, specifically the .load method. It makes stuff like this ridiculously easy.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.