I am trying to make a checkbox grid that some of the values are read only (it is a list of features and some features are required but I want the user to be able to see them all in one place) and retrieved via an endpoint into a store.
I tried making the items unselectable, but I could not get it to function. So, I currently have the beforeselect listener returning false if a particular feature phrase pops up (voice in this instance) so that I can possibly add similar later. The problem with this is that the header select all box will not toggle since not every checkbox is checked. Looking at the JS in the browser shows me the checkbox is a span (which personally strikes me as an odd choice but nothing I can do about it), and I haven't been able to trace what is going on behind the scenes.
The question is this. Is there a better way to make some of the rows unselectable (and thereby uneditable) while keeping the select all working properly, or is there a way to manually toggle the header checkbox since all it does is enumerate through the grid and either check or uncheck based on its state?
Thanks.
Related
I generate the table from user inputted data, the user can change the data after the page has loaded and I have to adjust the checkboxes accordingly (regenerating the code)
I'm trying to:
Call a JS function when a checkbox is ticked
Be able to get states of every one checkbox individually (list of all checkboxes and their values also applicable)
Set the values of every individual checkbox
I didn't see a way to do it, because in the source code, there are no checkboxes - only the table setting. Thus, I'm unable to set every individual checkbox its ID.
I wonder, is it possible to: get the code that is generated when the browser loads my page and the code the JS generates and serve it to straight from the server generated, but with individual IDs for every checkbox? In this case, how would I get the state of a checkbox?
If anything is unclear, feel free to ask for details.
Thanks in advance.
Do not use the mdl-data-table--selectable class. Instead, refer to https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes . It's already compatible with the actual MDL version, but in version 2 there will be ripples for these buttons...
(I myself finally solved the problem by avoiding tables and cooking a list class and using list for my information.)
A row is cheked when it has the class is-selected:
<tr class="is-selected">
</tr>
You can get and set the check state in Javascript by toggling this class.
I have a ListBoxFor and the first item is All Values. I already have the list box set to allow multiple selections. I would prefer to make it so that if a user selects the All Values option they are either asked if they want to clear out all other selections (Use All Values) or keep their current selections (De-select All Values). I would be ok without the user dialog asking them what to do and just automatically clearing out selections, but that is less preferable.
At first glance it seems that Javascript/jQuery is the best route to go about for this. I wanted to check to see if anyone knew of built in functionality for ListBoxFor that does this. The other option that I see is building a custom html extension. Even with this I still only see JS/jQuery being built and auto generated.
I've looked everywhere on this.
basically what I have is a script that changes the value of some fields based on a radio selection.
For example: Think of it like a radio button that gets credit card data.
it works initially when the page loads and selects a radio. It will correctly load the data of that radio button.
Now when I choose to edit the fields manually, using it like a "new card" form, if I change my mind and go to select a presaved card, it will no longer update those fields I edited manually. It will completely ignore my request for it to change values via my javascript code that was just previously working. Note: It will actually still continue to work for any fields I left alone *did not manually type into/edit
so I was just wondering who else had that problem and what one does to fix it.
I am not sure if I understand exactly but I'll take a shot. My suggestion would be set apply a css class like "is-dirty" to the field once it has been updated and then you check to see if a given field has that class before updating it.
I'm pretty sure I can't do what I'm actually asking, but am wondering if there is some sort of workaround for the issue.
I have a page that has a drop down SELECT form element with several options. If one particular option (in this case, the first item) is selected, we show additional content (via jQuery). This works fine.
What happens, though, is that if I select item 2, the additional content disappears, as it should. I then go to a different page and then hit BACK. A that point, the page properly has kept that additional content hidden (as it was the last state) but the SELECT menu has been reset to the first item. I then have to click the SELECT, pick a different option, then select it again picking the first option, which finally brings the additional content back.
I can't trigger Javascript from what I can tell on a cached page (or is there a way?) Any other clever options?
One option I've come up with is to apply some sort of mouseover action to the area that houses the SELECT menu that does a quick 'reset elements' check. This seems a bit hacky and, of course, will produce an odd screen redraw unexpectedly for people.
You can record that the user action has taken place and re-execute it using JavaScript. You can store it in a cookie, then check for it on page load and reset the elements you want.
I have a page that uses jQuery to create a number of <input> DOM elements dynamically based on what user picks from a <select> box.
Let's say the user picks 4 from the select box, my script dynamically shows 4 input boxes.
The problem is when the user refreshes or goes back to this page (with the browser back button). The elements that are created dynamically are not repopulated to their last values, while all the other 'static' elements are.
I was thinking I could create a hidden input that would be serialized through javascript with the contents of the dynamic boxes, then read from it on $document.ready and then repopulate my boxes.
Is there a better way?
legenden - there are a number of possible solutions to this, I would check out these history plugins for one:
History Remote
jQuery History plugin
Deep Linking plugin
They are a little fidgety, but you should be able to hack up something positive. I will also add, that this can probably be done by storing the dynamically elements in a cookie(s) and somehow repopulating. Check out the jQuery Cookie plugin. Hope that helped you get started.
You need to manage history yourself if you want things to work in this way. You need Really Simple History.