I am trying create a "portal-like" application with HeadContainer application(basically EAR) having a html page. This html page has 2 divs in it. Each div is a EAR again - and each div loads that EAR ie an application. Lets say they are AppChild1 and AppChild2.
I am loading AppChild1 and AppChild2 using jQuery load in the HeadContainer javascript.
When I try to submit a form in the AppChild1 I am doing a ajax post using jQuery. This is an external javascript file in the AppChild1 application. Lets say the file name is scriptFile1.js
Firebug shows me that its trying to find scriptFile1.js under the contex of the HeadContainer which is not right.
When I hover on the form in FireBug the in the HeadContainer - it shows AppChild1 form and title but the included script files of AppChild1 are totally missing.
Can someone explain whats going wrong here?
OK since a few of you wanted the code I will give the code structure.
The HeadContainer EAR structure is like this
HeadContainer has a html called Main.html
**Main.html**
----------------
<html>
<head><title>Main Page</title>
<script lanuage="text/javascript">//Include jQuery library </script>
</head>
<body>
<form name="MainForm" id="MainId">
<div name="div1" id="div1"/><br />
<div name="div2" id="div2" /><br />
<input type="submit" id="MainSubmit" />
</form>
</body>
</html>
Main.html has an asscociated javascript file main.js
$(document).ready(function() {
$("#div1").load(div1url,function(){
//load function call back implementation
});//Close load
$("#div2").load(div1url,function(){
//load function call back implementation
}); //Close load
});//doc.ready closing
//AppChild1 is a EAR which is loaded into div1
//AppChild1 has a html div1.html and a associated scriptFile1.js file.
//It is this js file which is not getting loaded
**div1.html** is like this
<html>
<head><title>Div1 Page</title>
<script lanuage="text/javascript">//Include jQuery library </script>
</head>
<body>
<form name="div1Form" id="div1Id">
<input name="txtName1" id="txtname1"/><br />
<div name="txtName2" id="txtName2" /><br />
<input type="submit" id="div1Submit" />
</form>
</body>
</html>
**scriptFile1.js**
$(document).ready(function() {
$("#div1Submit").submit({
$.ajax({
data: $("#div1Form").serialize(),
url : "/someServlet",
success:function(response){
//load the next screen with values from the response object.Response is a
//json object.
}
});
}); //Close Submit
});//doc.ready closing
//The AppChild2 is also on the similar lines
//When I load the Main.html in Firebug - it looks for scriptFile1.js file under the //HeadContainer which is not correct. scriptFile1.js is under AppChild1 EAR. This is //happening at the load of the main page.
// When I viewsource the div1 if is showing the form and title but the included //javascript file scriptFile1.js is missing
Imagine that you have a element in your DOM when it is load, and you will load an via ajax and append it in 'a1'.
$('#a1').load(my url, function(data){
$(this).html(data);
});
So we have something like this:
<div id='a2'>
<div id='a2'>
</div>
</div>
And in your 'a2', you have some event when an anchor is click ther will be an alert. This won't work:
$('#a2 a').click(function(){
alert('some action');
});
This will:
$('#a2 a').live('click', function(){
alert('some action');
});
Check out .live function in Jquery Docs.