CODEWITHSUNDEEP
javascriptasp.nethtmlcontenteditable
usr4896260
usr4896260

Reputation: 1507

asp.net programmatically get text inside dynamic div

I'm trying to get the text of a div on creating dynamically in asp.

below is an example of the html table created by my datagrid:

<table border="1" id="MainContent_dgValues" style="border-collapse:collapse;">
    <tbody><tr>
        <td>Date Modified<td>Comment</td><td></td>
    </tr><tr>
        <td>3/26/2000</td><td id="myEdit" onclick="makeEditable()">My Text</td><td><a href="javascript:__doPostBack('ctl00$MainContent$dgValues$ctl03$ctl00','')">Update</a></td>
    </tr><tr>
    </tr>
</tbody></table>

This is the code I have for my div created dynamically:

 <script >

     function makeEditable() {
         var divTag = document.createElement("div");
         divTag.setAttribute("id", "editdiv");
         divTag.setAttribute("runat", "server");
         divTag.setAttribute("contenteditable", "true");
         var s = document.getElementById("myEdit").innerHTML;
         document.getElementById("myEdit").innerHTML = "";
         var mytext = document.createTextNode(s)
         divTag.appendChild(mytext);
         document.getElementById('myEdit').appendChild(divTag);
         document.getElementById('myEdit').removeAttribute("onclick");
     }
     </script>

This creates a contenteditable div inside the td where it says My Text

Once the update on the table is clicked, I then wish to grab the text within the div in my code:

    protected void dgValues_EditCommand(object source, DataGridCommandEventArgs e)
    {
            // Get div text here
    }

Please help.

Upvotes: 1

Views: 618

Answers (2)

usr4896260
usr4896260

Reputation: 1507

Thanks, I was able to do it, but there was a bit more work needed. In short, I populating a asp data grid and I would like to have where the use clicks on a td (generated by the data grid), they would be able to edit the contents.

I used HTML5's contenteditable however, its not compatible with IE 10 inside a td. So using the code and the answer suggested above, I made a div when the td was clicked using js. I then had trouble copying the contents of the div to a hidden input before my edit button within the data grid submitted. The following is the extra steps needed to do it.

<input enableviewstate="false" id="myComment" type="hidden" runat="server"    />

protected void Page_Load(object sender, EventArgs e) {

        if (!Page.IsPostBack)
        {
        /**
         Create a script when a submit occurs, grabs div and places the text to a hidden input.
         **/
        string scriptKey = "OnSubmitScript";
        string javaScript = "var divTag = document.getElementById('editdiv'); var hiddenInputTag = document.getElementById('MainContent_myComment'); hiddenInputTag.setAttribute('value', divTag.innerHTML); ";
        this.ClientScript.RegisterOnSubmitStatement(this.GetType(), scriptKey, javaScript);
        }
}

protected void dgValues_EditCommand(object source, DataGridCommandEventArgs e)
{
        // Now gets the hidden input value
        String newComment = myComment.Value;

}

Upvotes: 1

suff trek
suff trek

Reputation: 39767

Since DIV is client-side only, as it is you cannot pass it to backend code. What you can do is on update click first catch a client-side click event and copy content of the DIV into hidden field. Then when form posts back - content of the hidden field will be available to the server-side code.

Upvotes: 2

Related Questions