Angular 5: how to make dynamically created components draggable with jsPlumb? - javascript

I'm really struggling integrating jsPlumb into Angular.
I need to make some elements draggable, and I have no problem if I create a static HTML.
The problem comes when I create components dynamically, jsPlumb just seems to ignore those. I made sure to have the id properly set, but no luck.
As it is a bit difficult to explain I made an example, which you can find here: example demo
Any help would be much appreciated, thanks in advance

I solved it calling the jsPlumb draggable() method in the ngAfterViewInit life cycle of the newly created component.
I'll post the link to the demo in case someone needs it: jsPlumb demo

Related

My bootstrap carousel is not working properly in react

I don't know why my carousel's not working properly, can anybody tell me how to fix this issue.
My codesandbox link :- https://codesandbox.io/s/nice-heyrovsky-8yucf?file=/src/Prompts.jsx
You are creating carousel-inner multiple times but in reality you only need to render that one time and render carousel-items multiple times
I refactored your code a bit too so it only talks to the relevant dom elements
Also, I somewhat agree and disagree with christ here. Yes you should opt for react-boostrap library for this kind of stuff because they provide components for every item however if you ever use it then do explore the rendered version of it on the browser and then you will realize that its the same as a simple bootstrap library with same class names etc. But its mostly depends on how you use any library.
Anyway, I hope this codesandbox helped you if didn't then let me know. Happy coding
https://codesandbox.io/s/suspicious-tu-55u2h?file=/src/Prompts.jsx

creating and destroying shieldUI widgets

I am coming from a different development background with a very little jQuery and/or shieldUI knowledge. Can someone please very shortly explain how to remove/destroy shieldUI components or widgets? I don't see any special widget method therefore I assume this is done with jQuery. By destroying I mean removing everything down to (including) markup.
Also, what happenes with widget when calling hide()? I see that markup is somehow stripped down (removed), but some wrappers remain. Is it safe to call another widget setup with the same "id" ? will it overwrite? will it cause object orhpans?
As you see I am missing some very basic "how it works". I am a quick learner so please, just few basic pointers will do. Thank you :)
EDIT: found destroy widget method under "swidget()"...what is swidget?
swidget() gives you a reference to the component instance, through which you can access methods and properties, such as height, width, refresh(), destroy(), etc.
Further, with respect to the question at hand, regarding the destroy method and approach - the ideas is, that whenever you need to refresh some data on the component, you can recreate it, rather than calling a method such as rebind.
This is demonstrated in the following demo:
http://demos.shieldui.com/web/rangebar-chart/related-charts

(jQuery to Vue.js) Dynamic element event handling

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?

JsPlumb doesn't make connections when using non-default instance

I'm going to use separate instances of jsPlumb for each canvas.
I'm using new features like Continious anchors and StateMachine connectors.
But I face the following issues:
First of all, I initiate new instances with specific defaults, and do not see them being applied.
Secondary, the connection is not established on drop. I thought scope is the reason of an issues, but no.
Here is an example http://jsfiddle.net/CjBdX/34/, where you can reproduce issues stated above. (Please click initiate anchor before using demo) When using only one _default jsPlumbInstance, everything seems to work fine.
Please help me find a reason this code does not work.
Thank you very much in advance!
Thanks to project author, Simon Porritt, all bugs wich led to my issues are now fixed in the latest version.
Thank you very much!

How to create 2 Image rotation carousels on the same page using one jquery script file

new to jquery need help please!!... - I'm trying to create two carousels on the home page using the example below but doesn't seem to work.
I realise that the example is using ids, tried to change them to classes but didnt it do much.
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
Thanks
An important philosophy in jQuery is "Don't reinvent the wheel."
Just use a plugin for features like this, such as Easy Slider!
Here's a demo of more than one on a single page
Oh, and in the future, be sure to describe what doesn't work as well as your code if you want people to actually be able to help you with your specific problem.

Categories