Imagine i have 2 html files
index.html
<html>
<div id="content"></div>
<div id="footer"></div>
<script>
$("#content").load("productos.html");
$("#footer").load("pie.html");
</script>
</html>
productos_main.html
<html>
...
<div id="prod_fabricantes" class="optbar">fabricantes</div>
<div id="prod_industria" class="optbar">industria</div>
<div id="prod_header"></div>
<div id="prod_mainframe"></div>
...
<script>
$('#prod_fabricantes').live('click', function() {
document.title = '..:: TITLLE :: Productos :: Fabricantes';
$("#prod_header,#prod_mainframe").empty();
$("prod_header").text("Text for Fabricantes's section");
$('#prod_mainframe').load("prod_fabricantes.html");
});
$('#prod_industria').live('click', function() {
document.title = '..:: TITLLE :: Productos :: Industria';
$("#prod_header,#prod_mainframe").empty();
$("prod_header").text("Text for Industria's section");
$('#prod_mainframe').load("prod_industria.html");
});
</script>
</html>
pie.html
<html>
<div id="map syte">
<table class="table_site">
<tr>
<td id="st_fab" class="topsite">Fabricantes</td>
<td id="st_ind" class="topsite">Industria</td>
</tr>
</table>
<script>
$('#st_fab').live('click', function(){
$('#content').empty();
document.title = '..:: DIELECSUR S.L :: Productos :: Fabricantes';
$("#content").load("productos_main.html");
$("#prod_header,#prod_mainframe").empty();
$("prod_header").text("Text for Fabricantes's section");
$('#prod_mainframe').load("prod_fabricantes.html");
});
$('#st_ind').live('click', function(){
$('#content').empty();
document.title = '..:: DIELECSUR S.L :: Productos :: Idustria';
$("#content").load("productos_main.html");
$("#prod_header,#prod_mainframe").empty();
$("prod_header").text("Text for Industria's section");
$('#prod_mainframe').load("prod_industria.html");
});
...
</html>
I have problems to load content using site map in footer section.
events onclick for footer options
1.click on #st_fab
2.it would load productos_main.html into #content div
3.if would execute functions below $('#st_fab').live('click', function() { ... });
error
it only load productos_main.html into #content div
please help
Try: