Question

I am relatively new to web development and completely new to ASP.NET Web Forms.
I have the following user control :

CSS:

div.textareaDiv {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 200px;
    padding: 2px;
    resize:both;
    width: 400px;
    word-wrap: break-word;
    word-break:normal;
}

Script :

function CatchEnterKey(e) {
        if (e.keyCode == 13) {
         e.stopPropagation();
         return false;
     }
     return true;
 }

Markup :

<div id='HtmlTextField' style="height:200px!important;"   class="textareaDiv"     onkeypress="CatchEnterKey(event);"  contenteditable="true" unselectable="off" runat="server"></div>;

And the following code-behind function gets called, when “submit” button on parent page is
pressed :

public string GetHtml()
        {
            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "gethtml", "alert($('.textareaDiv').html());", true);
                return null;
        }

The idea is to return inner html of the div through script execution, but currently I just want to figure out, why I am getting empty alert. Is it that the inner html of the div really gets emptied on postback, and I need to think of a different solution, or am I doing anything wrong?

Thanks in advance

Roman

Answer 1

See this post on SO. Switch your example to use RegisterStartupScript instead. The issue is that RegisterClientScriptBlock registers before the elements are rendered to screen, so the element isn’t even rendered when you run that code. RegisterStartupScript renders after all of the elements.

Also, JQuery also supports delaying running script until after everything is loaded. If you wrap your code with:

$(document).ready(function() { /* alert code here */ });

Or shorthand:

$(function() { /* alert code here */ });

This delays execution until document ready. That’s another alternative.