Ajax response from Media Selection does not update ALL information more than once

So, I figured out why this only worked once, and not every time afterward.

I have the ID and URL wrapped in a <span> with an ID and class tied to it. However when the if(response.success === true) { fired, and updated the ID and URL of the image, it overwrote the entire <span> with nothing more than the ID and URL. Thus, the next time it attempted to fire, the <span> was missing, as well as the ID, and class, which were used to target this item in the DOM in the first place.

Essentially…

  if(response.success === true) {
      jQuery('#foss_field-preview-image').replaceWith( response.data.image );
      jQuery('#foss-current-id').replaceWith( response.data.image_id );
      jQuery('#foss-current-url').replaceWith( response.data.image_url );

      jQuery.post(
        ajaxurl,
        { action: "foss_field_save_image", id: the_id },
        function(data) {
          console.log('[DEBUG] - Executing Save Function...');
          console.log('[DEBUG] - ' + JSON.stringify(data));
        }
      );
  }

Was replaced with:

      if(response.success === true) {
          jQuery('#foss_field-preview-image').replaceWith( response.data.image );
          jQuery('#foss-current-id').replaceWith( '<span id="foss-current-id" class="foss-current-file-details">' + response.data.image_id  + '</span>' );
          jQuery('#foss-current-url').replaceWith( '<span id="foss-current-url" class="foss-current-file-details">' + response.data.image_url   + '</span>' );

          jQuery.post(
            ajaxurl,
            { action: "foss_field_save_image", id: the_id },
            function(data) {
              console.log('[DEBUG] - Executing Save Function...');
              console.log('[DEBUG] - ' + JSON.stringify(data));
            }
          );
      }

This re-wrote the <span>, ID, and class information back to the object, along with the Image ID, allowing it to be target the second, third and so on time to be updated again and again.

Related Posts: