Clear and reload div with data via AJAX and jQuery

Question

I have an ajax call that requests data from a Coldfusion CFC method and displays the data in a div. There is also a link to delete this data which uses the same CFC but a different method to delete. Both methods work independently just fine. What I can't seem to figure out is how to encapsulate the call in a function and refresh the div once the deletion has been successful. Here is the code:

ajax call

    var caseid = <cfoutput>'#URL.ID#'</cfoutput>;
    var siteurl = <cfoutput>'#APPLICATION.url#'</cfoutput>;
    var html = "";

    function assetsPost() {
    $.ajax({
          cache: false,
          type:'GET',
          url:'cfc/cfc_Asset.cfc?method=qAsset&returnformat=json',
          dataType: "json",
          data: {
              assetgrp_id:  caseid,
            },
          success:function(data) {
            if(data) {   // DO SOMETHING 
            jQuery.each(data, function(i, val) {    
                 $('#picoutputannotation').html(data[i].annotation);
                 var asset_id   = data[i].value;
                 var img        = siteurl + 'assets/images/thumbs_check2/' + data[i].thumb;
                 var removeimg  = siteurl + 'assets/images/remove.png';
                 var annotation = data[i].annotation;
                     html += "<div class='block-pics'>";
                     html += "<img src='" + img + "'>";
                     html += "<div class='note'>";
                     html += annotation;
                     html += "</div>";
                     html += "<div class='block-pics-remove'>";
                     html += "<a class='delete-asset' id='" + asset_id + "'><img src='" + removeimg + "'></a>";
                     html += "</div>";
                     html += "<div class='bot'></div>";
                     html += "</div>";
            });
                 $('#picoutput').html( html );
            } else { // DO SOMETHING 
          }
        }
    });
}  
assetsPost();  

here is the deletion script:

   $(document).on("click", ".delete-asset", function() {
   var del_id = $(this).attr('id');
   $.ajax({
      type:'GET',
      url:'cfc/cfc_Asset.cfc?method=DeleteAsset&returnformat=json',
      dataType: "json",
      data: {
          delete_id:    del_id,
        },
      success:function(data) {
        if(data) {   // DO SOMETHING
            $('#picoutput').empty();
            {assetsPost()};
            $('#picoutput').fadeIn('fast');

        } else { // DO SOMETHING 
      }
    }
   });
 });

here is the html:

<div class="grid_6">
                <div id="picoutput"></div>
            </div>
    </div>

Solution

Simply set the html to empty by assigning empty string.

success:function(data) 
{
    $('#picoutput').html("");
}

Comments

[Chris Pilie]

Thanks Raheel. Actually I tried this. What happens is it doesn't delete the asset (picture) and simply reposts the data underneath the asset that is supposed to be deleted. If I refresh the page, the asset that was intended to be deleted is gone.

[turiyag]

could your code be executing in an unexpected order? do you have an example?

[Chris Pilie]

Thanks Mike for your comment. What is happening is: 1.I click delete. 2.The content is deleted but doesn't disappear from the screen. 3. The ajax call retrieves the remaining content and adds it underneath the existing content included what is supposed to be deleted. What is being repopulated is only the data that has not been deleted. When I refresh the page the deleted content is gone.

[Chris Pilie]

The code you are asking me to add is already inside of the success of the deletion script. Are you wanting me to add it to the script that is calling the data initially?

[Mike C.]

Actually, see my edit. When going over your script again fresh, I ran into some issues that I'm confused about.

[Chris Pilie]

Okay... now the strange gets stranger. I see where the brackets are not matching. I removed a couple braces and now it won't work at all. Now I get this in the console, "SyntaxError: missing } after property list" The assetsPost() is there in order to fire that function on load. Bear with me if I am not doing things correctly. Still green on javascript/jQuery.

[Chris Pilie]

I used Notepad ++ to match up all the braces.

[Chris Pilie]

When I click on the error in Firebug, it sends me to jQuery-1.9.1... frustrated now. hmm.

[Mike C.]

it sends you to jQuery-1.9.1 because the mismatch is occuring inside a $(){} section, so that makes sense. Using Notepad++ to match them up is the right thing to do. Sorry for the frustration. You'll get it sorted out.

[Chris Pilie]

I checked all the braces and all seem to be good. I did remove some that were in comments that should not have been there but were not affecting the code functionality. I am still experiencing the same issue.

[Chris Pilie]

Thanks Mike! Okay... I did as you directed. When the page loads, I get an alert for each picture as it loads. When I delete a picture, the alerts re-occur for each of the pics (even the one that was deleted), then I get another alert for each pic that wasn't deleted. I am not sure why the assetsPost() script runs twice when a pic is deleted.