CODEWITHSUNDEEP
javascriptdojo
Amos M. Carpenter
Amos M. Carpenter

Reputation: 4958

Dojo InlineEditBox clears on click if initial value set programmatically

A Dojo InlineEditBox allows users to click on a piece of text, turning it into an edit box and allowing the text to be edited (and then the changes can be saved or cancelled).

In my case, I need to override the initial value of the text box programmatically (from a REST call, actually). A dojo bug (I assume) causes the InlineEditBox to be reset to the initial value when you click it, and you're left "editing" a text box with different text from the text that was in there before you clicked - not the best UX. Dojo seems to save the value when the InlineEditBox is first created before the value is set programmatically, and then applies that initial value when the box switches to edit mode.

So if I have a div, say with text "initial" and id="testDiv", and this in my JavaScript:

require(["dijit/InlineEditBox", "dijit/form/Textarea", "dojo/domReady!"],
    function(InlineEditBox, Textarea) {
  var editBox = new InlineEditBox({
    editor: Textarea,
    autoSave: false
  }, "testDiv").startup();
  var editText = "Click to edit text...";
  dojo.byId("testDiv").innerHTML = editText; // <-- what can I do instead?
});

Then in its normal state, the box contains "Click to edit text...", but when I click to edit that text, I'm left editing the text "initial" instead.

Here's a fiddle demonstrating the problem.

So my question is: how do I set the "saved value" of a Dojo InlineEditBox to override the initial value it saves on creation? (In my case I leave the div empty and the box is cleared when in edit mode.) I've played around in the console and can see a bunch of things I can do with the box object, and I've looked through the documentation, but can't find a way to set the value other than assigning something to its innerHTML.

The call to retrieve the value I want to set is asynchronous, so I can't set it at the time the box is created, it would have to be just afterwards. Happy to consider moving from Dojo 1.7 to a newer version if there's no other way, but it would mean a fair bit of regression testing, so if possible I'd want this to work with 1.7.

Upvotes: 0

Views: 126

Answers (1)

barbsan
barbsan

Reputation: 3458

It's not a bug - just improper use of widget. In fact, text node (before doubleclick) and textarea in edit mode are two different DOM elements. If you assign one's innerHTML property, second one remains unchanged.

Instead of assigning text to innerHTML, set widget's value:

require([
  "dijit/InlineEditBox", "dijit/form/Textarea", "dojo/domReady!"
], function(InlineEditBox, Textarea) {
  var editBox = new InlineEditBox({
    editor: Textarea,
    autoSave: false
  }, "testDiv");
  editBox.startup();
  var editText = "Click to edit text...";
  editBox.set("value", editText);
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" />
<div id="testDiv">initial</div>

Upvotes: 1

Related Questions