jquery call function after load html content

Question

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

Sudhir Bastakoti · Accepted Answer · 2012-02-03 05:37:25Z

2

Try:


$("#content").load("productos.html", function() {
  $("#footer").load("pie.html");
});

answered Feb 3, 2012 at 5:37

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tibc-dev · Accepted Answer · 2012-02-03 05:35:45Z

0

Have you attempted putting the .load event into function and within using:

function mainFrameLoad(strHTMLFile){
    $(document).ready(function($){
        $('#prod_mainframe').load(strHTMLFile);
    });
 }

answered Feb 3, 2012 at 5:35

tibc-dev

98312 silver badges16 bronze badges

Collectives™ on Stack Overflow

jquery call function after load html content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related