I have an Accordian menu for navigating thru an external API (folder structure)
I am attempting to recreate the folder structure dynamically, as the user navigates.
The problem I am having currently, is that: as folders and subfolders are loaded, they lose (or never receive) the inbuilt jqueryui click handling (for un/folding)
I wish to save myself having to write my own accordian click handlers
but sadly, the structure of the (often nested) accordians is dynamically loaded and doesn't get any handlers assigned to it.
After browsing SO and randomly clicking on unrelated 'similar questions' I was able to find a most excellent solution - http://www.jstree.com/
this neat little jQuery plugin addresses every requirement I had for my folders navigation menu, and more!
Allow me to post their front page blurb:
jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.
jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery's event system, so binding callbacks on various events in the tree is familiar and easy.
Just a few of the features worth noting:
drag & drop support
keyboard navigation
inline edit, create and delete
tri-state checkboxes
fuzzy searching
customizable node types
All modern browsers are supported, as well as IE8
Related
I you have a highly interactive event driven page in rails 5.0.0.1 with Turbolinks.
Having different interactions on different pages, events like window.resize will trigger on pages where I don't really need it.
Is it worth to sacrifice navigation time by disabling Turbolinks to serve page specific javascript, or should I not care and just use if statement in Jquery to check if certain elements are present in the page using their ID.
What is the rails way of doing this?
It is not recommended to serve page specific assets such as javascript. This slows down the user experience since navigating to a new page triggers another asset download.
The whole point of the Rails Asset Pipeline is to gather your assets, minify them and concatenate them all into a single file that the browser downloads only once, the first time a user navigates to your page.
Yes, use jQuery to check if certain elements exist to run some behavior.
The way I've found useful is to not think about js behaviors as page specific but rather, widget specific. e.g. if there's a sortable table in the DOM then initialize the sortable table widget i.e. $(".sortable").sortable()
The above example uses the jQuery plugins pattern. Place your behavior/widget logic inside the jQuery plugin and it will only run when the selector finds elements e.g. $("#nonexistant").something(), something() will not be called. $("#definitelyExists").somethingElse(), somethingElse() will be called.
In the preceding examples, when an element is found and the function is called, the this of the function references the matched elements and you can run your behavior logic on them.
I want to dynamically add menu items to an mdl menu. However, I have not figured out how to register the new items with mdl so that they work properly.
Here is a codepen showing the different behavior. Notably, the dynamic item does not have a ripple effect, or close the menu on click.
That code pen uses componentHandler.upgradeElement on both the newly created item, and the original menu element to no effect. I've noticed that the properly created menu items also have another class (mdl-js-ripple-effect) in addition to some other attributes, but manually adding that class, or trying to futz with element data resulted in a lot of errors in the mdl javascript. I assume that a few proper calls to componentHandler methods is all I need, but I haven't been able to find any documentation on its proper use with subelements.
This sadly is currently pretty complicated and doing it will in fact have performance issues due to bugs. Not recommended.
The best thing to do would be to destroy the menu and rebuild it on-the-fly.
MDL is meant for more static sites, Polymer is recommended for sites needing more complex controls and dynamic building.
You could also go the route of not using our JS and writing your own component for this need.
Imagine that there's a button on one web page (not mine) and when it's clicked it performs some
Javascript. I want to have a button on my web page that performs exactly the same. So I need to
attach all necessary js files (but first I have to find them) to my html page and sometimes add some js to my html page.
What I usually do in this case? I inspect this button html element to see if there's onclick attribute for this button. If it is, I see the function called when button is clicked and then I try to search for this function in current html page and all js files attached to page. Also I need to find all dependencies (like jQuery, fancybox etc.).
If the button doesn't have onclick attribute I have to look for direct getElementById or jQuery selector pointing to this button with rest of code there. Sometimes there's no such a selector and I have to find a nested selector - really hard and annoying thing.
Is there any better, automated way for doing things above. Ideally after selecting the element in DOM (button in this case) and pressing some magic button I will be able to see all js files involved in processing this click and also js code in html page.
It's going to involve digging no matter what you do. But Chrome's Dev Tools can help with the attached event handlers, to an extent. When you right-click an element and inspect it, on the right-hand side there's a panel showing various tabs: [Styles] [Computed] [Event Listeners] [DOM Breakpoints] [Properties]. The [Event Listeners] one shows the listeners directly attached to that element. Of course, on a site using jQuery (which is more than half the sites using JavaScript at all), looking at the handler will dump you into the jQuery event handling code, but it's a start.
Just as a side point: While it's fine to look at the source of pages for inspiration, or to see how they solved a particular problem, or what plugins they're using to get an effect, etc., I assume you're not grabbing large sections of their actual code (as opposed to libraries and plugins with liberal licenses) without their permission, which is probably not cool.
I'm just starting out in Angular, and I get the MVC model for organizing data architecturally, but I'm not sure about building custom UI elements without using jQuery (or vanilla js).
For example, I want to build a custom slider, sort of like a progress bar that a user can click (or touch) and drag to change the value. Is angular built for that, or would it require a hack-y solution? Would it be some combination of mouseover, mousedown, mousemove, mouseup events?
AngularJS has its own lite version of jQuery. The document is here: http://docs.angularjs.org/api/angular.element
It is not supposed to handle heavy DOM manipulation and it will not support such thing in the future. If you want to build a custom slider, there is a plug-in called angular-ui: http://angular-ui.github.io/
However, Angular-ui uses jQuery as well. I also notice they don't have a built-in slider component, so my suggestion is that first you should use angular.element, if this cannot satisfy whatever you need, use jQuery.
I would like to have a JQuery Tree display my directories and files on my system in the tree format through one of these, where if I click on a text file, the actual file will open on a new page/same page. Do the JQuery Tree plugins support that feature as I wasn't able to see an example where it did. Also for my purpose which one of the JQuery plugins would be wisest to implement?
I used jsTree in a project where I bound click, right click, and double click events to each element using the usual jQuery .bind() method. You can bind an event to the nodes, get the related URL, and load the page.
I can't speak for the other plugins, but it was fairly painless to bind such events to jsTree.