get inner html out of editable div in asp.net

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

score 1 · Accepted Answer · edited May 23 '17 at 11:56

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.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 18 '13 at 13:24

Brian Mains

50,520
35
148
257

Thanks, that really does the job of delaying execution, but there's another problem : now that the text in the div has been edited and I want the updated value, I get the initial instead. I guess, I have to save it to some hidden control or viewstate much earlier : on some certain event... – user2082616 Feb 18 '13 at 14:20
Are you saying on postback to the server? – Brian Mains Feb 18 '13 at 14:28
@user2082616 I would have thought that you had to save it to a hidden control much *later*, i.e. right before postback. – Ann L. Feb 18 '13 at 15:01
Yes, right before postback. Anyways, I need to get the updated value when submit button is pressed. – user2082616 Feb 18 '13 at 15:14
DIV's do not post content to the server, so yes, you would have to store the value in a hidden to get it back to the server. an is perfect for this because you can easily talk to it on client and server. You may have to serialize the results in order to get them to post. By default, asp.net disables HTML markup from being posted back to the server (to prevent malicious content), but you can disable that. – Brian Mains Feb 18 '13 at 15:32
but how and when do I copy the value from div to hidden field? I can update the hidden field value each time a key is pressed or some markup toolbar button gets clicked, but I guess there should be a way to store just the final value at some point – user2082616 Feb 18 '13 at 15:59
Good point. Maybe onblur, but I don't know if that works with editable. Maybe there is another new HTML 5 specific event that fires when this can happen too.. if not, keypress would be the only means. However, I have a question... why not use an input textbox, and style it like a DIV instead? All of these problems would go away then. An input posts changes back to the server without issue. – Brian Mains Feb 18 '13 at 18:26
Yes, I would use textbox for sure if it had not been for a need to save and display styled text. It should be possible to mark specific parts of text (let say, to underline them). I was also thinking about using one of the existing HTML editors like TinyMCE, but in fact I only need less than 10% of its functionality. That is why I chose editable div. Will try onblur event, thanks a lot! – user2082616 Feb 18 '13 at 19:41
Finally I gave up trying to re-invent the bicycle and decided to utilize functions from jquery rte editor, which is opensource (corresponding link : http://archive.plugins.jquery.com/project/lwRTE). When I am finished implementing the needed functionality, I will share the code. – user2082616 Feb 20 '13 at 13:01
I have slihtly modified the minimal version to meet my needs (eleminated built-in toolbar, added support for externally defined toolbar and made a few other minor changes). Aside from that, if you have the same problem, as described above, the mentioned editor (a more direct link : https://code.google.com/p/lwrte/) works just perfectly. Now I am not sure if it is an acceptable practice to answer own question, but if someone wants to see the modified .js and the corresponding markup, I will post them. – user2082616 Mar 27 '13 at 12:42

get inner html out of editable div in asp.net

1 Answers1