I'm creating and setting a default value for an input (type is left default, but when specifically set to text, I get the same problem) element. The value, according to JS, does update, but I don't see the change in either the displayed page or source.
temp3 = document.createElement('input'); temp2.appendChild(temp3);
temp3.value = "a";
If I check the value, via alert(temp3.value), I do see "a", but I see no change on the created text input on the page, nor when I check via Chrome's Inspect element feature.
Related
I am developing a website, and I need a certain checkbox that when is unchecked the correspondent input box has the read-only attribute and when I check it the read-only attribute gets removed from the input box. Right now, what happens is I load the website, the checkbox is unchecked and the input box does not has the read-only attribute as it was supposed to. Altough when I check and uncheck it the input box gets the read-only attribute.
Why is this happening?
Here is the Javascript code:
const checkbox = document.getElementById("check_pt");
const inputElement = document.getElementById("pi_pt");
checkbox.addEventListener("change", function() {
if (!(checkbox.checked)) {
inputElement.setAttribute("readonly", "true");
} else {
inputElement.removeAttribute("readonly");
}
});
Your function sets the readonly attribute when the checkbox is changed.
It doesn't get set when the document initially loads, because the user hasn't changed it.
If you want the function to run when the document initially loads, then you'll need to call it at that time. Alternatively, you could set the attribute in the HTML instead of modifying it with JS (which generally makes more sense when setting default values for attributes). Note that if you do either of these, then the state can never change so the change event handler will never run.)
I'm using HTML template tags to render content via JS (no jQuery or anything else).
Using content.cloneNode(true) to clone the nodes, set the content, values, ... and at the end I append it to a node inside the HTML. Thats working fine for every element so far. But currently I have an issue with input type checkbox. I can't set the value. (I don't mean the checked status)
The problem is, when I set the value it's not part of the HTML element thats getting rendered. Not visible with the browser dev tools and also document.querySelector(...).value will return an empty string.
My goal is to be able to fetch on a button click the values of all enabled (checked) checkboxes for an AJAX request.
Code example:
https://jsfiddle.net/3gnLv67x/
I haven't found the reason why the value is not getting set. But since it's only a simple input field I changed to the code to create the element instead of using a template for that.
This way is working.
const checkbox = document.createElement("input");
checkbox.type = 'checkbox';
checkbox.name = 'selected[]';
checkbox.className = 'select-box';
checkbox.value = item.id;
I'm still up to hear a solution how to get that working with templates.
I am working on a network graph editor with an inspector view on the right side.
The inspector is a separate web component built with Lit.
When I click on a node I would like to be able to view and change properties of the node, like the node title, in the inspector view. That works well as long as I don't change any value in the input field. Once I changed the value the input field keeps it's manual value even if set a new value during re-rendering.
To provide an example. This is how the web inspector of Safari shows the HTML element:
If I now change the node value it looks like this:
Now, I change to the second node I get this:
As you can see, the value attribute changed, even the id is different. However, Safari (and Chrome), keep the existing value, hence showing me the wrong title for the second node.
The input field shows the node's value each time, as long as I don't change the value manually. After that the input field maintains the manually set value.
The corresponding line in render() is
<input id="text_${this.currentElement.id}" value="${this.currentElement.text}"/>
I specifically change the id but that has no impact on the result.
What do I need to do in order to 'loose' the manual value during re-rendering? Many thanks in advance!
You should use .value to bind to value property.
<input id="text_${this.currentElement.id}" .value="${this.currentElement.text}"/>
You could read more on property-expressions.
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'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");
}