CODEWITHSUNDEEP
phpjqueryhtmlajax
Tiny
Tiny

Reputation: 363

Updating a div on success of a ajax/json call

I have a create new album form on my page along side a delete album form. On the sucess of the album create I would like to automatically update the checkbox list that is in the delete album form with the newly created album details. The delete album form gets it's checkbox delete list by using php within the page. Deleting an album uses an ajax call triggered by the album delete button, on success return of the php delete script the checkbox and parent div is removed. At this time for the delete form list to get updated the page has to be reloaded. Is there a way to update the delete list without reloading the page. All the posts I have looked at talk about append html with json message which isnt going to work, and I havent yet seen a solution that enables refreshing a div like refreshing a page although ultimately if there doesnt seem to be another way then thats what I will have to trigger in my album create success return.

jquery for add new album

<script type="text/javascript">

$(document).ready(function() {

    $("#add_new_catagory").click(function() {

    if($("#catagory_name").val()=="" || $("#albumDescription").val()=="")   {

    $("#addAlbumError").html("Please enter Album Name and Album Description");

        return false;   

    }else{


    $("#addAlbumError").html('<img src="image/ajax-loader.gif" width="16" height="16" alt=""/>');
    var albumName=$("#catagory_name").val();
    var albumDescription=$("#albumDescription").val();


$.post("includes/add_albumn_catagory.inc.php",{album_name:albumName,album_description:albumDescription},function(json)   {
    if(json.result === "success") {

        $("#addAlbumError").html(json.message);

        $('#add_category').get(0).reset();



    }else{
        $("#addAlbumError").html(json.message);
    }
});
    }   



});//submit click
});//doc ready
</script>

html form for delete album that I woud like to refresh

<div class="list_album">

  <div id="deleteAlbum_title">Delete Album</div>

<form action="includes/delete_album.inc.php" id="album_delete">

      <p>

            <?php 
            while($row = mysqli_fetch_array($result3)){ ?>

          <div id="album_echo_list">

            <input name="albumid" type="checkbox" id="addImage" value="<?php echo $row['albumid'];?>">


            <?php echo $row['album_name'];?> <?php echo '';?><?php echo $row['albumDescription'];?> <?php echo '<br/>';?>
  </div> 
            <?php } ?>
            <br>
</p>


        </form>


<input name="submit" type="button" id="delete_album_but" style="display:none" title="Delete Album" value="Delete Album" form="album_delete"/>

    <div id="deleteAlbumNotice" style="display: block">Choose an Album to Delete<br>By Deleting an Album all pictures and subdirectories in the Album will be Deleted Also!</div>

  <div id="deleteAlbum"></div>

</div>
</div>

I hope I managed to explain this properly and I have posted the relevent code

Upvotes: 1

Views: 278

Answers (1)

Barmar
Barmar

Reputation: 781004

You're expecting the response JSON to be parsed, but you never told $.post that it's being returned as JSON. Add another argument:

$.post("includes/add_albumn_catagory.inc.php",{album_name:albumName,album_description:albumDescription},function(json)   {
    if(json.result === "success") {

        $("#addAlbumError").html(json.message);

        $('#add_category').get(0).reset();



    }else{
        $("#addAlbumError").html(json.message);
    }
}, "json"); // <<--- response dataType

Upvotes: 2

Related Questions