nicEdit and onchange

Discussion in 'Javascript' started by Fergus McMenemie, Jun 16, 2009.

  1. Hi,

    I have used the nicEditor (from http://nicedit.com/) within a
    page to convert a textarea into a rich text editor. Works OK.
    However the onchange event I had tied to the textarea no longer
    works.

    I was wondering if anybody knew what I could do to get this
    functionality back.

    ======Here is a snip of example code========

    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>title</title>
    <script language="JavaScript" src="/utils/jslib/jquery-1.2.6.min.js"
    type="text/javascript"></script>
    <script language="JavaScript" src="/utils/jslib/nicEdit/nicEdit.js"
    type="text/javascript"></script>
    <script language="JavaScript" type="text/javascript">
    bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
    <script language="JavaScript" type="text/javascript">
    function enubmit(name) {
    unsaved_changes=true;
    alert(name +" has changed\n");
    }
    </script>
    </head>

    <body>
    <form id="guest_detail_form" onSubmit="return false;">

    <input type="text" name="surname" onchange="enubmit('surname');" />
    <!-- lots and lots of snipped stuff -->
    <br />
    <textarea name="email" id="comment" onchange="enubmit('comment');">
    hello world</textarea>
    </form>
    </body>
    Fergus McMenemie, Jun 16, 2009
    #1
    1. Advertising

  2. Fergus McMenemie wrote:
    > I have used the nicEditor (from http://nicedit.com/) within a
    > page to convert a textarea into a rich text editor. Works OK.
    > However the onchange event I had tied to the textarea no longer
    > works.


    "Doesn't work" is a useless error description. Doesn't work *how* (error
    message), *where* (runtime environment), *when* (preconditions of failure)?

    > I was wondering if anybody knew what I could do to get this
    > functionality back.


    <http://jibbering.com/faq/#posting>

    > ======Here is a snip of example code========
    >
    > !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">


    The first line must start with a `<' for a proper declaration.

    > <html>
    > <head>
    > <title>title</title>
    > <script language="JavaScript" src="/utils/jslib/jquery-1.2.6.min.js"
    > type="text/javascript"></script>

    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    Most certainly that's one reason. jQuery is junk, and jQuery before 1.3
    is even more junk. Search the archives.

    > <script language="JavaScript" src="/utils/jslib/nicEdit/nicEdit.js"
    > type="text/javascript"></script>


    You don't expect anyone to wade through this *for* *free*, do you?

    > <script language="JavaScript" type="text/javascript">
    > bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
    > <script language="JavaScript" type="text/javascript">


    Neither `script' element requires the deprecated `language' attribute.

    > function enubmit(name) {
    > unsaved_changes=true;

    ^^^^^^^^^^^^^^^
    I presume that identifier is declared somewhere above?

    > alert(name +" has changed\n");


    window.alert(...);

    > }
    > </script>
    > </head>
    >
    > <body>
    > <form id="guest_detail_form" onSubmit="return false;">


    Not Valid. But you don't appear to need a form here anyway.

    > <input type="text" name="surname" onchange="enubmit('surname');" />

    ^
    Unwise. This is *HTML*, remember?

    > <!-- lots and lots of snipped stuff -->


    .... that may still be relevant. But fix your markup first.

    > <br />


    Again, it's declared *HTML*, not XHTML.

    <http://validator.w3.org/>

    > <textarea name="email" id="comment" onchange="enubmit('comment');">
    > hello world</textarea>
    > </form>
    > </body>


    PointedEars
    Thomas 'PointedEars' Lahn, Jun 16, 2009
    #2
    1. Advertising

  3. Thomas 'PointedEars' Lahn <> wrote:

    > Fergus McMenemie wrote:
    > > I have used the nicEditor (from http://nicedit.com/) within a
    > > page to convert a textarea into a rich text editor. Works OK.
    > > However the onchange event I had tied to the textarea no longer
    > > works.

    >
    > "Doesn't work" is a useless error description. Doesn't work *how* (error
    > message), *where* (runtime environment), *when* (preconditions of failure)?


    Boy-oh-boy did you have fun with that! I guess you are making the
    most of FAQ point about neccessary rudeness:)

    I include another version of the code which has been adjusted to
    take account of your points. My question is basically how do I
    provide rich text editing functionality within a HTML form? Having
    traweled the web I ended up with nicEdit, which works OK. It is
    just that I have lost the ability to detect changes to the textarea.

    I was wondering if anybody had ideas on how I might get it back.
    The example code does nothing, by which I mean enubmit() is not called
    for changes to the textarea. I was hoping somebody on this list
    would have experience with nicEdit and have sorted what I consider
    to be a common issue. I am using firefox 3.0.10

    I am also keen to hear about any alternatives to nicEdit.

    PS> I have attempted to post this to the nicEdit forums but cant
    get them to work.

    ======Here is a snip of example code========
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>title</title>
    <script type="text/javascript" src="/utils/jslib/nicEdit/nicEdit.js">
    </script>
    <script type="text/javascript">
    bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
    <script type="text/javascript">
    function enubmit(name) { alert(name +" has changed\n"); } </script>
    </head>
    <body>
    <form id="guest_detail_form" onSubmit="return false;" >
    <input size="40" type="text" name="surname" id="surname"
    onchange="enubmit('surname');">
    <!-- lots and lots of snipped stuff -->
    <br>
    <textarea rows="15" cols="100" name="email" id="comment"
    onchange="enubmit('comment');">
    hello

    world
    </textarea>
    </form>
    </body>
    Fergus McMenemie, Jun 18, 2009
    #3
  4. Fergus McMenemie wrote:
    > Thomas 'PointedEars' Lahn <> wrote:
    >> Fergus McMenemie wrote:
    >>> I have used the nicEditor (from http://nicedit.com/) within a
    >>> page to convert a textarea into a rich text editor. Works OK.
    >>> However the onchange event I had tied to the textarea no longer
    >>> works.

    >> "Doesn't work" is a useless error description. Doesn't work *how* (error
    >> message), *where* (runtime environment), *when* (preconditions of failure)?

    >
    > Boy-oh-boy did you have fun with that! I guess you are making the
    > most of FAQ point about neccessary rudeness:)


    No. You should read the FAQ for a change, especially
    <http://www.jibbering.com/faq/faq_notes/clj_posts.html#ps1DontWork>

    Please don't come back until then.


    Score adjusted

    PointedEars
    Thomas 'PointedEars' Lahn, Jun 18, 2009
    #4
  5. Thomas 'PointedEars' Lahn <> wrote:

    > > Boy-oh-boy did you have fun with that! I guess you are making the
    > > most of FAQ point about neccessary rudeness:)

    >
    > No. You should read the FAQ for a change, especially
    > <http://www.jibbering.com/faq/faq_notes/clj_posts.html#ps1DontWork>


    I had read the FAQ, it was rather good and I learnt a lot.

    But I guess I will have to give up on nicEdit, or perhaps perform
    my own before/after comparison of the textarea to see if it has
    changed.

    Bye-bye.
    Fergus McMenemie, Jun 18, 2009
    #5
  6. Fergus McMenemie

    Tim Down Guest

    On Jun 18, 11:34 am, (Fergus McMenemie)
    wrote:
    > Thomas 'PointedEars' Lahn <> wrote:
    >
    > > Fergus McMenemie wrote:
    > > > I have used the nicEditor (fromhttp://nicedit.com/) within a
    > > > page to convert a textarea into a rich text editor. Works OK.
    > > > However the onchange event I had tied to the textarea no longer
    > > > works.

    >
    > > "Doesn't work" is a useless error description.  Doesn't work *how* (error
    > > message), *where* (runtime environment), *when* (preconditions of failure)?

    >
    > Boy-oh-boy did you have fun with that! I guess you are making the
    > most of FAQ point about neccessary rudeness:)
    >
    > I include another version of the code which has been adjusted to
    > take account of your points. My question is basically how do I
    > provide rich text editing functionality within a HTML form? Having
    > traweled the web I ended up with nicEdit, which works OK. It is
    > just that I have lost the ability to detect changes to the textarea.
    >
    > I was wondering if anybody had ideas on how I might get it back.
    > The example code does nothing, by which I mean enubmit() is not called
    > for changes to the textarea. I was hoping somebody on this list
    > would have experience with nicEdit and have sorted what I consider
    > to be a common issue. I am using firefox 3.0.10
    >
    > I am also keen to hear about any alternatives to nicEdit.
    >
    > PS> I have attempted to post this to the nicEdit forums but cant
    > get them to work.
    >
    > ======Here is a snip of example code========
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head>
    > <title>title</title>
    > <script type="text/javascript" src="/utils/jslib/nicEdit/nicEdit.js">
    > </script>
    > <script type="text/javascript">
    >    bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
    > <script type="text/javascript">
    >    function enubmit(name) { alert(name +" has changed\n"); } </script>
    > </head>
    > <body>
    > <form id="guest_detail_form" onSubmit="return false;" >
    >    <input size="40" type="text" name="surname" id="surname"
    >           onchange="enubmit('surname');">
    >    <!-- lots and lots of snipped stuff -->
    >    <br>
    >    <textarea rows="15" cols="100" name="email" id="comment"
    >               onchange="enubmit('comment');">
    > hello
    >
    > world
    >    </textarea>
    >    </form>
    > </body>



    I would imagine you're getting no notifications of the textarea's
    value changing because it isn't changing. I don't know nicEdit but if
    it's anything like most JavaScript-based rich text editors for the web
    then it will be replacing or hiding the textarea in the document, and
    the content that the user edits is inside an iframe. The editor itself
    may or may not have some functionality your code can use to be
    notified that the editor's content has changed - you'll need to check
    the documentation.

    Tim
    Tim Down, Jun 18, 2009
    #6
  7. Tim Down <> wrote:

    > > ======Here is a snip of example code========
    > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > > "http://www.w3.org/TR/html4/strict.dtd">
    > > <html>
    > > <head>
    > > <title>title</title>
    > > <script type="text/javascript" src="/utils/jslib/nicEdit/nicEdit.js">
    > > </script>
    > > <script type="text/javascript">
    > > bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
    > > <script type="text/javascript">
    > > function enubmit(name) { alert(name +" has changed\n"); } </script>
    > > </head>
    > > <body>
    > > <form id="guest_detail_form" onSubmit="return false;" >
    > > <input size="40" type="text" name="surname" id="surname"
    > > onchange="enubmit('surname');">
    > > <!-- lots and lots of snipped stuff -->
    > > <br>
    > > <textarea rows="15" cols="100" name="email" id="comment"
    > > onchange="enubmit('comment');">
    > > hello
    > >
    > > world
    > > </textarea>
    > > </form>
    > > </body>

    >
    >
    > I would imagine you're getting no notifications of the textarea's
    > value changing because it isn't changing. I don't know nicEdit but if
    > it's anything like most JavaScript-based rich text editors for the web
    > then it will be replacing or hiding the textarea in the document, and
    > the content that the user edits is inside an iframe. The editor itself
    > may or may not have some functionality your code can use to be
    > notified that the editor's content has changed - you'll need to check
    > the documentation.


    Thanks for the reply.

    Agreed. The nicEditor docs state that the contents of it's panel
    and the associated textarea as synchronised onsubmit. However I
    need it before then, there is not much more written on the issue.
    I am having bother posting to the nicEditor forum and only posted
    here on the off chance that somebody else had run into the same
    issue.

    Thanks Fergus.
    Fergus McMenemie, Jun 22, 2009
    #7
  8. Fergus McMenemie

    arctirux

    Joined:
    Jan 20, 2014
    Messages:
    1
    Hey, I was having the same problem with nicEdit but managed to fix it. As for my case I wanted to be able to copy that content into another DIV.

    function COPY_STRING_TO_HTML(SOURCE, DIV) {
    $(DIV).fadeOut(1000).html($(SOURCE).html()).fadeIn(1000);
    }

    $(document).ready(function() {

    $( "#doapreview" ).mousemove(function() { COPY_STRING_TO_HTML('.nicEdit-main','#elementpreview1'); });

    )}

    DO NOT FORGET, THE NAME OF THE DIV THAT CONTAINS THE TEXT IS .nicEdit-main AND NOT YOUR TEXTAREA CLASS

    I have used it on my form like this techlab.co.ke/?Page=Blog&Create_Post=1&Title=Guest%20Post
    arctirux, Jan 20, 2014
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. saurabh

    onchange and onclick event

    saurabh, Jul 28, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    759
    saurabh
    Jul 28, 2006
  2. James Radke

    DropDownList and Client Side OnChange - help!

    James Radke, Oct 6, 2003, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    1,474
    Jeffrey Tan[MSFT]
    Oct 8, 2003
  3. Michael McGrew

    Dynamic Select and onChange

    Michael McGrew, Dec 13, 2006, in forum: ASP General
    Replies:
    3
    Views:
    267
    Anthony Jones
    Dec 14, 2006
  4. Phil Powell
    Replies:
    2
    Views:
    179
    Phil Powell
    Sep 25, 2003
  5. Mark

    onchange AND onblur AND onkeypress

    Mark, Aug 22, 2007, in forum: Javascript
    Replies:
    2
    Views:
    276
Loading...

Share This Page