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.
Related
I am building a website and have previously built navigation using both buttons and anchors. I am confused which one to use for tabbed navigation.
I have looked at this question/answer which essentially came down to:
Use <a> when you are redirecting to another page as this is the intended use of a hyperlink.
Use <button> to carry out an action like a form submission, or to execute a function.
This makes a lot of sense to me, but my particular site is an app with tabbed navigation. I have a few pages that are being built by manipulating the DOM, but the site link remains the same, and the navigation is actually just replacing existing dom elements with new ones.
In this case, is it better to use buttons for navigation, or should I just always stick to anchors even if they aren't "redirecting" the page traditionally? I know that some of the differences are just subjective, such as the out of the box styling differences, but are there considerable drawbacks for using one over the other in tabbed navigation?
Semantically speaking, this sounds like same-page navigation to me. As per standards, use the <a> element for this purpose. Then add an event listener for any JavaScript side effects.
Read the standards of the <a> element here - on whatwg.org.
Read about the <a> element on the MDN documentation - here.
Hope this helps.
Is it possible to disable an item from a FilteringSelect using a store?
The documentation shows an example of disabling an item, but only if HTML markup is used, and nothing is mentioned about select widgets using a datastore.
Looking at the source doesn't give any clues either.
If it matters the version of dojo used is 1.9
After viewing at the source code I notice that dijit/form/Select extends from dijit/form/_FormSelectWidget which in fact makes it possible to retrieve and disable options in a select.
dijit/form/FilteringSelect however does not extend from the same widget but rather from a normal dijit/form/MappedTextBox (because of the typing abilities). Because of this, I'm quite sure it's impossible to do it out of the box, using a store or not (I wasn't able to get it to work without a store and didn't find such an example at the reference guide).
If you really need such a feature, I would suggest looking at the code of dijit/form/FilteringSelect, dijit/form/Select and dijit/form/_FormSelectWidget and trying to extend from one (ore multiple ones) and implement these features by yourself. The only question I ask myself is that, if this functionality isn't implemented by default, there might be a reason behind it.
Hi I really could do with a point in the right direction with this question.
I'm trying to fathom object orientated javascript, but am having trouble getting my head around binding dom elements to objects.
I would like to make a little animated widget type thing for my web page. the widget will be just simple drop down tabs , (like tabs from an actual folder) I want the tab to drop down a bit with a mouseover event then raise up with mouseout.
here is my current implementation, it doesnt work well at the moment it's just a mock up
http://bombinglish.com/
I want to make a class for the tabs , which will include the open and close animation methods, methos to add events, and other necessary fields. then instanciate a new object for each tab. but how do I do I tell each object that it must must respond to the corresponding mouse events, or to put it another way how do I bind the DOM element to the object?
If you are using Javascript just for presentation logic, then I don't think it's worth anything to try and get wild with OO.
If you have that at the top of every page, you could simply label the tabs with a unique class name. Then in your Javascript file you bind a mouseover event on every DOM element with that class name.
Perhaps, others have differing opinions on this however.
I'm trying to get dropdownchecklist jquery plugin working with ko. I've wired up custom binding handler but dropdown won't populate with options. Please check my fiddle: http://jsfiddle.net/amitava82/wMH8J/11/
Appreciate your help. Thanks!
This is because you create dropdown before binding KnockoutJS. How does this dropdown work? It creates additional divs and spans which copy the content of select and create nice looking list. After that bindings are applied and they modify the select (as they should), but dropdown is not updated, because this library is kind of static, i.e. it copies the content of select only at the time of calling.
I've updated your jsFiddle so you can see temporary fix. What I mean is that it works now, the binding is applied before creating dropdown. The only problem is that changing options field in viewModel won't affect the dropdown. What you probably need to do is to use subscribe method. You have to monitor changes to options field and if they occur you have to recreate the dropdown. That's an easy way at least.
#freakish answer will work for most static content, but for anything dynamic using templates, for example if or foreach bindings, or you need to support underlying data updates, such as more checkbox options "suddenly" becoming available, it will not work.
An example of a really simple $.button binding apply which can be used to wrap the more simple jQuery calls. It's a simple matter of adding more members to controls to make them available in bindings.
The case with jQuery Dropdown Check List is a bit tricky however, since you obviously want to use the built in options handler, but you need to run $.dropdownchecklist after the options handler has run, as it creates the DOM elements that jQuery depends on. By wrapping the built in options handler, we are always called in the correct context.
In my experience of usage (our project makes use of about 10-15 custom bindings), you'll average about 10-20 lines of actual JS. If you start ballooning into +100 lines, I find it's a good idea to refactor, and rethink. I hope this helps some :-) I've been using Knockout for a few months now at a major UI implementation project at work, I've really learned alot, and I'm amazed at this stuff.
I have a series of select dropboxes setup, with content that dynamically updates depending upon the preceeding selection. It works fine selecting in series.
When I try to go back to the top and start again, even though I have attempted to reset all children using
my_select.selectedIndex = 0;
The child select boxes remain unchanged. I had thought it was a Javascript error, but found the JSFiddle example actually worked, but my code within JQuery mobile does not work - leading me to believe it is a JQuery Mobile related issue
You can see a JSFiddle example at http://jsfiddle.net/vinomarky/xfcdF/
Steps to replicate:
Select 'Casing' from Type
Select 5 from OD
Change Type to Tubing
The JSFiddle example behaves as it should - resetting children to "-", while my 'live' JQuery Mobile example does not
Any ideas as to why?
You're manipulating the DOM behind jQuery Mobile's back but never telling jQuery Mobile that anything has changed.
You need to call the refresh method after you change the underlying <select>:
refresh update the custom select
This is used to update the custom select to reflect the native select element's value.If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu.
So you need to add things like this:
$('#od').selectmenu('refresh');
at the bottom of your change handlers. The element to refresh does, of course, depend on which change handler you're in.
Demo: http://jsfiddle.net/ambiguous/n3VXe/
Your fiddle worked fine because it didn't use jQuery Mobile at all.
Also, you shouldn't be using onchange attributes in 2012, you're loading jQuery so you should use it to bind handlers to the events you're interested in. You might want to replace all your direct DOM manipulation with jQuery as well.