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");
}
Related
I am trying to change the value/text of a text node in canva.com.
I am able to change it visually but when I reload the page, or try to download the design, the old placeholder text is shown.
In canva when you change anything it automatically saves the changes, but you can also do this manually. I have tried manually saving but with no luck, only the old placeholder text is saved.
I have tried changing the text with the following methods.
The text is in a span so at first I tried to change that one.
var all_texts = document.getElementsByClassName("S1PPyQ");
all_texts[0].innerText = "HEY";
all_texts[0].textContent = "HEY";
all_texts[0].outerText = "hey"
After that I tried to get the parent node, which was a p tag. So basically the same code as above just with a different class name. This also did not work.
Any help is appreciated.
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>
We are using the Taxonomy module for Sitecore: https://marketplace.sitecore.net/Modules/T/Taxonomy.aspx?sc_lang=en
The module works fine 90% of the time. The only catch is that when in a taxonomy field you select a value from the auto-complete options, the field doesn't seem to be marked as changed. This creates the occasional confusion with editors as when they publish the "Do you want to save?" prompt doesn't show and the content is published without tags.
If instead of selecting from the auto-complete we use the dialog box, everything works fine.
I looked at the markup, JavaScript and C# code and couldn't find a solution.
I even tried to set Sitecore.Context.ClientPage.Modified = true but it doesn't seem to do anything.
How can I force the save prompt to show?
I had a similar issue, I was updating a field using js and the experience editor wasnt detecting the change.
I got this working by doing the following using js:-
There is a save button state object saved in a view state field. You can grab by doing window.parent.document.getElementById("__SAVEBUTTONSTATE"). I then did the following:-
var saveButtonState = window.parent.document.getElementById("__SAVEBUTTONSTATE");
saveButtonState.value = 1;
saveButtonState.onchange();
This will make the save button enabled
In the experience editor, Sitecore wraps your sitecore item fields in an span element, which contain a unique id. (These are the fields you interact with in the experience editor). However, its not these values which Sitecore receives when you hit Save button. Sitecore actually stores values of your item fields in hidden inputs, so when you interact with the span element, in the background, these hidden inputs are being updated. So in order for Sitecore to receive your changes, you must update the corresponding hidden input. If you open Inspect element in the experience editor and search "scFieldValues", you will see these hidden inputs. I updated the field by using jquery:-
$('#scFieldValues').children('input').each(function () {
if (id.indexOf($(this).attr('id')) >= 0) {
$(this).val(value);
}
});
The id object is the id of the span element. The contents of that id is used in the id of the hidden input. This is why I use "id.IndexOf" to find correct input element. So when I update the span element value, I grab that value and update the corresponding input.
Hope this helps
I have an asp.net TextBox and I'm using the TextBoxWatermark of AjaxControlToolkit to have it display some hing text while the box is empty.
Problem is, onclient click of a certain button, I want to determine if the textbox is empty. The javascript code of
document.getElementById(fieldName).value == ""
Is not working, since the WaterMark extender with it's hint text making the code to think the field is not empty.
Any solution to this?
You can use the wrapper to access whether the watermark is being displayed or not with get_IsWaterMarked.
Sys.Extended.UI.TextBoxWrapper.get_Wrapper(document.getElementById(fieldName)).get_IsWatermarked()
I tried this with version 4.1.7.1213 of AjaxControlToolKit.
Got the code from looking at the source code of the TextBoxWatermark control.
Refer to this: http://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#Client/MicrosoftAjax.Extended/TextboxWatermark/TextboxWatermark.pre.js
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!