trying to use javascript to insert into a text area
I have an asp.net button which on click gets a value from a text box.
I want to then look up a value from the database and insert the value into a ajax html editor as '<img src='the looked up value'/>' at the point where the cursor currently is.
It is my understanding that to do this i need to use javascript.
I also understand that my problem is that the javascript will fire before the server code i thought if on server code I could register the javascript and then fire it once registered but im stuck on the last part.
am i going down the right line?
Code:
protected void btnInsert_Click(object sender, EventArgs e)
{
string imagelink = this.txtImageID.Text;
//Go Lookup actual URL from Umbraco
// Define the name and type of the client script on the page.
String csName = "ButtonClickScript";
Type csType = this.GetType();
// Get a ClientScriptManager reference from the Page class.
ClientScriptManager cs = Page.ClientScript;
// Check to see if the client script is already registered.
if (!cs.IsClientScriptBlockRegistered(csType, csName))
{
StringBuilder csText = new StringBuilder();
csText.Append("<script type=\'text/javascript\'>");
csText.Append("var editor = this._designPanel;");
csText.Append("var sel = editor._getSelection();");
csText.Append("var range = editor._createRange(sel);");
csText.Append("var parent = Sys.Extended.UI.HTMLEditor.getSelParent(editor); function DoClick() {");
csText.Append("if (Sys.Extended.UI.HTMLEditor.isIE) {");
csText.Append("var original = range.htmlText;");
csText.Append("if (original != '')");
csText.Append("range.pasteHTML('<img src='" + imagelink + "'></img>');");
csText.Append("}");
csText.Append("else {");
csText.Append("var edittext = sel.getRangeAt(0);");
csText.Append("if (edittext.toString() != '') {");
csText.Append("var h = document.createElement('img');");
csText.Append("edittext.surroundContents(h);");
csText.Append("}");
csText.Append("</");
csText.Append("script>");
cs.RegisterClientScriptBlock(csType, csName, csText.ToString());
//Now somehow raise an event which will cause the javascript to fire
}
Re: trying to use javascript to insert into a text area
So I have now added a second button which I intend to be invisible, I have it with an OnClientClick event run the DoClick event. Once I have run the click event of the visible button and executed the register client script as above I am calling the click event of the new button.
Code:
cs.RegisterClientScriptBlock(csType, csName, csText.ToString());
IPostBackEventHandler c = (IPostBackEventHandler)this.fakebutton;
c.RaisePostBackEvent(string.Empty);
The code runs without error but doesnt put anything into the editor, is my plan just wrong or is my javascrip just incorrect? Anyone help please?
Re: trying to use javascript to insert into a text area
Ok it seemed that the button being in an update panel was causing the client script tot to register and fire so I have now removed the update panel so the button executes a full page postback. I now have it so the button will output a simple alert on click.
My problem now is that rather than producing an alert I actually want to paste some html into the html editor but using the code below at the time the code runs editor is null presumably because the page hasnt fully loaded?
Code:
protected void btnInsert_Click(object sender, EventArgs e)
{
string imagelink = this.txtImageID.Text;
//Go Lookup actual URL from Umbraco
// Define the name and type of the client script on the page.
String csName = "ButtonClickScript";
Type csType = this.GetType();
// Get a ClientScriptManager reference from the Page class.
ClientScriptManager cs = Page.ClientScript;
// Check to see if the client script is already registered.
if (!cs.IsClientScriptBlockRegistered(csType, csName))
{
StringBuilder csText = new StringBuilder();
csText.Append("<script type=\'text/javascript\'>");
csText.Append("var editor = this._designPanel;");
//csText.Append("var sel = editor._getSelection();");
//csText.Append("var range = editor._createRange(sel);");
//csText.Append("var parent = Sys.Extended.UI.HTMLEditor.getSelParent(editor);");
//csText.Append("function DoClick() {");
csText.Append("alert('" + imagelink + "');");
// csText.Append("if (Sys.Extended.UI.HTMLEditor.isIE) {");
//csText.Append("var original = range.htmlText;");
//csText.Append("if (original != \'\')");
//csText.Append("range.pasteHTML(\'<img src=\'" + imagelink + "\'></img>\');");
csText.Append("}");
//csText.Append("else {");
//csText.Append("var edittext = sel.getRangeAt(0);");
//csText.Append("if (edittext.toString() != \'\') {");
//csText.Append("var h = document.createElement('img');");
//csText.Append("edittext.surroundContents(h);");
// csText.Append("}");
csText.Append("</script>");
cs.RegisterClientScriptBlock(csType, csName, csText.ToString());
}
Re: trying to use javascript to insert into a text area
What html editor are you using? Most of them have built in img insert feature and ways to configer an image gallery associated with it.
I googled and found this j script to insert at curser http://www.scottklarr.com/topic/425/...the-cursor-is/ Maybe that will do the trick for you.
I mainly use tinyMce editor and have configured it to use a popup image gallery before.
Re: trying to use javascript to insert into a text area
I am using the Ajax control toolkit Editor, I need to create my own button because the user is required to enter an ID into the field then I can look up the actual URL from a database.
Even when I just have the line
csText.Append("var editor = $find(_content_maincontent_EditCourseOutline_TabContainer1_TabPanelOverview_FreeTextBoxOverviewAJ_ct l02);");
I get an object undefined javascript error, presumably because at the time the script runs the control above hasnt been created by the page.
I need to somehow delay the script from running until the page has been fully loaded
Re: trying to use javascript to insert into a text area
I have now converted it to registerstartupscript and hard coded the editor name as below however the first line stil throws an error object cannot be converted to string
Code:
csText.Append("var editor = $find(maincontent_EditCourseOutline_TabContainer1_TabPanelOverview_FreeTextBoxOverviewAJ);"); csText.Append("var editPanel = editor.get_editPanel();");//csText.Append("if (editPanel.get_activeMode() == AjaxControlToolkit.HTMLEditor.ActiveModeType.Design) {");// get the DesignPanel's object//csText.Append("var designPanel = editPanel.get_activePanel();");// For 'Undo'// csText.Append("designPanel._saveContent();");// What to do - insert some text at current selection//csText.Append("designPanel.insertHTML(" + imagelink + ");");// Notify Editor about content changed and update toolbars linked to the edit panel//csText.Append("setTimeout(function() { designPanel.onContentChanged(); editPanel.updateToolbar(); }, 0);");// Ensure focus in design panel//csText.Append("designPanel.focusEditor();");csText.Append("alert('" + imagelink + "');");csText.Append("</script>");cs.RegisterStartupScript(csType, csName, csText.ToString());
Re: trying to use javascript to insert into a text area
Hello,
There should be no need to hard code the ID. If you are using RegsiterStartupScript, then at the point that you are doing that, you can grab the .ClientID of the control that you are interested in.
Gary