I am using EpicEditor in one my project. So as per the doc, I have added textarea property to my textarea id, so when page load first time all content from textarea is showing in the EpicEditor. Works great!!!
PROBLEM:
I am getting real-time updates from server for that particular record and then I am updating the form fields value accordingly. So I am not able to set the new value in the EpicEditor. I have updated the reference textarea value but it will not sync to EpicEditor.
SOLUTION
I want to set the new value in the EpicEditor whenever some updates occurred on the reference textarea.
var self = this;
var opts = {
container: 'epiceditor',
textarea: 'myTextArea',
basePath: 'epiceditor',
...
}
var editor = new EpicEditor(opts);
self.editor.load();
// Now, import some content into the editor
// Since I don't know the filename I'm using `null` which will default to the current filename
editor.importFile(null, 'This is to be displayed in the epic editor');
This should automatically update the textarea. If it does not update the textarea that's a bug and please send a ticket with your code and a reproducible case:https://github.com/OscarGodson/EpicEditor/issues/new
You can do something like this:
after you create an instance of epic editor with your options (opt) and load it. Put the text that you want to place in the epic editor as textarea value like this - $("#myTextArea").val('your value')) and call me.editor._setupTextareaSync();
var me = this;
var opts = {
container: 'epiceditor',
textarea: 'myTextArea',
basePath: 'epiceditor',
-------
-------
}
var editor = new EpicEditor(opts);
me.editor.load();
$("#myTextArea").val('This is to be displayed in the epic editor');
me.editor._setupTextareaSync();
Cheers!
Related
I want to fill an online form automatically with Javascript.
My goal is to fill 'Test3' into the 'Associated' columns
The HTML document of the wording("Test3.mp4) Element is
<a target="_blank" rel="no" href="https://upload-files-e083" class="cursor-pointer">Test3.mp4</a>
The HTML document of the input Element is
<input autocomplete="no" id="input" type="text" class="form-control" value="" field_signature="4130097153" form_signature="11431360034982677603">
and my code is
var event = new Event('input',{'bubbles': true,'cancelable': true});
var title = document.getElementsByClassName('cursor-pointer')[0].innerText;
// console.log(title) will output "Test3.mp4"
// it will change the display web page
document.getElementById("input").value = title.split(".mp4")[0];
// it will change the Elements page in the Chrome browser
document.getElementById("input").setAttribute('value', title.split(".mp4")[0]);
document.getElementById("input").dispatchEvent(event);
I also tried
var title = document.getElementsByClassName('cursor-pointer')[0].innerText;
var txt = document.getElementById('input');
// it will change the display web page
txt.value = title.split(".mp4")[0];
// it will change the Elements page in the Chrome browser
txt.setAttribute('value',title.split(".mp4")[0]);
And even tried to set the value directly
var txt = document.getElementById('input');
txt.value = "Test3";
txt.setAttribute('value',"Test3")
After executing these code in F12-console(chrome), the associated column and the HTML element will be updated successfully.
But when I click the column and move the cursor, the value('Test3') will disappear.
It seems like the value does not input really because the column should show a warning if the information is not valid. In this case, if I input the text manually, the form will look likes the image below:
Does anyone know how to input the value in this situation?
I am not writing this as a comment because of clarity issues.
Try this.
Notice that getElementsByClassName returns an array. SO you have to access the elements like in an array. Notice the second line
var event = new Event('input',{'bubbles': true,'cancelable': true});
var title = document.getElementsByClassName('cursor-pointer')[0];
document.getElementById("input").value = title.innerText.split(".mp4")[0];
//document.getElementById("input").setAttribute('value', title); // why are you setting the "value" again? Also the "title" variable is an HTML element and not a String value.
//document.getElementById("input").dispatchEvent(event);
I have a customer who is a member of a web site. He has to fill a form every time which is really very often. That's why he wants me to develop an application for him to make this process automatic. When I use the webBrowser control to manipulate it, I am able to login but after that there are fields that contains data-binding. These fields are the ones I need to manipulate. When I push the data to necessary fields, it's not working, because in the html tag, there is no value attribute, instead it has data-binding. So my question is how can I manipulate and push data to these fields?
Thank you so much for your all help in advance.
Knockout uses data-binds to listen to changes in an input and update an underlying model. For example, the value binding listens to change events and writes the new value to a data-bound observable.
If you update a value attribute through code, the change event isn't triggered. You'll see the new value in the UI, but the javascript model won't be updated.
You can combat this by explicitly triggering a change. Here's an example:
Type in the input: you'll see a console.log that shows knockout gets updated
Press the button to inject a new value: you won't see a log: knockout isn't updated
Press the last button to trigger a change event. You'll notice knockout now updates the model.
Of course, you can combine the two click listeners into one function. I've separated them to get the point across.
// Hidden knockout code:
(function() {
var label = ko.observable("test");
label.subscribe(console.log.bind(console));
ko.applyBindings({ label: label });
}());
// Your code
var buttons = document.querySelectorAll("button");
var input = document.querySelector("input");
buttons[0].addEventListener("click", function() {
input.value = "generated value";
});
buttons[1].addEventListener("click", function() {
// http://stackoverflow.com/a/2856602/3297291
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
input.dispatchEvent(evt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="value: label">
<button>inject value from outside</button>
<button>let knockout know something changed</button>
I have an MVC App and on one of my pages as part of the display I will render one of two partials based on a user selection of a radio button. This bit all works ok, but I have a button on the main form where I need to set/reset values that will be passed to my controller based on the user selection. The button is declared on my main form as:
#Html.GlobalModalAuthorizeButton("Upload Document", "Upload", "Documents", new { serviceUserId = Model.ServiceUser.Id, folderId = Model.CurrentFolderId, viewType = Model.ViewTypes.ToString() }, new { #class = "icon upload btn-primary" })
when this page is initially rendered the viewtype is set to the default view that the user is initially presented with. when the user changes the view the viewtype doesn't seem to get updated. So from the partial that has been loaded I try to set the value to the correct value. Using the Chrome browsers Developer tools if I do the following:
$(this).parent().parent().parent().parent().find($('.upload')).attr('data-url').replace('FileView', 'TreeView');
it returns in the console window the value I want (idea is that i set the value on the button before the user presses it). The trouble is the above doesn't really seem to have changed the data-url attribute on the button so consequently when the controller is hit, 'FileView' is still passed through.
For full attribute:
var new_attr = "/ServiceUser/Documents/Upload?serviceUserId=21&viewType=FileView";
$(this).parent().parent().parent().parent().find($('.upload')).attr('data-url', new_attr);
Or, as #Rup already suggested, you should first get the original attribute value, modify that using replace method and then reassign the new_attr.
jQuery got a special method to read and write data attributes:
var uploadButton = $(this).parent().parent().parent().parent().find('.upload');
var currentUrl = uploadButton.data('url');
uploadButton.data('url', currentUrl.replace('FileView', 'TreeView'));
So I am writing a plugin for ckeditor (#mentions).
When you type some characters (example "#John") a drop down will appear of a list of Johns that the user can select . When the users selects the drop down they want, it needs to remove the the "#John" text and insert an element that was retrieved from the dropdown. The problem occurs when trying to insert text, remove some text and setting the currsor position.
The Code
var html = '<span>InsertedElement</span> ';
// Create the Element to insert
var newElement = CKEDITOR.dom.element.createFromHtml(html, mentions.editor.document);
//Insert the element
mentions.editor.insertElement(newElement);
//Get a new bookmark
var tempBookMark = mentions.editor.getSelection().createBookmarks(true);
// get the data
var edata = mentions.editor.getData();
// set it with the exact same info so not changes (just for the test)
mentions.editor.setData(edata);
//set the bookmark
mentions.editor.getSelection().selectBookmarks(tempBookMark);
//focas on that position
mentions.editor.focus();
The issue
This works just fine on chrome however on IE11 after the text has been removed, when I try to access the mentions.editor.getSelection() I get "permission denied" error. I cannot set the bookmark and the focus is moved to the start of the ckeditor.
[Update]
A further test I performed narrowed down the issue. Commenting out the mentions.editor.setData(edata); line it stops erroring. If I use the setData function on the editor instance and then try to to run the GetSelection() on the Editor instance it errors (permission denied) in IE11 but works in Chrome. Its seems the setData function locks the editor in some way in IE11? I have simplified the code to allow it to be more easily replicated.
the Editor#setData is an asynchronous function. You cannot use selection right after setting data - you have to wait until everything is ready. Therefore setData accepts callback.
mentions.editor.setData( edata, function() {
//set the bookmark
mentions.editor.getSelection().selectBookmarks(tempBookMark);
//focas on that position
mentions.editor.focus();
} );
I have a form with a « newInput » button, which add dynamically in javascript a new input when I click to it.
When I have an error in my form, I re-load the view with the form. It’s normal, but .. Because I use dynamic javascript for adding new input, all the input added are removed when I reload..
There is something I can do ?
This is an exemple of my view.tpl :
<input type="text" placeholder="ex: cerise"
onfocus="javascript:autoComplet('jigd1', '{site_url('recettes/getIngredient')}')" value="{set_value('igd[]')}" id="jigd1" name="igd[]"/>
{form_error('igd[]')}
I add a partiel code of my js file
var cpt=1;
function addField(uriIngredient, uriLabel) {
try
{
cpt=cpt+1;
var inputIgd = document.createElement('input'),
button = document.createElement('input'),
div = document.createElement('div'),
inputIgd.setAttribute('type','text');
inputIgd.setAttribute('name','igd[]');
inputIgd.setAttribute('id','jigd'+cpt);
button.setAttribute('type','button');
button.setAttribute('onclick','javascript:supField("igd'+cpt+'")');
button.setAttribute('value','Supprimer');
div.setAttribute('id','igd'+cpt);
div.appendChild(inputIgd);
div.appendChild(button);
document.getElementById("listIgd").appendChild(div);
...
Since you are appending new input/button to dom dynamically and not saving its state by making ajax call/submitting form you cannot retain the input/button after reloading the page.
Using localStorage, to keep the information of previously added input/buttom would be preferable.
PS : since you havent added any code which you tried, its really hard to explain localStorage with specific code.
as soon as you append, add the state of the form into localStorage,
When you loading the page, look for the localStorage to check the previously added inputs
you can set the item into localStorage :
window.localStorage.setItem('key','value')
You can retrieve them like this :
window.localStorage.getItem('key')