Hideable Comments box

Question

I have a time tracking sheet application. In this I will display dates in a week on X axis (on top) and Tasks on Y-axis (downwards). As shown below, I will give a @ icon after every text box for entering comments against each entry.

****************************************************
#    |  Sun | Mon  | Tue  | Wed | Thu |  Fri | Sat |
****************************************************
Task1 ____@ _____@ _____@ _____@_____@______@______@     
Task2 ____@ _____@ _____@ _____@_____@______@______@

So On clicking this @ icon I need to open a floating (or any other type of text box) for entering comments).This needs to be hidden after pressing X mark on the opened one. As you will expect I need to store this user entered comments to send to database. So how can I store these comments as array variables. I have completed coding for Task entering and the total table. But I am not able to figure out how to open a floating text box at the position of particular @ icon. And also after hiding them I am not getting efficient way of storing these comments against these particular Tasks for a particular day.

My sample Javascript:

function comment(id,day)
{
var textinput="<div id='closeit'>
                  Comments:<input type='text' name='comm["+id+"]["+day+"]' />
               </div>
               <div id='closing' onclick='closecomment("+id+","+day+")'>X
               </div>";
              $('#comms').html(textinput);
}
function closecomment(id,day)
{
        var str='"comm['+id+']['+day+']"';
        var element = document.getElementById(str);
        alert(element.value);
        closeit.style.visibility='hidden' // this is for hiding
    closing.style.visibility='hidden' // this is for hiding
    var newelement = document.getElementById(str);
    alert(newelement.value); //I am able to get the value but I am looking for         storing  it and filling the same text box when it is accessed again
}

My sample HTML:

<input type="text" id="comm[0][0]" />
<input type="text" id="comm[0][1]" />
<input type="text" id="comm[1][0]" />
<input type="text" id="comm[1][1]" />

Please help me with any examples which can work on IE6 or IE7 or 8. My environment is PHP (CodeIgniter framework), JQUERY, XAMPP.

Answer 1

For the storing part, you don't have to use an array at all. Just add a hidden input next to every '@' link (or anywhere in the page, for that matter) with a meaningful name. When you close the floating div, put the comment into the hidden input. Then your php file will be able to read and process these values on submission.

Displaying a floating div is just a matter of absolute (or relative, if you want to display next to the table cells) positioning. Try this css:

div#comms {
  position: absolute;
  width: 300px;
  left: 50%;
  margin-left:-100px;
  height: 200px;
  top: 50%;
  margin-top:-150px;
}

Answer 2

I think there are several jQuery plugins for what you're trying to achieve. Have a look at this search page: http://plugins.jquery.com/search/node/inline+edit

Nander