I'm using jQuery nestable plugin https://dbushell.com/Nestable/ in my React App. I know that there will be problems when we use jQuery in React.
jQuery nestable solves my business needs, can't find the exact requirements in react drag/nestable components. So I have used this jQuery plugin.
The real problem is : while dragging an element by using this jQuery plugin, it clones the DOM, apart from this everything is in react.
Initialized the jQuery nestable functionality like below:
componentDidMount() {
this.$node = $(this.nestable); // this.nestable is a ref
this.$node.nestable({
group: 1,
maxDepth: 4,
expandBtnHTML:"",
collapseBtnHTML:""
});
}
the above code will let me drag the group2 among all other DOM elements like below image:
group2 is the draggable element here.
after dragged, I can see that group2 apperaed twice and I guess jQuery plugin clones the dragged element like below:
and in developer tools :
But In react developer tools, I can see that DOM is correct.
I don't know, how to rectify this problem. I'm unable to update the full code here because the code base is large.
In react developer tools, I can see that DOM is correct, and in native DOM is not !!
Is it possible to replace native DOM by virtual DOM after setState or is it possible for react to trace DOM handled by jQuery ?
I accept # Patrick Evans comments, I'm looking for a solution here or suitable react based component like jQuery nestable.
Any help on this will be helpful.
React-nestable seems to have the same behavior as that jQuery plugin and could save you a lot of trouble. Mixing jQuery with React is super easy to cause trouble in my experience.
There is one hacky solution here:
In Nestable you have on change event. So you keep order of list as a state of component and while you drag and drop an element you can update the state and list should be re-rendered.
Please see that you can use key in list elements to optimize it a bit.
I am sure this will solve your issue.
Related
I am having the same error as this person:
Add onclick event to SVG element
But I am having it in Angular which makes it even harder to deal with.
I want single SVGPathElement to be clickable & access component properties and functions in this click handler. But this is giving me the error 'property undefined' or 'function doesn't exist'.
According to this answer:
Add onclick event to SVG element
It's because all of the JavaScript must be included inside of the SVG for it to run.
But I cannot even do what the mentioned answer Add onclick event to SVG element suggested, since I get an error probably because Angular cannot create the component when parsing the html.
I also looked at http://xn--dahlstrm-t4a.net/svg/html/from-svg-to-parent-html-script.html (mentioned in the comments of the above answer) but that gave me the same error as in the picture above.
Now the second requirement to the solution to my question:
I am planning on having many different svgs and interacting differently with them. So manually pasting some <script> into the svg won't be a scalable nor maintainable solution for me. So actually I would prefer not doing this over the html with <script> tags at all.
If anyone has a good solution to solve both of my inquries in angular I would be greatful.
Additional Info:
I am using the ionic framework but I don't think it matters in this case
One possible alternative solution:
One could use ReactJS instead of Angular.
SVGPathElement<->Component interaction works in ReactJS without doing anything manually. I have no idea why but there is no such errors maybe because the component is not a class but rather a function. This would be great to know why exactly! I don't want to use ReactJS since I am not familiar with it. But maybe it's my best option to just switch frameworks since SvgPathElement<->Component interaction is a key part of my mobile app (it's like the seterra mobile app (https://play.google.com/store/apps/details?id=com.seterra&hl=en&gl=US)).
I found the culprit:
Don't do this (Angular doesn't allow it for some reason):
ngOnInit() {
document.querySelectorAll('.area').forEach((element: Element) => {
element.addEventListener('click', this.clickHandler);
}
);
}
Instead you have to add the click handlers manually like this:
<svg id="svgroot">
<path ... (click)="clickHandler()">
If anyone knows how to make this work by adding click handlers programmatically then this would make the solution a lot more automated/scalable/maintainable.
Adding click handlers programmatically to the SvgPathElement works in ReactJS for some reason, probably due to some internal differences between how the frameworks generate components.
TL;DR: need to find UI element from website on React JS code
Basically I'm working on a project where I need to put id tags on certain ui elements in a website. The code is written in React JS but there are a lot of pages and I cannot find which one each ui element is in. Is there a way that I can use chrome dev tools while on the website to find what page the code is for each specific ui element?
(Sorry if the terminology is wrong/confusing, I'm new to coding)
I'm not ok if I understand what you want, but if you wanna to get UI elements that exists inside React Component, I suggest you to use React Dev Tools:
https://github.com/facebook/react-devtools
If you want more help, please share a code snippet to try to help you more
Found out about vue.js and would like to rewrite some part of my jQuery code to vue. My problem is about handling the elements that are dynamically created.
If it was being written on jQuery, .on() on a parent element would work. Unfortunately, this doesn't work on Vue.js
I found a similar case here: http://forum.vuejs.org/topic/151/vue-js-not-listening-to-dynamically-created-elements/4
evan the creator replied:
You can't, because Vue doesn't work this way. Use v-if and components, don't add HTML on the fly.
I did not get it and can't find any help regarding this. Rewriting everything to vue would take a lot of time. Would like jQuery and vue to work together.
Again, How do I handle events of elements that are being created dynamically?
Since the nodes in a cytoscape.js graph are on a canvas I'm not sure how to go about marrying the two together.
I guess a generic version of the question is, how can jQuery find a node?
I've tried the cytoscape.js-cxtmenu circular context menu. And while it's very cool, we'd like a more traditional popup menu. In another SO question (which is closed) context.js was recommended.
Reusing the demo.js from that page it seems line I need to modify this line
context.attach($("#layer2-node").get(0))
and replace it with something like
context.attach(document.getElementById('cy').elements())
however, that doesn't seem to work.
thoughts?
Generally, you have to create dummy DOM elements per node as needed to call a DOM library. This is the approach the qtip extension uses, creating divs on demand.
If you can specify positions/offsets in the lib, then you could alternatively just use your container DOM element.
I found jquery mobile is not rendering correctly when the element is generated by knockoutjs (or probably not rendering correctly when element is generated dynamically). See the demo at http://jsfiddle.net/wRRZk/1/
updates:
One solution is to load jquery-mobile js file after KO binding finished as shown in http://jsfiddle.net/wRRZk/3/, however this doesn't solve the problem that jquerymobile render fail when changing KO model dynamically, as shown in http://jsfiddle.net/wRRZk/4/
I think you'll need to tell jQueryMobile to create those elements into the jQM enhanced version using the API. Check here :: http://jquerymobile.com/demos/1.1.1/docs/pages/page-scripting.html and look halfway down for "Enhancing new markup" and the section just below.
As for the create/refresh ... might need to be somewhat judicious in know when and where you're adding new stuff, and whether a create or refresh is needed.
I've done a new version of the jsFiddle here :: http://jsfiddle.net/wRRZk/5/.
I'm also removing from the model afterwards, which does seem to remove the links too, BUT, I think that may also be because the jQM enhancement is keeping the same anchor, thus the reference knockout as is still valid.
Not too sure how well that will work for the other enhancements done by jQM.