Dojo InlineEditBox clears on click if initial value set programmatically - javascript

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.

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>

Related

How do I get only the value of current input when prior input values were changed?

I have a modal with an accordion in it. There is an anchor tag for each image on the page that can open the modal window. Inside the modal, the accordion has slide switches where the user can choose to turn on or off a value for that image.
The undesired behavior occurs after one input has changed on a specific image. I am receiving the value of the input values that were previously changed as well.
What I would like to see is for each image to have it own values, that is, the values that were changed specific to that image. I shouldn't see the values from any other image. In addition, if I change the value of a specific image to
true, I don't want to see that value set to true for any other image. I hope this all makes sense. I'm not very savvy with JavaScript but I've tried to explain as best I can.
This is what the JavaScript looks like
$(".glyphicon-tags").on('click', function(){
var iid = $(this).data('iid'); // this is the imageId
$(".onoffswitch ").on("click", function(){
var tid = $(this).data('tid'); // this is the tagId
alert(iid + ' ' + tid);
});
});
Using
$(".onoffswitch ").off("click").on("click", function(){
should fix it.
The way you've got it now, every time glyphicon-tags is clicked, you just keep on adding extra event handlers for "onoffswitch" and never removing the old ones. Next time onoffswitch is clicked, it runs all the defined event handlers. Setting an event handler on an element doesn't remove the old one (unless you're running IE6 or something), it adds an extra one to the existing list of handlers.
The "off" method removes previously defined event handlers on an element. See http://api.jquery.com/off/ for more details of the options you can pass in etc.

Updating the value of a Brazos Input Text control client side

We have a CSHS with a Data Table and Global Filter exposed. After entering a value in the filter and limiting the table, they want to be able to click a button that opens a modal and have it available in an input text in the modal and, by doing so, have it bound to a local variable in the CSHS so it can be used in scripts.
I am able to get the value to show up in the modal (code a bit kludgy but it works) but the input text on the modal doesn’t seem to think it has changed and isn’t binding the value to the variable bound to the input text. Suggestions?
Here’s the code I’m using to get the Global Filter text to display on the modal input text: (added a class name of “searchValue” to the input text in the modal – only one data table on the CSHS so I can use the [0] index of getElementsByClassName)
var el = document.getElementsByClassName('searchValue')[0];
el.getElementsByTagName('Input')[0].value = document.getElementsByClassName("dataTables_filter")[0].firstChild.firstChild.nextSibling.value;
Try calling the jQuery .change() on the input text field after changing the value.
For example:
$("#input_div_1_1_1").val("test").change()

Ext JS 3.4 - Update Display field of a combobox without losing hidden value

So I have a combobox list populated with icons then a small description. Originally when I would select one item it would then put the html into the display as a raw value. Obviously having RAW html in the display wasn't what i wanted so i tried stripping the image tag and using the other information as the raw value.
This worked for display but the display and the value are different. (using a hiddenName field etc) and setting the raw value not only updates the display field but also updates the value. This is not acceptable.
On selecting an item I parse out the image tag and would like to ONLY update the display field. The problem here is there is no method i can find to ONLY update the display field and leave the hidden value alone.
How can i update the display field without messing with the hidden value field?
Update: I tried this....so close but no cigar...
select: function() {
console.log(this.el.dom.value);
this.el.dom.value = 'test';
}
This updated the display field to be 'test' but then for some magical reason when i click off of the combobox it sets my hidden value equal to my display value....any ideas?
Update 2: I have also tried suspending all events on the combobox by putting this.suspendEvents() at the end of the select listener....still no go. I cannot for the life of me figure out why the hidden value gets changed upon box blur. I have tried returning false in blue and change listener events.....preventDefault has no effect.
if you take a look at this link:
http://docs.sencha.com/extjs/4.2.1/source/ComboBox.html#Ext-form-field-ComboBox
there is function **setValue: function(value, doSelect) {...**
it has below lines somewhere::
me.setHiddenValue(processedValue);
me.setRawValue(me.getDisplayValue());
These lines are doing a magical stuff which you mentioned.
Now, to solve your problem, I guess you can do this:
select: function() {
console.log(this.el.dom.value);
var actualValue = this.el.dom.value;
this.el.dom.value = 'test';
this.setRawValue(actualValue );
this.setHiddenValue(actualValue);
}
Hope this helps, I have not tested the code though!

how to set the value of textarea with toolbar using javascript?

I'm trying (from my firefox extension) to set the value of a textarea with toolbar which placed when creating a blog before posting it like in blogger or live-journal.
In simple textarea I can get or set the textarea value by:
var myTextArea = gBrowser.contentDocument.getElementsByTagName("textarea")[0];
alert(myTextArea.value); // alerts the old value
myTextArea.value = "this is the new value of the textarea";
where there of course was only one textarea.
The problem is in textarea with toolbar.
I succeeded changing the value of the textarea i'm writing in right now even though it has toolbar, but in all other sites especially blog sites the element value is changed but the text in the page stays the same.
I thought maybe the textarea is CKEditor but I don't know it's name so I can't use:
FCKeditorAPI.GetInstance('InstanceName').insertText("new value in textarea");
is the textarea in sites such as mentioned above is CKEditor? and more important - how do i set the it's value?
thanks!
I believe you can do:
for(x in CKEDITOR.instances) {
CKEDITOR.instances[x].insertText("new value in textarea");
}

How to prevent multiple html selection box displayed on screen?

I have been working on the last bit of my php + ajax based datagrid project.Everything works as I designed except one thing : I cannot stop user opening multiple selection boxes...
Go my research page and use username "ChenxiMao" and password "accedo" to login(without double quotes).
Note that perhaps the images used in this datagrid would not be displayed when page is loaded for the first time(weird, I am trying to fix this, browser incompatibilities, perhaps).
If you double click on one cell in the "CONSULTANT" column, a html select box would be displayed, you can select one consultant to assign him to this task or unassign the consultant from this task. No problem for this.
The problem is : when user leaves this selection box OPEN, he/she can still open another selection box... My jquery code cannot stop people from opening multiple selection boxes.
You can ctrl-U to see the source code on this page, and check the content inside the "gridview-helper.js" for what I have been done.
I want to let user only open a single selection box. When he/she leaves the cell, the selection box should be closed, without changing the html inside...
Puzzled, screwed up for this afternoon...
Thanks for any suggestons in advance!
JavaScript is single-threaded, so you can add a mutex variable and check its value before opening a new select box.
At the top of gridview-helper.js:
var is_choice_visible = false;
In your double-click handler:
$(this).dblclick(function()
{
if (is_choice_visible)
return;
is_choice_visible = true;
...
For your select box, add an onblur handler which sets is_choice_visible back to false and deletes itself.
Unrelated tip: Growing a string in a loop is slow on older versions of Internet Explorer. It's more efficient to append to an array and join the array, e.g.:
var html = ["<select>..."];
for (var i in consultantnames)
{
html.push("<option>...</option>");
}
html.push("</select>");
return html.join("");
Have you tried using the onmouseout event on the cell, and removing the child dropdown box element if mouse out is triggered? Seems that should work.

Categories