Reload a div on AJAX request

Question

I want to send an ajax request and reload the div from which it came. As of current I am getting the proper request but it isn't reloading the div - it just makes it blank (nothing there). And I have to refresh the page to see my data. How can I get it to display properly?

my add_amenity.php page works fine

*also, don't be suspicious of the var id = $('.editblock').find('#id').val(); It gets the value it needs and sends it to add_amenity.php just fine. My only problem is getting the div to reload on an add.

php and html on same page as JS below. (This is not add_amenity.php)

   <div class="editunitamenities">
        <?php
            require_once('config/db.php');
            $con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

            $query = 'SELECT id, unit, amenities FROM amenities WHERE unit = '.mysqli_real_escape_string($con, $_GET['id']).'';
            $result = mysqli_query($con, $query);
            while ($row= mysqli_fetch_assoc($result))
            {
                echo '<div class="checkbox"><input type="checkbox" id="'.$row['id'].'" checked 
                class="amenitiescheckbox" name="'.$row['amenities'].'" value="'.$row['amenities'].'" />
                <label title="'.$row['unit'].'">'.$row['amenities'].'</label></div>';
            }
            mysqli_close($con);
        ?>
        <div class="newamenitywrap">
            <div class="button"><button class="smallbutton" id="addamenity">New</button></div>
            <div><input type="text" name="amenity" style="width:120px;" id="amenity" placeholder="Amenity Name" /></div>
        </div>
    </div>  <!-- end editunitamenities -->

Here is the AJAX request

<script>
$('#addamenity').click(function() {
    var id = $('.editblock').find('#id').val();     
    var amenity = $( "#amenity" ).val();

    var dataString ={id:id,amenity:amenity};
    console.log(dataString);    
    if (amenity != '')
    {
        $.ajax({        
            type: "POST",
            url: "classes/add_amenities.php",
            data: dataString,
            cache: false,
            async:false,
            success: function(html)
            {
                $('.editunitamenities').html(html);
            }
        });
    }
});
</script>

Answer 1

I suggest the following changes:

(1) Remove the following line. I can't imagine it is doing what you expect it to because it will try to make an ajax call to the URL ".editunitamenities", and this may be what is blanking out the <div> .

$(".editunitamenities").load('.editunitamenities');

(2) Add the following property to the ajax options. This will prevent jQuery from converting the data value into an object if it thinks it looks like JSON.

dataType: 'html'

(3) Add the following line to the success handler to check what is getting returned.

console.log(data);

The following line also appears suspicious to me, but since you say the request is correct, I will assume it is working as it should.

var id = $('.editblock').find('#id').val();

I find the above line suspicious because there would have to be an element with an id value equal to "id". Also, since you are trying to find that element within another element, it makes me think you have multiple such elements, but id values should be unique throughout the entire page.

Answer 2

It would be useful to see the code for classes/add_amenities.php to see exactly what's going on, but you should check one or more of the following:

• in the PHP you use $_GET['id'] and the ajax request is type: "POST"
• also I see in your ajax request you do $('.editblock').find('#id').val(); but I see no element in your markup with class editblock or with id id - so either these nodes are not in the markup you posted or you should change you js call
• the second line in the success function is redundant

Answer 3

I found a workaround. None of the other suggestions worked for me.

I made another page called display_amenities.php :

<?php 
require_once('../config/db.php');
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

$query = 'SELECT id, unit, amenities FROM amenities WHERE unit = '.mysqli_real_escape_string($con, $_GET['id']).'';
$result = mysqli_query($con, $query);
while ($row= mysqli_fetch_assoc($result))
{
    echo '<div class="checkbox"><input type="checkbox" id="'.$row['id'].'" checked 
    class="amenitiescheckbox" name="'.$row['amenities'].'" value="'.$row['unit'].'" />
    <label title="'.$row['unit'].'">'.$row['amenities'].'</label></div>';
}
mysqli_close($con);

?>
<div class="newamenitywrap">
            <div class="button"><button class="smallbutton" id="addamenity">New</button></div>
            <div><input type="text" name="amenity" style="width:120px;" id="amenity" placeholder="Amenity Name" /></div>
        </div>


<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">     </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$('#addamenity').click(function() {
    var id = $('.editblock').find('#id').val();     
    var amenity = $( "#amenity" ).val();

    var dataString ={id:id,amenity:amenity};
    console.log(dataString);    
    if (amenity != '')
    {
        $.ajax({        
            type: "POST",
            url: "classes/add_amenities.php",
            data: dataString,
            cache: false,
            async:false,
            success: function(html)
            {
                //$('.editunitamenities').html(html);

                $('.editunitamenities').load('classes/display_amenities.php?id='+id);
            }
        });
    }
});
</script>

And then called it from the main page:

$('#addamenity').click(function() {
    var id = $('.editblock').find('#id').val();     
    var amenity = $( "#amenity" ).val();

    var dataString ={id:id,amenity:amenity};
    console.log(dataString);    
    if (amenity != '')
    {
        $.ajax({        
            type: "POST",
            url: "classes/add_amenities.php",
            data: dataString,
            cache: false,
            async:false,
            success: function(html)
            {
                //$('.editunitamenities').html(html);
                $('.editunitamenities').load('classes/display_amenities.php?id='+id);
            }
        });
        //$('.editunitamenities').load('.editunitamenities');
    }
});

Definitely not ideal, but it works.