I am trying to learn the dijit editor. I want to replace an existing text area with dijit editor widget.So I wrote 2 jsps - one using the dijit.Editor which feeds another jsp with the editor contents. When I click submit the second jsp "result" comes up empty contents for the editor no matter what is typed in text area editor.
dijitEditor.jsp
<script type="text/javascript">
dojo.require("dijit.Editor");
dojo.require("dijit._editor.plugins.LinkDialog");
dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
</script>
<script type="text/javascript">
dojo.addOnLoad(function(){
alert("addOnLoad function");
dojo.connect(dojo.byId('form1'), 'onsubmit', function(){
dojo.byId('editorContent').value= dijit.byId('content').getValue();
alert("Hidden variable");
alert(dojo.byId('editorContent').value);
alert("Editor content");
alert(dijit.byId('content').getValue());
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
</head>
<body class=" claro ">
<FORM id="form1" METHOD=POST ACTION="result.jsp">
<table>
<tr>
<td>
<input type="hidden" name="editorContent" />
<div dojoType="dijit.Editor" id="content" onChange="console.log('editor1 onChange handler: ' + arguments[0])"
plugins="['foreColor','|','bold','italic','underline','|','createLink', 'unlink']"
extraPlugins="['dijit._editor.plugins.AlwaysShowToolbar']">
<p>
<b>This instance is created with a subset of functions enabled in the order
we want. </b>
</p>
</div>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" name="action"/>
</td>
</tr>
</table>
</form>
</body>
</html>
result.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html >
<head>
<title>Editor contents </title>
</head>
<body>
<%
String val = request.getParameter("editorContent");
out.println("Dijit editor contents ="+val);
%>
</body>
</html>
Instead of binding it to the form's onsubmit
, try doing it via the widget's onChange
Give your hidden field an id:
<input type="hidden" name="editorContent" id='editorContent' />
Try this for the Editor's onChange
(replacing the console.log()
code you have there now.
onChange="dojo.byId('editorContent').value = this.getValue();"
Wait! As I was typing this I realized you are calling dojo.byId('editorContent')
in your onsubmit
but you have not assigned the id
attribute to that form field. That's probably your issue and you needn't try my onChange
method.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With