When you update a form, would save and replace text, or avoid updating the text?

Question

I have a form in jQuery where I update all the images via a simple ajax call to reload the entire page. Unfortunately the captions are included in that form as well, and as I start writing, my captions are overwritten.

What then would you do to keep them?

Would you..

1. Save them before the ajax call and replace them after it?

2. Avoid updating the captions all together?

The latter seems like the best choice, I'm just not entirely sure how I would implement calling an AJAX call but just updating the images .

My sweet updater

$.extend({
  PhotoUpdater: {
    startUpdate: function(organization, gallery){
      url = "/organizations/" + organization + "/media/galleries/" + gallery + "/edit_photo_captions"
      timer = window.setTimeout(function(){
       $.PhotoUpdater.doUpdate(url)
      }, 5000) 
    },
    stopUpdate: function(){
      clearTimeout(timer);
      timer = 0;
    },
    doUpdate: function(url){
      $.ajax({type: "GET", url: url, dataType: "script"});
    },
    resetValues: function(){
      setTimeout(function(){ $("body").data("edit_photos_closed", "false"); 
                             $.PhotoUpdater.stopUpdate();
      }, 3000 );
    }
  }
});

my html

<div class="alpha grid_4 zebraCaption">
      <img src="/tumblr_l0x861Yc5M1qbxc42o1_400.jpg" id="thumb_216" alt="Trippy Long Stockings's amazing picture">
      <br>
      <label for="gallery_photos_attributes_0_caption">Caption</label>
      <br>
      <input type="text" style="width: 236px;" size="35" name="gallery[photos_attributes][0][caption]" maxlength="35" id="gallery_photos_attributes_0_caption">
      <br>
      <a class="button_small facebox_window" href="/organizations/1/media/galleries/26/photos/216/edit_facebox_captions?captions_screen=true">edit crop</a>
      <a id="remove_crop_216" class="button_small remove_crop_button" href="http://localhost:3000/photos/216/toggle_crop"&gt;remove crop</a>
  </div>

Answer 1

You could try something like this:

If you have 10 images on the page then the AJAX response could be a JSON array of 10 img sources. You can then do:

var imgArray = {JSON ARRAY FROM AJAX}
$('img').each(function(index){
    $(this).attr('src',imgArray[index]);
});

This would only work if you know the order of the images on the page, though, or they are identified by IDs.