I'm building a web application and extracted the code of my navigation menu in a separate file. Afterwards, I include the menu with the HTML <object> element in all of my pages as suggested here. This ensures that I can modify the navigation without touching any other files.
However, I have a problem of dynamically modifying the elements of my menu using jQuery (or d3.js). Here is a very small toy example to reproduce the problem:
nav.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Title of the navigation menu.</h1>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script>
$(document).ready(function() {
// this code does not work
$("h1").text("New Title Of The Menu");
// this code does work
$("h2").text("New Title Of The Website");
});
</script>
</head>
<body>
<!-- include the menu code here -->
<object id="navigation" class="navigationObject" name="navigation"
type="text/html" data="nav.html" width="100%" height="100px"></object>
<h2>Title of the website</h2>
</body>
</html>
It seems that jQuery (and also d3.js) have a problem of selecting elements of embedded objects. Is it possible to select these elements?
Alternatively, is there a better solution to extract the code for the navigation menu in a separate file? The setup of my web application is as follows:
- Client side purely written in JavaScript using jQuery and d3.js
- Server side written in Java
- REST for client-server communication using Jersey 2.6.
