多jQuery的用戶界面的對話框工作

Question

我有一個表像這樣大量的文本輸入： alt text http://img380.imageshack.us/img380/6697/snapsh.png

（他們的測試標記幾個學生）。

每個字段都有添加評論相關的圖標，所以點擊圖標時，必須用一個文本顯示一個對話框，然後將其值保存到一個隱藏的輸入。

標記字段的示例：

<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> 

每一個環節是確定與studentID_itemID

這是我的編碼，但它並沒有在所有的工作。

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); 


     } 

我不知道如何傳遞ID以將註釋保存到其隱藏的輸入中。

在此先感謝和抱歉，對於這些修改，我的英語

Answer 1

測試：

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

Answer 2

我想我已經知道了，ID與支架是一個壞主意。我已經改名爲適當的X和Y：d

var raw_id, split_id; 

    var options = { 
     title: 'Add comment', 
     modal: true, 
     buttons: { 
      OK: function() { 
       $(this).dialog('close'); 
       valor = $('#otext' + raw_id).val(); 
       $('#obser' + raw_id).val(valor); 
       //console.log($('#obser' + raw_id).val()); 
       if (valor) 
       { 
        $('a#' + raw_id).find('img').attr('src', base_url + 'assets/img/observacion_on.png'); 
       } 
       else 
       { 
        $('a#' + raw_id).find('img').attr('src', base_url + 'assets/img/observacion.png'); 
       } 

      }, 
      Cancel: function() { 
       $(this).dialog('close'); 
      } 
     } 
    };  

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

     raw_id = this.id; 
     split_id = raw_id.split('_'); 
     prep_id = '[' + split_id[0] + '][' + split_id[1] + ']'; 


     if ($('#obser' + raw_id).length > 0) 
     { 
      //console.log($('#obser' + raw_id).val()); 
      var dlg = $('<div></div>').html('<textarea id="otext' + raw_id + '">' + $('#obser' + raw_id).val() + '</textarea>'); 
      dlg.dialog(options); 

     } 
     else 
     { 
      $(this).parent().prepend('<input type="hidden" id="obser' + raw_id + '" name="obser' + prep_id +'" />'); 

      var dlg = $('<div></div>').html('<textarea id="otext' + raw_id + '"></textarea>'); 
      dlg.dialog(options); 
     } 
    }); 

但現在編輯評論不起作用