I am writing an application (Asp.Net MVC) that contains a lot of reusable components.
I am currently loading these components with Ajax calls, using the jQuery library of course.
These components will be calling other sub-components as well, and so there are all these JavaScript coming back.
So question is, where should I put the "callback" JavaScript?
I currently have something like this:
The page:
<html>
<head>
<title>blah</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
</head>
<body>
<div id="Container"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#Container').load('SomeCrazyDomain.com/SomeComponent');
});
</script>
</body>
</html>
The Component:
<p>Load sub components</p><input type="button" onclick="GetSubcompent" />
<div id="SubcompentContainer"></div>
<!-- Is this Bad? -->
<script type="text/javascript">
function GetSubcompent() {
$('#SubcompentContainer').load('SomeCrazyDomain.com/SomeSubComponent');
}
</script>
The sub component:
<h1>I am a sub compent</h1>
<script type="text/javascript">
function ToBeLoadedForEachAjaxCall() {
//do something
}
</script>
If, I leave it as it is, what's the effect of loading ToBeLoadedForEachAjaxCall() for each ajax call? Will the broswers kill the last ToBeLoadedForEachAjaxCall() and replace with the "newer" one?
Thank you,