Reload div content using jquery

Question

I have a website where I'm displaying two tables in one row, one to the second. Above the tables I have a menu where user can choose displayed tables. Problem is when I'm using jquery functions div.remove; div.append; div.load nothing happens - new table is not displayed.

HTML code:

    <div id="container_menu">
    <div id="menu1">
    <ul id="mainmenu">
    <li><a href="#">Choose the first map <i class="arrow"></i></a>
        <ul>
            <li class="div1clear" data-path="tables/cycling1_table.html"><a href="#">% of employees cycling to work</a></li>    
            <li class="div1clear" data-path="tables/white_british1_table.html"><a href="#">% of White British residents</a></li>
        </ul>
    </li>
</ul>
</div>  
    <div id="menu2">
    <ul id="mainmenu">
    <li><a href="#">Choose the second map <i class="arrow"></i></a>
        <ul>
            <li class="div2clear" data-path="contents/work/cycling2.html"  data-path2="tables/cycling2_table.html"<><a href="#">% of employees cycling to work</a></li>                 
            <li class="div2clear" data-path="contents/ethnic/white_british2.html" data-path2="tables/white_british1_table.html"><a href="#">% of White British residents</a></li>
        </ul>
    </li>
</ul>
</div>
</div>

    <div id="container_table">          
        <div id="table_div1"></div>
        <div id="table_div2"></div> 
    </div> 

Change content of DIV:

    <script type="text/javascript">
$(document).ready(function(){          
    $(".div1clear").click(function(){                           
            var tablePath = $(this).data("path2");                  
            $("#table_div1").remove();  
            $("#container_table").append("<div id='table_div1'></div>");    
            $('#table_div1').load(tablePath);       
        });

        $(".div2clear").click(function(){
            var tablePath2 = $(this).data("path2");                 
            $("#table_div2").remove();  
            $("#container_table").append("<div id='table_div2'></div>");    
            $('#table_div2').load(tablePath2);
        });     
});
    </script>

File with content of table_div1

            <script type="text/javascript">
            var table1;
            var newList1 = [];

    $.each(list, function(index, val) {
        table1 = {
           name: val.NAME,
           value: val.white_brit
        };
        newList1.push(table1);

    });

    var createdTable1;
    $.each(newList1, function(index, val) {
        createdTable1 += '<tr><td>' + val.name + '</td>';
        createdTable1 += '<td>' + val.value + '</td></tr>';
    });

$('#table_div1').html( createdTable1);
</script>

File with content table_div2:

<script type="text/javascript">
            var table2;
            var newList2 = [];

    $.each(list, function(index, val) {
        table2 = {
           name: val.NAME,
           value: val.cycling
        };
        newList2.push(table2);
    }); 

    var createdTable2;
    $.each(newList2, function(index, val) {
        createdTable2 += '<tr><td>' + val.name + '</td>';
        createdTable2 += '<td>' + val.value + '</td></tr>';  
        $('#table_div2').html( createdTable2);
    </script>

Also this two js codes with content of both tables i have placed in initial index.html file and after run website both of tables are displaying in a correct way, only after when i try to change table nothing happens.

Do you have any idea what can be issue?

Thanks in advance.

Answer 1

Do you definitely have JQuery loaded? Be sure to have something like:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

before all the rest of your JavaScript code so it gets loaded first.

I just ran your code and was able to get one of the tables to be removed. Also, be sure to define your 'list' variable. I assumed that you had just left it out of your post but have it in your code.

In terms of swapping however, your tablePath is returning undefined I think.

 var tablePath = $(this).data("path2");                  

The definition of this in the above line is:

<li class="div1clear" data-path="tables/cycling1_table.html">
  <a href="#">% of employees cycling to work</a>
</li>

There's no 'path2' defined in it. Perhaps it makes sense to have a variable defining where you want the data loaded if you click on the top two lines or the bottom two lines.