CODEWITHSUNDEEP
jqueryfunctionload
Raphael D.G
Raphael D.G

Reputation: 260

jquery call function after load html content

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

Upvotes: 3

Views: 4963

Answers (2)

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100205

Try:


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

Upvotes: 2

tibc-dev
tibc-dev

Reputation: 983

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

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

Upvotes: 0

Related Questions