Question

I want to create script to edit photos in galery. I have there textbox to insert title of photo and after insert title in it and leave textbox it’ll update in database.
It works ok, when I change title by only one photo, but when I change more titles and then I reload page, all changed photos have the same title (which was insert last).
Can somebody help me please what is wrong?

There is code which I using now:

function UpdateTitle(idPhoto) {
    var id = idPhoto;
    $(document).ready(function(){
        $('textarea').live('blur',function () {
            var titleVal = $(this).val();        

            $.ajax({
                 type: "POST",
                 url: "changeTitle.php",
                 data: {title:titleVal , id:id},
                 success: function(msg) {
                     $('.'+id).html(msg);
                 }
           })

       });
    });     
}

---

<textarea name='title' id='title' onchange='UpdateTitle($idPhoto);' rows='2' cols='22'>$title</textarea>

Answer 1

More of a good programming tip rather than answering the question since it has already been answered but this would be cleaner:

$('textarea').on('blur',function () {
    var titleVal = $(this).val(), id = $(this).data('id');        

    $.ajax({
         type: "POST",
         url: "changeTitle.php",
         data: {title:titleVal , id:id},
         success: function(msg) {
             $('#'+id).html(msg);
         }
   })
});

With this HTML:

<textarea name='title' id='title' data-id='$idPhoto' rows='2' cols='22'>$title</textarea>

Will work much better and will be less confusing.