A while ago I blogged about making the freetextbox work inside an updatepanel. I didn’t put the code at that time because it wasn’t what it should be.
For the NBlogr engine I do need a working version of that control. And it should work on firefox and internet explorer. Now I have it somewhat working. I thought it would be best to share this, as I’m sure that there are others that are facing the same problem.
You basically wrap it in an iframe so that it loads it’s script in a page that does not have an update panel on it.
through javascript you get the value of the entered in the freetextbox and set it in an hiddenfield. and voila you’re done.
FreeTextBoxWrapper.ascx :
<
iframe
runat
=”server”
id
=”ifrmTxt”
width
=”600″
height
=”400″
frameborder
=”0″
>
iframe
>
<
asp
:
HiddenField
ID
=”hfFtbValue”
runat
=”server”
/>
And the codebehind for the ascx :
12 [ValidationProperty("Text")]
13 publicpartialclassApp_Components_FreeTextBoxWrapper : System.Web.UI.UserControl
14 {
15 publicstringText
16 {
17 get
18 {
19 returnhfFtbValue.Value;
20 }
21 set
22 {
23 hfFtbValue.Value = value;
24 }
25 }
26 publicstringWidth
27 {
28 get
29 {
30 returnifrmTxt.Attributes["width"];
31 }
32 set
33 {
34 ifrmTxt.Attributes["width"] = value;
35 }
36 }
37 publicstringHeight
38 {
39 get
40 {
41 returnifrmTxt.Attributes["height"];
42 }
43 set
44 {
45 ifrmTxt.Attributes["height"] = value;
46 }
47 }
48 protectedvoidPage_Load(objectsender, EventArgse)
49 {
50 //load the freetextbox page that has no theme and no masterpage set. The background color is the one I chose to blend in with my design
51 ifrmTxt.Attributes["Src"] = ResolveUrl(string.Format(“~/App_Components/FreeTextBox.aspx?hf={0}&w={1}&h={2}”, hfFtbValue.ClientID,Width,Height));
52 ifrmTxt.Attributes["Name"] = ifrmTxt.ClientID;
53
54 if (!IsPostBack)
55 {
56 Session[hfFtbValue.ClientID] = hfFtbValue.Value;
57 }
58 }
59
60 protectedoverridevoidOnDataBinding(EventArgse)
61 {
62 base.OnDataBinding(e);
63 Session[hfFtbValue.ClientID] = hfFtbValue.Value;
64 }
65 }
And the page that contains the freetextbox control :
<%
@
Page
Language
=”C#”
AutoEventWireup
=”true”
Theme
=”"
CodeFile
=”FreeTextBox.aspx.cs”
Inherits
=”App_Components_FreeTextBox”
ValidateRequest
=”false”
%>
DOCTYPE
html
PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<
html
xmlns
=”http://www.w3.org/1999/xhtml”
>
<
head
runat
=”server”>
<
title
>
A wrapper for the freetextbox in an atlas:updatepanel
title
>
<
style
type
=”text/css”>
body
{
background
:
#ffdaa0
;//Set your color here
margin
:
0
;
}
style
>
head
>
<
body
>
<
form
id
=”form1″
runat
=”server”>
<
div
>
<
FTB
:
FreeTextBox
ID
=”ftb”
runat
=”server”
SupportFolder
=”~/”
ClientSideTextChanged
=”onFtbClientTextChanged”>
FTB
:
FreeTextBox
>
div
>
<
script
type
=”text/javascript”>
//The lengthy constructor is there so that firefox also knows where to get the text.
function
onFtbClientTextChanged
(){
window
.
parent
.
document
.
getElementById
(
‘<%= MainPageField %>’
).
value
=
document
.
getElementById
(
‘<%= ftb.ClientID %>_designEditor’
).
contentWindow
.
document
.
body
.
innerHTML
;
};
if
(
navigator
.
userAgent
.
indexOf
(
“Firefox”
)!=-1)
document
.
getElementById
(
“<%= ftb.ClientID %>_htmlEditorArea”
).
addEventListener
(
‘change’
,
onFtbClientTextChanged
,
true
);
//for firefox
script
>
form
>
body
>
html
>
With it’s codebehind:
12 publicpartialclassApp_Components_FreeTextBox : System.Web.UI.Page
13 {
14 protectedstringMainPageField;
15
16 protectedvoidPage_Load(objectsender, EventArgse)
17 {
18 MainPageField = Request.QueryString["hf"];
19
20 if (!IsPostBack)
21 {
22 //When the page first loads we need to set the freetextbox with the value from the hiddenfield for databinding etc.
23 stringsetTextScript = string.Empty;
24 if(Request.Browser.Browser != “IE”)//for firefox we need to reach the freetextbox design editor to place our html
25 setTextScript = string.Format(“document.getElementById(‘{0}_designEditor’).contentWindow.document.body.innerHTML = window.parent.document.getElementById(‘{1}’).value;\r\n”, ftb.ClientID, MainPageField);
26 else
27 setTextScript = string.Format(“document.getElementById(‘{0}’).innerHTML = window.parent.document.getElementById(‘{1}’).value;\r\n”, ftb.ClientID, MainPageField);
28
29 Page.ClientScript.RegisterStartupScript(this.GetType(), “setText”, setTextScript, true);
30 ftb.Text = Session[MainPageField].ToString();
31 }
32 //Set the width to 99% so that the freetextbox displays completely
33 ftb.Width = Unit.Percentage(99);
34
35 //Get the height and widht and set the height relative to the width of the iframe (the toolbars move)
36 intheight = int.Parse(Request.QueryString["h"]);
37 intwidth = int.Parse(Request.QueryString["w"]);
38 if (width < 550)
39 ftb.Height = Unit.Pixel(height – 130);
40 elseif (width < 600)
41 ftb.Height = Unit.Pixel(height – 120);
42 else
43 ftb.Height = Unit.Pixel(height – 90);
44
45 }
46
47 }
Hi. Ive found that the iframe solution works for small amounts of text and not sure at all about formatting. Im revamping an old site/project and that uses the Freetextbox control. Much of the site now uses ajax, however, im still unable to get the freetextbox control working just right in a updatepanel, even using the iframe workaround.
Basically I set the hiddenfields value to the article text, it has alot of formatting and quite long. This works fine, but it seems when the textbox has to actually get the value of the hiddenfield it cant. Im assuming it cant put so much text or cant handle all the formatting in the javascript setTextScript = string.Format("document.getElementById(‘{0}’).innerHTML = window.parent.document.getElementById(‘{1}’).value;\r\n", ftb.ClientID, MainPageField);
or
Page.ClientScript.RegisterStartupScript(this.GetType(), "setText", setTextScript, true);
I however can pass small amount of text through without any HTML tags for formatting.
Any ideas would or a solution would be much appreciated, thanks.
Hi Sean,
I’ve had all sorts of problems with the freetextbox control. In the end I just ditched it and am working with tinyMCE for the moment to do my ajaxy stuff. I also don’t work with atlas anymore.
I think you should be able to get the values of the textbox by encoding them during transport.
Do a google for javascript encoding and .net url encoding there are a couple of extra characters you need to encode and that should get rid of the problem with the html tags.
Cheers
Ivan
Hi ivan,
I have a FTB in my page and when i click a button a label’s text is updated with the FTB text, and that label is inside an asp update panel. now what my problem is that, when i click the button, the label’s text is updated but FTB content is not gonna be empty since it is not inside an update panel [ the only tags inside the update panel updates as we know] and i cannot put the FTB inside the update panel since it would not work after an update occurs [we know this]. Now i tried your code but since i have to display the content of the FTB in the same page itself [or inside an iframe] and a post back effect is not prefered in the context, i have to use some kinda ajax support . Any ideas/help would or a solution would be much appreciated.
thanks.
Ali
Hi Ali,
I found this on the freetextbox forums.
http://freetextbox.com/forums/thread/7984.aspx
Maybe that is a better solution than mine. I stopped using the freetextbox control because I don’t like the code that comes with it.
I found fck editor to be the best solution currently as a rich text control.