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.
First of all, you should not be using a full HTML document with jQuery's load() method. You should only have the contents of the div inside. E.g. no doctype, no html or body tag. Just the body itself.
Secondly: element identifiers should be unique on any page. When you load the content of the first div, it creates a div element with id=testing. When you load it the second time, it tries to create another copy of it, but with the same identifier.
Identifiers must be unique. (This is how they identify...)
Alternative solution would be to load the content with ajax(), then replace the identifier from Javascript code, and finally call $("#div1").html(replaced_html_content). But if I were you, I wouldn't do that. Use server side scripting and provide query parameters instead.
sYou can use a code like below if you are unable to make changes to the test2.html. below code will only grab the body section of your element.
$('#div1').load('test2.html body');
if you can make changes to the test2.html remove all the script and the body parts and make sure you have only included what is need.
Or It's better if you can put a wrapper which hold the HTML part you want. then you can get the specific div like this.
$('#div1').load('test2.html #container');
You this keyword rather than saying the div name specifically. It will allow you to get the div which the input was changed.
check the below link. it will help you out. TRY DEMO.
Hope this will help you out. If you have any questions please don't hesitate to ask.