Results 1 to 7 of 7

Thread: trying to use javascript to insert into a text area

  1. #1

    Thread Starter
    Frenzied Member FishGuy's Avatar
    Join Date
    Mar 2005
    Location
    Bradford UK
    Posts
    1,708

    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
            }

  2. #2

    Thread Starter
    Frenzied Member FishGuy's Avatar
    Join Date
    Mar 2005
    Location
    Bradford UK
    Posts
    1,708

    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?

  3. #3

    Thread Starter
    Frenzied Member FishGuy's Avatar
    Join Date
    Mar 2005
    Location
    Bradford UK
    Posts
    1,708

    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());
            }

  4. #4
    Frenzied Member brin351's Avatar
    Join Date
    Mar 2007
    Location
    Land Down Under
    Posts
    1,293

    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.
    The problem with computers is their nature is pure logic. Just once I'd like my computer to do something deluded.

  5. #5

    Thread Starter
    Frenzied Member FishGuy's Avatar
    Join Date
    Mar 2005
    Location
    Bradford UK
    Posts
    1,708

    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
    Last edited by FishGuy; May 16th, 2011 at 04:50 AM.

  6. #6

    Thread Starter
    Frenzied Member FishGuy's Avatar
    Join Date
    Mar 2005
    Location
    Bradford UK
    Posts
    1,708

    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());

  7. #7
    ASP.NET Moderator gep13's Avatar
    Join Date
    Nov 2004
    Location
    The Granite City
    Posts
    21,963

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width