Когда вы обновляете форму, сохраните и замените текст или не обновите текст?

Question

У меня есть форма в jQuery, где я обновляю все изображения с помощью простого вызова ajax, чтобы перезагрузить всю страницу. К сожалению, подписи также включены в эту форму, и когда я начинаю писать, мои подписи перезаписываются.

Что бы вы сделали, чтобы сохранить их?

Не могли бы вы ..

1. Сохранить их перед вызовом ajax и заменить их после него?

2. Не обновлять заголовки все вместе?

Последнее кажется лучшим выбором, я просто не совсем уверен, как бы реализовать вызов AJAX, но просто обновив изображения .

Мой сладкий апдейтер

$.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 );
    }
  }
});

мой 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">remove crop</a>
  </div>

Answer 1

Вы можете попробовать что-то вроде этого:

Если у вас есть 10 изображений на странице, то ответ AJAX может быть массивом JSON из 10 источников img. Затем вы можете сделать:

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

Это будет работать, только если вы знаете порядок изображений на странице, или они идентифицируются по идентификаторам.