I am trying to make a page which has 4 configurable sections all of which will provide the user with the same inputs but ultimately be 4 unique configuration settings.
I am using a generic base page to do this but have run into problems with Jquery selectors not being able to tell the difference between the sections inside different divs but all originating from the same page. At first i thought this was implmentation specific so have created a smaller test page but ultimately seem to have the same problem.
test.html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.24.custom.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function ()
{
$('#div1').load("test2.html");
$('#div2').load("test2.html");
});
</script>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
test2.html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.24.custom.min.js"></script>
</head>
<body>
<script type="text/javascript">
function testing()
{
alert("Alert: " + $('#test').val());
}
</script>
<div id="testing">
<input id="test" onchange="testing()"></input>
</div>
</body>
</html>
If this is not the right way to do this what would be a better way, i understand i could probably use iframes but will i be able to access the values from the input box's in the page housing the others.
I have tested this on ubuntu firefox 15.0.1
Thanks.
