jstree version 3.1.1, plugin dnd.
I need to drag nodes in one jstree element and drop them to another jstree element. This is working fine and i get all information about the element which is dragged, but I don't get any information about the dropped (newly) created node in the second jstree element.
dnd_stop.vakata seems not to contain this information (at least i can't find it), create_node.jstree isn't triggered, when dnd creates a new node, so i wonder how to get the id of the new node.
Please check this one: http://jsfiddle.net/amug08ms/
all needed code is in the example ...
When you drag a node from the upper jstree to the lower jstree, all information about that node is lost, except the text of the node. So how can i add the information i need to the dropped (created) node in the lower jstree node?
Thanks for any hint in advance!
The event that is triggered when using multi-tree drag'n'drop is copy_node.jstree.
Here is how you can transfer the ID (using this example it should be easy to copy any other properties you may need - by default IDs and data is not copied):
$('#destTree').on('copy_node.jstree', function (e, data) {
data.instance.set_id(data.node, data.original.id);
for(var i = 0, j = data.node.children_id; i < j; i++) {
data.instance.set_id(data.node.children_d[i], data.original.children_d[i]);
}
});
Here is the updated fiddle:
http://jsfiddle.net/amug08ms/1/
Related
I am experimenting cobrowsing with Angular 6 Forms.In co-browsing an opensource library togetherJS updates the DOM value of corresponding element for remote party.I have updated togetherJS related code in index.html(two line one in head and another in body) I have observed using ControlValueAccessor Form type DOM value of corresponding element is getting updated but FormControl value is not getting updated in view.
My question is how changes done by an external library on DOM elements can be reflected into angular 6 form control's element value in view.
One can get the code from below link:
https://github.com/srigaurav1986/Angular-Forms.git
How to reproduce:
1.Download code from above link.
2.Install dependencies using "npm install"
3.Run "ng serve -o"
4.open in browser "http://localhost:4200/controlvalueaccessor"
5.Click on "Start TogetherJs"
6.Copy the popped link in another browser window.
7.Update the "Name" field
We can see DOM field value is also getting updated on remote side but after pressing "Submit" button we can see FormControl value remains unaltered on remote side but changed on other side.
I tried using manually detecting changes using application.tick,markforcheck() and detectchanges() apis but no luck.Is there a way, where we can listen to some event on DOM element change and subscribe to it and also update the Formcontrol parameter values in such case.
The answer to this question lies in angular(6) property that it works on shadow DOM and only listen to the changes happening within angular zone , when the third party library like TogetherJS updates DOM corresponding changes doesn't effect angular components as they are not subscribe to actual DOM native element.
In order to resolve this issue we did following :
Register one call back in Form class constructer to capture DOM “change” events triggered from Co-Browsing library i.e. happening outside angular zone as mentioned below:
Code Snippet
constructor(private formBuilder: FormBuilder,private elementRef: ElementRef,private _renderer: Renderer,private cdr:ChangeDetectorRef,private app:ApplicationRef,private zone:NgZone) {
zone.runOutsideAngular(() =>{
window.document.addEventListener('change', this.change.bind(this));
})
}
Define the eventHandler to perform below actions :
Run in Angular context using this.zone.run()
Use ElementRef to get the component’s template selector.
Run queryselector on input elements and compare with event’s outerHTML to check which element has changed in component.
Set the Formcontrol’s value for matching element.
PS: Here customerForm is ControlValueAccesor FormGroup type of instance. In your case it can be your form. We can generalize form( In case reactive) key traversal as mentioned in another SO post
Angular 2: Iterate over reactive form controls
Code Snippet:
change(event){
event.preventDefault();
console.log("DOM value changed" ,event);
console.log("component value", this.elementRef.nativeElement);
this.zone.run(() => { console.log('Do change detection here');
//this.cdr.detectChanges();
if(this.elementRef.nativeElement.querySelectorAll('input')[0].outerHTML === event.target.outerHTML)
{
console.log('Inside value updation');
//this.customerForm.controls.name.value=event.target.value;
this.customerForm.controls['name'].setValue(event.target.value);
}
});
setTimeout(() =>{
this.cdr.markForCheck();
})
}
This will set the respective values of elements(obviously via traversing loop) changed in component and validation should not fail as it’s happening in current context.
The core idea of above details is how to capture change events happening outside angular zone and updating angular application accordingly.
PS : I shall update the full code in github for other's perusal.
I have sap.ui.table.Table which rows are bound to an JSONModel.
var oListModel = new sap.ui.model.json.JSONModel();
//oTable created here (sap.ui.table.Table)
oTable.setModel(oListModel);
oTable.bindRows("/");
When the table is rendered, i.e. the DOM is created for this table, i need to reference to the DOM to pass the DOM elements (table rows) to a library which will make them draggable.
My problem is: How do i know when the DOM for the table is created after the model has been changed and the table is rerendered? I didnt find any listener. The view controller's listener onAfterRendering() didn't help me.
The model is filled with data after a XMLHTTPRequest is successful. When i set the model in the success handler of the xht request and try to access the DOM elments directly afterwards they don't exist yet.
Thank you for your help!
You can add an event delegate
var oMyTable = new sap.ui.table.Table();
oMyTable.addEventDelegate({
onAfterRendering: function() {
$table = this.getDomRef() ....
}
});
a better way is to extend the control see Using addDelegate to extend a control to use third party functionality
UPDATE
the example in that blog doesn't work anymore fixed here
I had a similar issue recently where i had to access an element after a smartform (where the element is present) rendered onto the view. I posted my query here as well as my final solution (based on the accepted answer of #Dopedev). I am using XML views - including nested XML views - here however and the onAfterRendering didn't help for me as well.
I guess you could look at this solution - like it's mentioned in the accepted answer, it may not be an optimal solution, but it sure works. In my case there is not much of a performance issue with the binding of the DOMNodeInserted since it is being called in the onAfterRendering of the nested view that consists of only the smartform with an immediate unbinding upon finding.
The condition if (id === "yourtableid") { } should be enough to identify and pass on. Since you have a table and thus several child nodes, unbinding is imperative at this point.
Mutation Observer is the preferred method but i guess you may need to check the browser compatibility table at the end of the page to see if it matches your requirements. There is an example here. I have used Mutation Observer (outside of a SAPUI5/openUI5 environment) earlier and found it very convenient(and performant) to listen to DOM insert events. In fact the sap.ui.dt package consists of MutationObserver.js
I noticed that when I set my defaultValue for a dropdown, altho it is correctly selected in the drop down when I first add my component to the page it does not write the defaultValue to the corresponding JCR until I edit the component and save it. Even if I just open the corresponding dialog and click OK now my component works as expected because the values have been added to the JCR.
I am sure there is an important piece that I am missing here, does anyone knows how defaultValues that are required in order for the component to render properly can be added to the JCR when they are first added to the page?
Like Shwan say's that's the way it works. The default values or empty texts are only for the dialog. They aren't persisted until the dialog is authored. The properties have to be set by a different method. CQ already ships with this feature and you can do it without any custom code.
Under your component , create a node called cq:template[nt:unstructured] . If all the data is stored on the component node itself , add the default values as properties to cq:template node with name same as the ones in your dialog. In case the data is stored in a child node add a similar node under cq:template node.
Source : http://blogs.adobe.com/experiencedelivers/experience-management/defaults-in-your-component/
I believe that is simply the way it works. The default value specified in a dialog does not get used until the dialog is loaded/saved, so until that happens the node on the JCR repository that is being authored won't have the default value.
We got around this on a project by adding back-end code that was tied to the component (a tag) so that when the component was loaded, if the property did not exist, it would be written with the default the first time. Ex:
if (wcmMode == WCMMode.EDIT )
{
if(!currentNode.hasProperty("SomePropertyThatWillAlwaysExistIfTheDialogHasBeenSaved")) {
currentNode.setProperty("PropertyThatShouldHaveDefault", GlobalConstants.TRUE);
currentNode.getSession().save();
}
}
Like Sharath Madappa say's that's the way it works fine if component name and jsp name same. If you dont have componentname.jsp under component or page, cq:template won't work.(Reference:http://labs.6dglobal.com/blog/2014-07-08/using-the-cq-template/)
If you hava componentname.html under your component, changed the node [cq:template] type to [cq:Template] instead of [nt:unstructured]. In this case, defaultValues can be added to the JCR when they are first added to the page.
I started with this tutorial http://dojotoolkit.org/documentation/tutorials/1.6/store_driven_tree/
after setting up my ServerSide Restfull Service everything is working so far. I made a contextmenu for the tree by:
<ul dojoType="dijit.Menu" id="contextMenu" style="display: none;">
<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconDelete" onclick="pages.remove(tn.item.id);">delete page</li>
</ul>
<script type="dojo/connect">
var menu = dijit.byId("contextMenu");
menu.bindDomNode(this.domNode);
dojo.connect(menu, "_openMyself", this, function(e){
// get a hold of, and log out, the tree node that was the source of this open event
tn = dijit.getEnclosingWidget(e.target);
// contrived condition: disable all menu items except the "New Page" item
dojo.forEach(menu.getChildren(), function(child){
if(child.label != "Neue Seite")
{
child.set('disabled', typeof tn.item == 'undefined');
}
});
});
</script>
Now I know on wich node the user made the right click for the contextmenu and delete it with "pages.remove(tn.item.id);" from the Database. To notify the tree I´m overriding the remove function:
remove: function(objectId){
this.onDelete({id: objectId});
return dojo.store.JsonRest.prototype.remove.apply(this, arguments);
}
Everything works as expected but if im now doing some other things with the items in the tree like drag n drop an item to the root i was deleting a child before. The tree isn't showing it correctly anymore. I think the remove method of the store only sends the DELETE query to the Server but don't removes the item from the store. How can i get the array of the items in store to check and maybe to delete items?
The dijit.Tree is a presentation of an underlying dojo.data model, and any changes that you want to make to the tree really need to be done to the underlying data store. See the description here: http://dojotoolkit.org/reference-guide/dijit/Tree.html#dijit-tree So, instead of overriding the remove function, you should instead use the dojo.data API to modify the store, and then rerender the tree to reflect the changes. The best source for looking at the various methods available is in the dojo nightly files. Specifically, the dojo.data files are here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/data/
var item = tree.fetchItemByIdentity("selectedItem"); //find the item you want to remove
store.deleteItem(item); //delete the item from the data store
store.save(); //save the change made to the store
I want to get the id of a node inside TinyMCE.
I searched in the documentation, but could not find this.
How can this be done?
First, it is important which node you want to get the id from.
If you want to get the if of the parent node of your selection in TinyMCE use
tinymce.activeEditor.selection.getNode().id;
EDIT: In case you have a single node in your editor you can access this node id using
tinymce.activeEditor.getBody().firstChild.id;
let say if you have id as txtatinyID
<textarea class="editorHtml" id="txtatinyID"></textarea>
so following will return txtatinyID in tinyMCE V4
$(tinymce.activeEditor.selection.getNode()).closest('body').data('id')
So it will find the body of the current active editor and on the base of it will look for body and in it will get the value of data-id.