I am working on a jQuery plugin where I need to manipulate DOM for some insertions and deletions and I am required to work with some specific class (say class demo). I have to make it work with Angular/AngularJS/JS or any framework.
Problem I am facing is How can I detect that particular class visibility in DOM If user is hiding that element or say loading another component or routing to another page. (like in Angular2/4/5 we normally do with ngIf etc. )
I came across this livequery but it does not work as expected. Any link/example/suggestion would be grateful.
PS: and also I don't want to provide any function from my code, which is required to call in their component etc
Related
TL;DR: I'm looking for slots but without shadow dom
I'm looking for a solution that should "change" something like:
<form-control>
element(s): like input, select, custom elements containing form elements
</form-control>
into something like:
<form-control>
<label></label>
<div>
element(s)
</div>
</form-control>
where form-control is the needed custom element; now specific for forms, but a general wrapper solution is a good thing to know
Solutions I think about:
using shadow dom and slots: that will be the natural solution, but until the form participation api will be widely supported it's not a solution; plus, including bootstrap css in every 'small' web component is overkill (and selecting only needed css classes is even more overkill), so I am using web components (with shadow dom) only at 'top' level elements (like a whole form, table, modal etc., the rest are only custom elements, without shadow dom)
"moving" children from custom element into that div: it works but if a child is a custom element then connectedCallback will be called twice (because it will be moved into dom); of course connectedCallback can be guarded (one time execution), but when the child element must async load something ... well, it 'smells' trouble; if somehow a custom element could be "moved" without disconnectedCallback/connectedCallback that should work fine, but I don't think that is possible
try to use (or inspire from) a bootstrap web component collection; unfortunately I could not find any framework based on bs5
Any idea will be appreciated!
I'm creating an app using Nodejs and Vuejs 3. In this app I have made a sidebar that gets all links from a routes file and present them. This sidebar consists in a component that parents a list of other recursive link components.
Since the links are recursive and many, I find it hard to deal with class toggling (active, showing, collapsed, etc.) on each of them and relate them to one another (if one is active the others shouldn't be) using only Vue. Should I use querySelector or any frameworks such as JQuery to handle them or should I try to stick with a pure Vuejs approach?
Edit:
I don't want to gather the community's opinion on it. My aim is to understand pragmatically why I should or shouldn't manipulate the DOM "outside" of Vue.
If you're using Vue then let it be in control of the DOM; mucking around directly will only create conflicts and woe.
(The same applies to other SPA frameworks such as React and Angular.)
The main reason not to touch the DOM is that Vue works by modifying the DOM on its own, and expects to have complete control over it: when rendering components the framework is removing old DOM elements, adding new ones, updating event bindings, etc; and a lot of it is optimized to only update the DOM nodes that need to be updated.
If you go in there and start making direct changes that Vue doesn't know about, then it's likely that your own changes will get overwritten by Vue the next time it needs to render, or that your changes will overwrite bindings that Vue is depending on.
If you're very knowledgeable about Vue's lifecycle and know how to control when it does and does not render, it is possible to work with both together -- but even then it's still not a great idea. Vue and jQuery do very similar things, but in utterly different ways. In jQuery you build up the page and then use DOM traversals and event handlers to modify it; everything lives inside the DOM. In Vue you build up a bunch of components that manage their own state and rendering; the DOM is basically a side effect of the application state.
By trying to use both together you lose most of the advantages of each of them in isolation, and introduce a lot of complexity in having to manage two competing theories of state and render management (not to mention dealing with communicating data between them). Every time I've contemplated embedding a jQuery widget inside a Vue app, it's turned out to be much easier to just rewrite the widget in Vue directly.
This does mean changing a lot of habits about working with the DOM that you may have built up from past jQuery work. It sounds like you're trying to draw the whole DOM and then build your control structure into it afterwards, which is a natural way to think if you're used to jQuery; in Vue you'll want to build all of that logic into components so the framework can do the work for you. I'd suggest making one Vue component for a link that manages its own state for open / closed / active etc, that recurses to its children only when "open". Then just call that once with the top of your nav data instead of trying to manage the whole tree directly after the fact as you would in jQuery.
I am new to stack overflow and this is my first question. Pardon me for any mistakes.
This question is more generic but i tried to search for an answer but could not find it.
Say i have a page and i am using jquery ui button() widget for all the button. What happens is i have a specific class defined for all the buttons on my page. So i can just specify $('.myButtonClass').button(); but whenever i render partial views which has button again i have to do the same thing in the partial views. Is there any way i can globally specify a transition for button or any element for that matter.
Here is a sample Fiddle which adds buttons on click. But the added buttons are not transitions as button widgets(I do not want to use clone).
http://jsfiddle.net/wjxn8/
$('.clsTest').button().click(function(){
$(this).after('<input type="button" value="Added" class="clsTest"/>');
});
Is this possible without:-
1) Adding the css classes for a button widget manually for all the buttons created.
2) Tracking DOM Changes using Javascript and perform transitions for all the button elements.
Thanks for your help!!!
Since you were looking for something else, why not trigger a custom event when you load partials or whatever:
$('.clsTest').button().click(function(){
$(this).after('<input type="button" value="Added" class="clsTest"/>').trigger('addButtonUI');
});
$(document).bind('addButtonUI',function(){
$('.clsTest').button();
});
http://jsfiddle.net/wJXN8/3/
If you trigger your event and have the document listening for it, then you can do whatever you would like. I could have put in there the ability to add more buttons as well, but this should get the point across.
What you are asking for, some event when a button is added.... you would need to come up with that yourself and trigger it when a button is added. There is this: How to detect new element creation in jQuery? which talks about a specific event that is triggered when new elements are added to the DOM. Haven't tested it, and it looks like it may not work on IE.
I'm not a huge fan of this, but you could poll for new buttons. Check out my fork of your fiddle (that sounds funny):
http://jsfiddle.net/lbstr/Hq97H/
Using your example, this would look like:
setInterval(function(){
$('.clsTest').not('.ui-button').button();
}, 1000);
As I said, I'm not a huge fan of this. I understand the desire for something like $.live here, but I still think its better to initialize your new content when you add it. If you are making an ajax call for new content, just initialize it when you add it to the DOM.
My silly polling code and $.live (which is now deprecated) might be convenient, but they perform terribly. Just my two cents. You know your code better than I do!
I am creating a site that allows viewing and editing the contents of the 'src-div' contents within the 'edit-div.' I am not editing the src-div directly, because its thumbnailed using css zoom property.
I have considered using knockout.js to bind both elements to an observable. Currently, I have implemented the feature with jquery .html() function: simply set edit-div innerhtml to src-div innerhtml on 'select', and reverse the process after changes are made to edit-div to update the src-div.
I am wondering if I really need 2 divs here, or if there is some way to actually view the same element twice on a page, and any changes made will automatically reflect in both 'views,' elimiating the need to copy innerhtml property back and forth between two elements.
essentially, this is like a mirror effect, without the flip.
the closest thing I found so far is:
http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Reflections/Reflections.html
Any recommended practices for performing this task are appreciated.
(Almost) everything you see on a page has a counterpart in the DOM. Everything in the DOM gets exactly rendered one time (apart from pseudo-classes). And every node in the DOM can only have one parent (no exclusions).
Unfortunately you'll have to clone the specific node and add changes to both, as there is no copy & translate mechanism in the current CSS documentation.
If you're using jquery you can use one div and "clone" it. You can read this for more information.
http://api.jquery.com/clone/
If you set the class of the div to the same thing, you can have changes propagated to both. Then you can apply .addClass to the second div to apply a "reflected" affect (if that's your final goal).
I'm using StackContainer as a menu but I'm having a problem to attach custom onclick events on "tabs" in stackcontainer.
My app is basically laid out like this:
header
subheader
content
Header has the stackcontroller tabs and content obviously shows the content. However when I click any of the tab elements in the header, I want to run a function that changes subheader accordingly. Now how I can do this? Content switching works great so no problems there.
I'm using ContentPanes as tab elements and I tried to put onclick straight on them and I tried with dojo.connect - no luck. I have experience with jQuery & plain JS but I'm a dojo newbie so excuse me if I'm missing something really obvious :)
The easiest way to do this will be to use the pub/sub mechanism built into the widget.
On child selection the StackContainer will publish:
dojo.publish(this.id+"-selectChild", [page]);
where page is the child widget being selected.
So you should use:
dojo.subscribe(myStackId, function(/* dijit */ selectedChild) {
// use the selectedChild to do what you want
});
As an aside, dijits provide normalised events which are camel cased. So you could connect to the onclick event of the dijit, but to do this you should use 'onClick'. However, you wouldn't necessarily guarantee that a child had been selected if you used this approach.
See http://dojotoolkit.org/reference-guide/dojo/publish.html