div reloading wrong after ajax call

Question

I have a script for adding and removing entries from a table. it does this using ajax to call a php script. On success it's supposed to reload the div containing the table. At the moment it just empties the div.

Here is my javascript

$(document).ready(function(){

    $("#add_height_weight").click(function(){
        var corp_hw_name = $("#corp_hw_name").val();
        var corp_hw_height = $("#corp_hw_height").val();
        var corp_hw_weight = $("#corp_hw_weight").val();       
        var client_id = $("#cient_id").val();
        var ff_id = $("#ff_id").val();
        var task = "add";

        var dataString = "task=" + task + "&client_id=" + client_id + "&ff_id=" + ff_id + "&corp_hw_name=" + corp_hw_name + "&corp_hw_height=" + corp_hw_height + "&corp_hw_weight=" + corp_hw_weight;

        $.ajax({
            type:"POST",
            url:"/organiseit/fact_finds/processors/corp_health.php",
            data: dataString,
            success: function(){
                alert("Height/Weight Updated");
                $("input,textarea,option").css("background-color","#fff");
                $("#height_weight_table").load(" #height_weight_table");
            }
        });  
    });

});

And here's the content of the div

<div id="height_weight_table">
    <table>
        <tr>
            <td>Name</td><td>Height</td><td>Weight</td><td>Delete</td>
        </tr>
    <?php 
    $ff_height_weight = fetch_all("SELECT * FROM ff_height_weight WHERE ff_id='$ff_id'");
    foreach($ff_height_weight as $entry){ 
    ?>
        <tr>
            <td><?php echo $entry['name']; ?></td>
            <td><?php echo $entry['height']; ?></td>
            <td><?php echo $entry['weight']; ?></td>
            <td><button class="delete_act" onclick="delete_height_weight('<?php echo $entry['id']; ?>')">X</button></td>
        </tr>
    <?php } ?>
        <tr>
            <td><input type='text' id="corp_hw_name"></td>
            <td><input type='number' id="corp_hw_height"></td>
            <td><input type='number' id="corp_hw_weight"></td>
            <td><button class='new_note_submit' id="add_height_weight">+</button></td>
        </tr>
    </table>
</div>

Does anyone have any suggestions why this would reload an empty div?

I have similar code running elsewhere in the project for adding/deleting from a notes table. The following code works perfectly but I can't see how it differs from the code above:

javascript

if(proceed === "TRUE"){
        $.ajax({
            type:"POST",
            url:"/organiseit/clients/update_client_notes.php",
            data: noteString,
            success: function(){
                alert("data submitted");
                $("#notes_table").load(" #notes_table");
                $("#new_note").css("background-color","#fff");
            }
        });

div on the page

<div class="notes_area" id="notes_area">
<table class="notes_table" id="notes_table">
    <tr>
        <td class="note_body"><strong>Note</strong></td>
        <td><strong>Created by</strong></td>
        <td><strong>Created for</strong></td>
        <td><strong>Date Created</strong></td>
        <td><strong>Completion by</strong></td>
        <td><strong>Delete</strong></td>
    </tr>
    <?php
    if(!empty($id)){
        $get_note = fetch_all("SELECT * FROM client_notes WHERE client_id=$id ORDER BY id DESC");
        foreach($get_note as $note){?>
        <tr>
            <td><?php echo $note["note"];?></td>
            <td><?php echo $note["created_by"];?></td>
            <td><?php echo $note["note_for"];?></td>
            <td><?php echo $note["date"];?></td>
            <td><?php echo $note["completion_by"];?></td>
            <td style="text-align:center;"><button class="delete_note" onclick="delete_note(<?php echo $id.",".$note["id"];?>)"><strong>X</strong></button></td>
        </tr>
        <?php
        }
    }
    ?>  
</table>
</div>

Answer 1

In your second example, (the working one) you are targeting the table which has an id of "#notes_table" . This is why the ajax request is successful in finding the table.

//What you are targeting in AJAX request
$("#notes_table").load(" #notes_table");

//the actual markup for the page is correct for the request
<div class="notes_area" id="notes_area">
   <table class="notes_table" id="notes_table">

In your first example you are targeting the parent div, not the table itself, your ajax request is trying to get the entire div not the table:

//What you are targeting in AJAX request
$("#height_weight_table").load(" #height_weight_table");

//here you are actually targeting the parent div not the table
<div id="height_weight_table">
    <table>

Try switching the id for the <div> to the <table> element.

<div>
    <table id="height_weight_table">

Answer 2

You're not loading the received data in the div . You have to declare and use that data in the success function. Try this...

$.ajax({
    type:"POST",
    url:"/organiseit/fact_finds/processors/corp_health.php",
    data: dataString,
    dataType: 'html',
    success: function(data) {
        alert("Height/Weight Updated");
        $("div#height_weight_table").replaceWith(data);
        $("input,textarea,option").css("background-color","#fff");
    }
});

I hope it helps