var htmlComponent = [
{
element : 'button',
text : "Addition"
},
{
element : 'h1',
text : "This is the heading"
},
{
element : 'p',
text : "This is the paragraph."
}
];
htmlComponent.forEach(function(item) {
// Problem here
document.body.appendChild(document.createElement(item.element).appendChild(document.createTextNode(item.text)));
}
Actually I wanted to create an html element using DOM Object but this is not working. I mean my code is not working properly..
but when I changed something Like that:
htmlComponent.forEach(function(item) {
var _element = document.createElement(item.element);
var text = document.createTextNode(item.text);
_element.appendChild(text);
document.body.appendChild(_element);
}
Then the code is working.
Here the main question is why 2nd code is working and the 1st one is not working...... what is the problem in my code.
please Explain me........
You are chaining the calls together like body.createElement().appendChild() where you shouldn't.
This works with createElement() because it returns the element you want to append to, but it doesn't work with appendChild() because that returns the child you just appended, which you are then appending again to the body.
This programming style is known as a "fluent" interface. It is supported by some libraries e.g. jQuery, but not by native Javascript DOM functions.
See https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
Try as follows
appendChild does not return parent
var htmlComponent = [{
element: 'button',
text: "Addition"
},
{
element: 'h1',
text: "This is the heading"
},
{
element: 'p',
text: "This is the paragraph."
}
];
htmlComponent.forEach(function(element) {
var btn = document.createElement(element.element);
var t = document.createTextNode(element.text);
btn.appendChild(t);
document.body.appendChild(btn);
});
According to the documentation for appendChild:
The returned value is the appended child except when the given child
is a DocumentFragment, in which case the empty DocumentFragment is
returned.
You are appending a text node to the button, then trying to append the returned result to the body. This is the reason why you are not seeing the button being appended to the body.
If you break it down like this, it's easier to see what's going on:
document.body.appendChild(
// createElement returns button
document.createElement("button")
// button.appendChild then returns the appended child (a text node)
.appendChild(document.createTextNode("text"))
)
Is there a way to use HTML5's localstorage method with Jquery's select2 plugin? Right now when I enter data and close the browser/tab, all entered data is gone, which is not so optimal since it can get confusing if you dont remember what you've entered
My select2 code looks like this:
$(".select").select2({
minimumInputLength: 1,
multiple: true,
query: function(query){
$.getJSON( 'url path to remote API', {
name:query.term,
featured:true
}, function(results){
var data = {results: []};
$.each(results.data, function(index, item){
data.results.push({id: item.artist_id, text: item.name});
});
query.callback(data);
} );
}
});
Any help is very appreciated
give this a try: http://jsfiddle.net/7267rkxy/12/
I commented the code for you for some explanation of what's going on, you should be able to just swap out the data option with your query option and it should still work
PS: I noticed none of your answered questions have been marked 'accepted', if someone gives you an answer that you like or that works for you, you should mark their answer 'accepted' by clicking the checkbox next to the answer
HTML
<!-- setting a hard width for example -->
<input type="text" class="select" style="width:200px;" value="" />
JS
// set value property to local storage value
$(".select").val(localStorage.s2options);
$(".select").select2({
minimumInputLength: 1,
multiple: true,
data: [{id: 1, text: 'option1'},{id: 2, text: 'option2'},{id: 3, text: 'option3'}], //sample data
initSelection: function (element, callback) {
// initSelection only fires when there is something in the value property
callback($.parseJSON(element.val()));
}
}).on('change', function(info){
// checking if we have anything stored in local storage
var s2options = localStorage.s2options ? JSON.parse(localStorage.s2options) : [];
// add / remove options
if (info.added) {
s2options.push(info.added);
} else if (info.removed) {
s2options = s2options.filter(function(opt) {
return opt.id != info.removed.id;
});
}
// save selections to local storage
localStorage.s2options = JSON.stringify(s2options);
});
In addition to #bruchowski 's answer, the newer version of Select2 has a different way of doing this (initSelection and query are still supported for backwards compatibility though):
You have to create a custom DataAdapter and implement current() and query().
i am try to create a array of selected id using kendo multi select.
here is jsfiddle
this is kendo script:-
$("#multiselect").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
select:onSelect
});
kendo select function:-
function onSelect(e){
var dataItem = this.dataSource.view()[e.item.index()];
onchng(dataItem.id);
}
create a array:-
function onchng(id){
var checkarr = [];
checkarr.push(id);
console.log(checkarr);
}
here is output is [1] [2]
but i want it ['1','2']
is it possible??
thanks
When your select event fired, 'checkarr' redefined again and again. Your problem is that. If you want values in one array, you must use a button to take values together, then push them to array in single function. Or you can use session or something like that
This is how you can do it from the Controller. Note I'm doing Request.Form, that's because for whatever reason MVC Model and Kendo UI wouldn't work together when using MultiComplete. But this will put them in an array, and this is fired off a button click like the other answer suggested.
string[] advertisers = Request.Form["Name"].ToString().Split(',');
I think that there is a much easier approach and with less side effects...
Bind change event instead of select. Why? Two reasons:
select is fired just before the element is added to the list of values so you cannot get current list and you need to add the value being selected to the values already selected.
select is not fired when you remove the selection of an option.
The code using change would be as simple as:
var multi = $("#multiselect").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
change : onSelect
}).data("kendoMultiSelect");
function onSelect(){
console.log("here", multi.value());
}
Just need to use value method from your multiselect.
Your Fiddle modified in here : http://docs.telerik.com/kendo-ui/api/framework/datasource#events-change
NOTE: change event belongs to DataSource if you need to see the documentation, check it here
I'd like to have multiple instances of CKEditor based on the same config settings, but with different heights. I tried setting up config with the default height, setting up the 1st instance, then overriding the height & setting up the 2nd instance:
var config = {
.....
height:'400'
};
$('#editor1').ckeditor(config);
config.height = '100';
$('#editor2').ckeditor(config);
...but I get two CKEditor instances that both have 100px height.
I also tried this:
CKEDITOR.replace('editor2',{
height: '100'
});
.. I got error messages that the instance already existed. I searched around a bit & found someone in a similar situation got advice that you have to destroy() the instance before replace(), but that seems too complicated for just setting a different initial height.
In the end I set up two different configs & copied over the toolbar_Full property:
var config1 = {
height:'400',
startupOutlineBlocks:true,
scayt_autoStartup:true,
toolbar_Full:[
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
'/',
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','HorizontalRule' ] },
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks' ] },
{ name: 'document', items : [ 'Source' ] }
]
}
var config2 = {
height:'100',
startupOutlineBlocks:true,
scayt_autoStartup:true
};
config2.toolbar_Full = config1.toolbar_Full;
$('#editor1').ckeditor(config1);
$('#editor2').ckeditor(config2);
Is there a better way? Anything I'm missing? There's this question but they didn't post quite enough to be useful, & this very similar question hasn't been answered. Thanks!
Update:
This seems to be a timing/config handling quirk of CKEditor -- the config is read & applied later (I'm guessing after the editor's DOM framework has been set up) rather than when the editor is first instantiated.
So, any changes to the config settings made immediately after the 1st editor is instantiated with .ckeditor() are actually applied by the editor at some point in the following several milliseconds. I'd argue this isn't normal behavior, or logical.
For instance, you can get the expected behavior in my first example (overriding the config.height property after the first editor has been instantiated) to work by delaying the 2nd CKEditor instance with setTimeout(). Firefox needed ~100ms, IE needed 1ms. Wacky & wrong.
CKEditor should read the config settings when each editor is first instantiated. For now, everyone has to work around that quirk.
The easiest way to initialize two editors with custom heights is:
$('#editor1').ckeditor({ height: 100 });
$('#editor2').ckeditor({ height: 200 });
or without jQuery:
CKEDITOR.replace('editor1', { height: 100 });
CKEDITOR.replace('editor2', { height: 200 });
AFAIK it isn't possible to change editor's height on the fly.
If these methods weren't working for you, then you were doing sth else wrong.
Update:
Answering to your comment - your question in fact wasn't about CKEditor, but rather about sharing one object with only two different properties. So you can try like this:
var configShared = {
startupOutlineBlocks:true,
scayt_autoStartup:true,
// etc.
},
config1 = CKEDITOR.tools.prototypedCopy(configShared),
config2 = CKEDITOR.tools.prototypedCopy(configShared);
config1.height = 100;
config2.height = 200;
CKEDITOR.replace('editor1', config1);
CKEDITOR.replace('editor2', config2);
CKEDITOR.tools.prototypedCopy is a tool that creates new object with prototype set to the passed one. So they share all properties except of these you override later.
Update 2:
This is the update for the "Update" section in the question :).
There's no quirk in CKEditor's timing or bug or whatsoever - it's pure JavaScript and how BOM/DOM and browsers work plus some practical approach.
First thing - 90% of BOM/DOM is synchronous, but there are a couple of things that aren't. Because of this entire editor has to have asynchronous nature. That's why it provides so many events.
Second thing - in JS object are passed by reference and as we want CKEditor to initialize very quickly we should avoid unnecessary tasks. One of these is copying config object (without good reason). So to save some msecs (and because of async plugins loading too) CKEditor extends passed config object only by setting its prototype to object containing default options.
Summarizing - I know that this may look like a bug, but it's how JS/BOM/DOM libs work. I'm pretty sure that many other libs' async methods are affected by the same issue.
Add this you will get the different toolbar for both CKeditor in single page
<script>
CKEDITOR.on('instanceCreated', function (event) {
var editor = event.editor,
element = editor.element;
if (element.is('h1', 'h2', 'h3') || element.getAttribute('id') == 'editorTitle') {
editor.on('configLoaded', function () {
// Remove unnecessary plugins to make the editor simpler.
editor.config.removePlugins = 'find,flash,' +
'forms,iframe,image,newpage,removeformat,' +
'smiley,specialchar,stylescombo,templates';
// Rearrange the layout of the toolbar.
editor.config.toolbarGroups = [
{ name: 'editing', groups: ['basicstyles'] },
{ name: 'undo' },
//{ name: 'clipboard', groups: ['selection', 'clipboard'] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' }
// { name: 'about' }
];
});
}
});
</script>
Solution above from Reinmar is working for me, however I decided to give 1 more solution that i used before this one.
It's really simple, all you need to know is that ckeditor create content div element for every instance with almost the same id, only difference is incremental value. So if you have 2,3,4.. instances only difference will be ordinal number. Code is here:
CKEDITOR.on('instanceReady', function(){
$('#cke_1_contents').css('height','200px');
});
This event will be activated for every instance you have, so if you want to set height for all instances you could create global variable and use it like x in #cke_"+x+"contents, every time event is activated increase x for 1, check which instance in row is with simple if and then set height.
var x=1;
CKEDITOR.on('instanceReady', function(){
if(x==1) h='200px';
else if(x==2)h='400px';
else if(x==3)h='700px';
$('#cke_'+x+'_contents').css('height',h);
x++;
});
This is not best solution but it is working, problem is you actually see content div resizing.
Update 25 Jun 2019.
Please Use this code to add multiple CKEditor instances with custom height for each one. Easiest way ever.
<textarea name="editor1" style="height:30px;" class="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
CKEDITOR.add
</script>
<textarea name="editor2" style="height:40px;" class="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor2' );
CKEDITOR.add
</script>
<textarea name="editor3" style="height:50px;" class="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor3' );
CKEDITOR.add
</script>
<textarea name="editor4" style="height:60px;" class="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor4' );
CKEDITOR.add
</script>
<textarea name="editor5" style="height:70px;" class="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor5' );
CKEDITOR.add
</script>
Ref: Here
If you add the ckeditor.js to page more than once too, it may cause that problem.
The script code must be defined once in every page.
<script type="text/javascript" src="Fck342/ckeditor.js"></script>
just use CKEDITOR.replaceAll();
I am editing the link plugin to allow staff to select links to internal content.
I have managed to add another tab to the link plugin dialog with a text input with an onKeyup event. The idea is, when they type it will list the results below where they can select the link they want. Once selected I was just going to update the info tab with the url and protocol.
Here is my code sections from the existing link plugin:
....
....
//Should update info tab with value
function AddLink(txtLink)
{
var dialog = this.getDialog();
dialog.setValueOf('info', 'url', txtLink);
dialog.setValueOf('info', 'protocol', '');
}
//called when the user types in the search box. currently just uses text for basic testing
var searchBoxChanged = function ()
{
var dialog = this.getDialog();
var href = $(this).attr('href');
var txt = dialog.getValueOf('article', 'searchWords');
$('#searchResults').html("Test Title");
}
....
....
{
//Adds extra tab to the link plugin for custom link searching
id: 'article',
label: linkLang.article,
title: linkLang.article,
elements:
[
{
type: 'text',
id: 'searchWords',
label: linkLang.articleSearch,
style: 'height:40px',
size: 29,
onKeyUp: searchBoxChanged
},
{
type: 'html',
html: '<div id="searchResults">Please start tying to get results</div>'
}
]
}
....
....
At the moment I am just using some basic static data from the textbox. The link in creating on the page ok, but when it is clicked I get the error:
CRIPT5009: 'AddLink' is undefined
Can anyone shed some light on where I am going wrong?
In my experience, ["x" is undefined] errors quite often mean there's a syntax error or, often, something in the function does not evaluate to what you think it does.
Possibly, this.getDialog() is out of context so it doesn't return anything. Then, dialog.setValueOf() won't work.