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.
Related
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.
I'm building a website using the ACF plugin (Version 5 Pro), and I'm setting up a button on a page template, which by itself isn't the problem. The problem is that depending on the specific content of each individual page using that template, the button can have one of several different appearances. What I'm trying to do is set things up so that I can upload all the buttons into the default value section of the ACF field ahead of time, and then every time I make a new page using that template, simply select the appropriate button from a radio button, a dropdown menu, or something similar on the backend of the page. I plan to be constantly uploading small amounts of content using this template, so not having to manually select the appropriate images on each page would save me a lot of time.
I've googled around and there wasn't a good answer I could find anywhere, so I'm hoping one of you more knowledgeable folks could help me out!
(And before anyone proposes this as a solution, no, the content of each page isn't something I can define just using programming. It's a little more abstract and needs human input. If all else fails I can just make multiple templates and simply select the appropriate one when I go to make a page, but the way I'm trying to do it now would be a lot cleaner).
You can try ACF Flexible Content:
https://www.advancedcustomfields.com/add-ons/flexible-content-field/
Using Flexible Content field, you will be able to create multiple fields (button 1, button 2, etc) including a WYSIWYG editor and build the buttons HTML adding the default value of the field.
You can read:
https://support.advancedcustomfields.com/forums/topic/html-default-values/
However, I think you'll get in trouble making your buttons dynamic with this approach... so I'd suggest it will be better if you keep some parts of the buttons (like URLs) dynamic, using an extra field to enter the URL, anchor, etc.
I am building a web application that will have a fair bit of forms. The html forms are generated using php.
One of the things I came across is this:
I have a drop down box for the user to select his country. Once he selects the country, a call is made to the server to fetch a list of states within that country and populate it in a drop down box.
Initially, I thought I could provide 2 options:
An enhanced jquery version where ajax is used to fetch the states and the populate it in a drop down.
Where javascript is not availiable, the whole page is submitted to the server and then rerendered with the new states in the drop down.
However, onChange() requires javascript. So if someone where to visit the form without javascript enabled, there's no way we can deal with the second option, since javascript is required to submit a form using onChange().
What are some ways to deal with this? My only solution at the moment is to just make javascript mandatory. Users without javascript enabled will see a message saying that the page will not work properly.
Some sites:
Hotmail.com - Refuses to show anything except a "javascript is required message"
Facebook.com - Tells us we should use the mobile version of the site.
Google Maps - Does not work. No message to say javascript is required.
Gmail - Falls back to basic html.
Google account - Does not work. No message to say javascript is required.
Is it acceptable to require users to have javascript enabled at the current state of the web (august 2011)?
Just came across this possible solution:
http://cita.disability.uiuc.edu/html-best-practices/auto/onchange.php
I could perhaps add a button which the user can use to select their country. This should allow us to reload and render the form with the states drop down without any javascript.
You can provide a drop-down of states and tell the user to leave it blank if not applicable. If JavaScript is enabled, it can remove the drop-down until a country where it is applicable is selected.
No, it is not acceptable to require JavaScript; many security-conscious users use NoScript, for example, and would prefer not to turn it off.
By default you should load all possible values into the second dropdown, then clear them out on page load with Javascript. That way people without Javascript enabled can still choose the correct option.
I'm guaranteed to take flak for this, but whether you support no-JS or not should be your call. If you think your userbase is likely to have a sizeable portion of people who disable JS, then you should give them a site that works, but not optimally. If you think most of them will be running with "normal" (air quotes are important there) browsers, then you may consider dropping support for no-JS users.
I am NOT a professional developer, so take my input accordingly. Here are my observations:
I support a website for a wedding cake vendor. Upon observing the competition, all the more appealing sites are embellished (tastefully) with slideshows, dropdowns, animations, interactive form validation, etc.
When scouting for methods to incorporate these features into our site, I found that mostly every classy method was based in javascript.
Figuring it was better to present ourselves as the classy act we are (humble smile), I have decided to require users to have javascript enabled. We've been up for 7 years, and I have not received any complaints. All work on mobile devices.
A compromise option is to start with your State drop-down populated with the states of whatever country your business is in, e.g., all US states, with an extra option (preferably at the top of the list) that says "Other, non-[yourcountrynamehere]". Next to the State drop-down have a text input where the user can type the name of their state if it's not in the list. If JavaScript is enabled then on document-ready you can hide the text input and go with your Ajax solution. Without JavaScript the user has a fully functional page that doesn't even need a reload.
What I ended up doing is to add a button beside the drop down that says "select country". Users without javascript will see this button. Upon clicking it, the page will reload with the list of states rendered.
For users without javascript, this button is hidden, and selecting a country will automatically render a new drop down containing the relevant states.
I'm trying to build something similar to Facebook's privacy selection menu, except without the 'custom' option. It will only list a few options such as 'show to all', 'show to friends only', or 'completely hidden'. Right now I'm thinking of using simple JavaScript to change a hidden input field to the new value they click on, so if they clicked on the division for 'show to friends only' it would change the corresponding field, say 'email_privacy', to 1. Is there a better way to do this or am I pretty much on track?
P.S. I am not planning on using a select element, I was planning on building a custom drop-down menu using CSS since select elements are so highly non-customizable. I'm doing it this way to save space, rather than having this massive selection menu at the right which takes up a bunch of space.
Note: I'm not really interested in using jQuery, that's just extra libraries and crap that I don't want to load. I can do it in JavaScript just as easily so I might as well use that.
It sounds like you're on the right track. If you're planing on doing a POST when the user clicks the submit button containing (amongst other things) the privacy value, then you'll need to pack it in the POST data somehow, and a hidden field is a way to do it.
Alternatively if you were interested in making use of jQuery (which I know you said you weren't but just putting it out there) you can perform asynchronous POST requests passing along with it arbitrary data, such as in this instance the privacy setting, without needing to 'copy' it into a hidden field.
Both options work just fine though.
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.