I try to create a node dynamically, the closes I got is:
$('#jstree_cats_div').jstree(
"create_node", parent, position, newNode, false, false);
which throws an exception:
TypeError: Object #<Object> has no method 'match'
I couldn't find any working example... all the jsfiddel example on other questions are not working, seems like they all using old API (my guess)
also the 'create' in the demo in jsTree web site http://www.jstree.com/demo doesn't work.
Please supply a working example of adding a node dynamically.
Thanks
Try this:
var tree = $('#jstree_cats_div').jstree(true);
tree.jstree("create_node", parent, position, newNode, false, false);
You can see here my solution: jsTree and Context Menu: modify items
It's for Context Menu but you can see the function...
Related
I need to access each message in a twillo agents chat to check if any of them are a link, if so I will render a component.
I tried using
flex.MessageListItem.Bubble.Content.message
but I think I am using it wrong.
To edit a specific component that has some link in the message content you'll need to use Content.add (if you want to add a new component to the message bubble) or Content.replace (to replace the component for another that you'll create). In Both methods, replace and add, you can pass an if property that will receive that logic to add/replace or just render the default component.
Follow an example where I replace a default component with another based on a condition:
flex.TaskInfoPanel.Content.replace(<CallbackComponent key="callback-info-component" manager={manager} />, {
sortOrder: -1,
if: (props) => props.task.attributes.taskType === 'callback',
});
To see what coming in condition props you can simply print it using a console.log, so the if condition returns true, it'll replace or add your component, if returns false, it'll doesn't anything.
Follow some docs that can help you:
Flex 1.0 components
Flex 2.0 components
I hope that it can help you.
I wish to make a dropdown list to replace the default tool for layer selection.
Using this example included in from the GIT repository, and adjust for jsfiddle, I get the following error:
"<a class='gotoLine' href='#77:31'>77:31</a> TypeError: L.control.selectLayers is not a function"
using L.control.layers works fine, however, not selectLayers.
//var control = L.control.layers(baseMaps, overlayMaps)
var control = L.control.selectLayers(baseMaps, overlayMaps)
control.addTo(map);
The appropriate javascript files all seem to be in place, so.. what is missing here?
Fiddle link:
You added the wrong link of the libraries.
You have to use the raw link instead of the Github link
I have a page where I add textareas to the DOM with javascript and I would like them to have a TinyMCE editor attached.
When I add the first textarea everything is fine.The problems occurs with the next ones added.
It looks something like this:
http://dl.dropbox.com/u/1918752/tinymce_problem.png
In the firebug console, there's an "d is undefined" error thrown.
I'm using
tinyMCE.execCommand("mceAddControl", false, 'textarea_id');
to add TinyMCE control to the newly inserted textarea.
I'm using TinyMCE version 3.0.1 and unfortunately upgrading isn't really an option now.
Later edit:
The function I use to insert textareas:
function add_fields(link, association, content) {
var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g");
var reg = new RegExp("child_", "g");
$(link).up().previous('ul').insert(content.replace(regexp, new_id).replace(reg, "child_"+new_id));
if($('estore_products_category_children_attributes_'+new_id+'_description')) {
tinyMCE.execCommand("mceAddControl", false, 'estore_products_category_children_attributes_'+new_id+'_description');
}
}
The content parameter is where the textarea is.
This is used in a rails application, and I created a helper which returns a standard chunk of html based on the types of associations used, and then I replace the generic ID's with new unique ones and insert in into the DOM.
I think you did not shut down tinymce correctly in order to recreat an edito instance with the same id!
To shut down an editor instance correctly use:
tinyMCE.execCommand("mceRemoveControl", false, 'textarea_id');
This is necessary when you move the editor around inside the dom or when you remove parts of the dom containing the editor iframe.
I've followed the Wicket by Example guide to get the ObjectAutoCompleteField working, and it does so quite nicely.
I have a huge problem, though, and that is to show an initially set object in the field when the page loads. The object is retrieved from a model I use for the form where the ObjectAutoCompleteField is used. Changing the ObjectAutoCompleteField changes the model attribute it is "connected" to, and any subsequent changes in the field shows the appropriate label in its place, just not the initial one when the page loads—the only thing that shows is the edit link (to get to the autocomplete functionality).
I've looked around in the documentation for the ObjectAutoCompleteBuilder but haven't found any corresponding method to even set the initial value explicitly on page load.
I finally managed to find a solution by looking through the classes relating to ObjectAutoCompleteField.
The ObjectAutoCompleteField is constructed by the build method in ObjectAutoCompleteBuilder. So, by calling the readOnlyRenderer method on the builder, creating a new ObjectReadOnlyRenderer creating a label inside its getObjectRenderer, I got the ObjectAutoCompleteField to render a preselected object on page load.
ObjectAutoCompleteBuilder<Author, Long> builder = new ObjectAutoCompleteBuilder<Author, Long>(provider);
builder.readOnlyRenderer(new ObjectReadOnlyRenderer<Long>() {
public Component getObjectRenderer(String id, IModel<Long> pModel, IModel<String> pSearchTextModel) {
return new Label(id, new PropertyModel<Author>(model, "author"));
}
});
One would think that this was the standard behaviour, but now I know for future reference.
So I have a TinyMCE form on my page and it is pre-filled with "sections" (divs with specific class names).
I have a couple of plugins that will add to TinyMCE with more "sections".
I need it so when I push the plugin button it will test to make sure the cursor is not inside a "section" and paste a "section" inside another "section".
Not sure the direction I need to take to accomplish this. Any help would be great.
more info:
So below is an example of a plugin that adds a button that just inserts a simple dov into the editor at the selection/cursor.
ed.addButton('pluginbutton', {
title : 'MyPlugin',
image : 'img/test.png',
onclick : function() {
ed.selection.setContent('<div>test</div>');
}
});
I am currently thinking that onBeforeSetContent is the API event handler I need to set to process whether or not I am in another section and if so send a message to the screen. If not just do the setContent method. I am not sure exactly how to set that up though so I am still figuring that out. Any help here?
Since it seems like you have control over the plugin, here is how I would edit it to work.
Note: I am using the jQuery method closest. I figured since you are on the jQuery core team, you are probably using it for this project. If not, just refactor that line as needed. The important part is that selection.getNode() returns the DOM element that is the parent of both the start and end selection points.:
ed.addButton('pluginbutton', {
title : 'MyPlugin',
image : 'img/test.png',
onclick : function() {
if( !$(ed.selection.getNode()).closest('div.section').length ){
ed.selection.setContent('<div class="section">test</div>');
}
}
});
Additional thoughts
Also, to make your plugin aware enough so it won't put a div as the child of a p tag, you could do something like this:
Replace onclick above with this:
onclick: function(){
var $node = $(ed.selection.getNode());
if( !$node.closest('div.section').length ){
// Get highest element that is a direct child of the `body` tag:
var $parent = $node.closest('body > *');
// Wrap with our special section div
if($parent.length) $parent.wrap('<div class="section"></div>');
}
}
I don't know TinyMCE specifically, but it should be possible to extract the current DOM element from ed.selection. If that is possible (I'm sure it is using some sort of getter function or property), you should be able to do the following:
Mark a "forbidden" area using an id or class ("<div class='protected'> ")
traverse through the selection's ancestry (using the parentNode property of the element) and check whether one of the parent elements has the "protected" class or ID.
If the ID was found, do not execute setContent(); otherwise execute it.