Scope of the DOM with JQuery/JavaScript
Hi,
I'm a newbie to JavaScript and JQuery. I'd like to know if, when I load some data (in my case a table of data from my db) into a div using JQuery's .load command, is that table (and it's locally created wrapper div) completely unaware of the parent div into which it loads on the original calling page?
My mental picture of what's happening is that my main html page plus the loaded page are now all part of the one Document Object but I'm beginning to think that this is a flawed picture (especially after reading the sticky post about binding) I'm trying to figure out where to put snippets of JQuery that I need for instance on the .loaded content page. If any of that makes sense I'm looking for a gentle nudge in the right direction from someone with more experience. Some code below to illustrate what I'm doing:
p.s. in case it makes any difference, this is a new, existing application which I've written using the CodeIgniter pattern and php. I want to 'JQuery'-ize the application. If I can get all of these things to work together I'll be a very, VERY happy bunny as I love both technologies!
-
<script type="text/javascript">
/* Load html to div */
$(document).ready(function () {
$(function(){
// Tabs
$('#navTabsMain').tabs();
});
$('#navTabsMain a').click(function() {
var divId = $(this).attr('id');
var divTarget = $(this).attr('source');
$('#div' + divId).load(divTarget);
});
});
</script>
<!-- Properties listing view -->
<div id="leftnav" class="leftnav">
</div>
<div id="mainnav" class="mainnav">
<!-- Tabs -->
<div id="navTabsMain">
<ul>
<li><a id="Home" href="#divHome" source="index.php/owners/blah">Home</a></li>
<li><a id="Tools" href="#divTools" source="index.php/owners/blah">Tools</a></li>
<li><a id="Queries" href="#divQueries" source="index.php/enquiries">Queries</a></li>
<li><a id="Sales" href="#divSales" source="index.php/owners/blah">Sales</a></li>
<li><a id="Customers" href="#divCustomers" source="index.php/owners/blah">Customers</a></li>
<li><a id="Availability" href="#divAvailability" source="index.php/owners/blah">Availability</a></li>
<li><a id="Property" href="#divProperty" source="index.php/owners/ajax_owners_list">Property</a></li>
<li><a id="Owners" href="#divOwners" source="index.php/owners/blah">Owners</a></li>
<li><a id="Locations" href="#divLocations" source="index.php/locations/blah">Locations</a></li>
<li><a id="Reports" href="#divReports" source="index.php/owners/blah">Reports</a></li>
</ul>
<div id="mainBody">
<div id="divHome"></div>
<div id="divTools"></div>
<div id="divQueries"></div>
<div id="divSales"></div>
<div id="divCustomers"></div>
<div id="divAvailability"></div>
<div id="divProperty"></div>
<div id="divOwners"></div>
<div id="divLocations"></div>
<div id="divReports"></div>
</div>
</div>
</div>