Question

I have a table with a lot of text inputs like these:
alt text http://img380.imageshack.us/img380/6697/snapsh.png

(they are marks of tests for a few students).

Every field has an associated icon for adding a comment, so when the icon is clicked, a dialog must be shown with a textarea, and then save its value to a hidden input.

An example of a mark field:

<input class="num" type="text" size="2" value="5.69" name="calif[57][6]"/>
<a id="57_6" class="addObs" title="Add comment" href="#">
<img alt="Add" src="http://localhost/xxx/assets/img/comment.png"/>
</a>

Each link is identified with studentID_itemID

This is what I coded, but it doesn’t work at all.

var opciones = {
        title: 'Add comment',
        modal: true,
        buttons: {
            OK: function() {
                $(this).dialog('close');
                x = $('#obserText').val();
                $('#obser' + id).val(x);

            }
        }
    };

    $('.addObs').click(function(){
        x = this.id.split('_');
        y = '[' + x[0] + '][' + x[1] + ']';

        // If the hidden file exists, show its value
        // It should show the dialog again to allow edit the comment, but I'll leave it until later
        if (document.getElementById('obser' + y))
        {
            alert ($('#obser' + y).val());
        }
        //If not...
        else
        {
            //Create it
            $(this).parent().prepend('<input type="hidden" id="obser' + y + '"/>');

            //Show the dialog
            dialog = $('<div></div>')
                .html('<textarea id="obserText"></textarea>')
                .dialog(opciones);


        }

I don’t know how to pass the ID to save the comment into its hidden input.

Thanks in advance and sorry for my english

Answer 1

test with these modifications:

var opciones = {
        title: 'Add comment',
        modal: true,
        buttons: {
            OK: function() {
                $(this).dialog('close');
                x = $('#obserText').val();
                $('#obser' + id).val(x);
            }
        }
};

$('.addObs').click(function(){

  var id = this.attr("id");
  var x = id.split('_');
  var y = '[' + x[0] + '][' + x[1] + ']';

  // If the hidden file exists, show its value
  // It should show the dialog again to allow edit the comment, but I'll leave it until later
  if ($('#obser_' + id).length>0)
  {
    alert($('#obser_' + id).val());
  }
  else  //If not...
  {
    //Create it
    $(this).parent().prepend("<input type=\"hidden\" id=\"obser_" + id + "\" />");

    //Show the dialog
    if ($("#obserText").length>0)
      $("#obserText").remove();     

    var xdialog = $("<div></div>").html("<textarea id=\"obserText\"></textarea>");
    xdialog.dialog(opciones);
  }
}