I'd like to have a bunch of SELECT dropdown lists on my page which can be empty initially. When the user clicks on one of them, I want an AJAX call to be made to the server to get the desired list for the chosen dropdown. The results of this AJAX call are then put inside the dropdown and the dropdown then works as normal.
Is this possible to delay showing the dropdown list expanded until the AJAX call is complete? I have currently binded an event to the Focus event of each SELECT dropdown and that almost works, except the user is shown the empty list first. When they click away, the list then is populated with the results and works correctly from then on.
Ideally, I'd like it to say "loading..." when clicking on it, then replace this with the results without the user having to click away and then back again. Not sure if this is possible though.
I don't mind moving to a jQuery dropdown as opposed to the standard HTML SELECT in order to make this work.
Is this possible to delay showing the dropdown list expanded until the AJAX call is complete?
No. You don't get control over the internal behaviour of selects. Most browsers won't let you trigger an open click programmatically.
Consider using a faux-select made out of divs instead.
I think you have 2 options - 1 - make sure you fire the event after the AJAX call is complete, or fire the code that the event would call after the AJAX call is complete, or 2 - paut a setTimeout in the event and estimate the time it will take to make the call.
you can also cheat: onclick , substitute the options with one that just says "Loading..." and let it display normally. Then, when you have the correct data, you put it in the select and make it display the dropdown list again triggering the click event if necessary.
Does that make sense?
Related
I have three select2 lists next to each other, first independent, second dependent on first, third dependent on second (cascading lists), that works as expected when I normally populate them by selecting some options. I have created a dynamic action that fills these items with values that I calculate when I click a button, but after the click, only the first select2 have selected value. The second and third value remains empty. When I check the session, all items have value in them. It appears that when I click the button that for a millisecond list are filled but after that values disappear. So my question is, how do I transfer values from server-side to client-side. I tried to refresh items, I have played with jQuery without success, also I have tried to separate dynamic action to set values separately but nothing worked. Values populate correctly so that is not the problem. Please help
Thank you in advance for your answer.
Is lazy loading checked for the select2 that are subject to this behaviour (Item -> Setting -> Lazy loading)? If so try unchecking it
Ok, I'll try to explain this as best as possible.
I have a main html page with a dropdown. When the dropdown is clicked, the jquery loads another external html into a DIV on the page. There are a couple of dropdown items, so 2 different external htmls are being loaded into the same DIV depending on which dropdown selection was made. That works fine.
The issue I'm having is that on the additional html files that get loaded, I have some jquery that updates labels based on buttons or links clicked in the page. Everything works fine till I use the main dropdown to change the page/div selection, and then any jquery inside the additional HTML files seems to act multiple times, with the # of times equaling how many times the dropdown has been selected.
So for example, if I select "users" from the main dropdown, it loads an html with a list of users where I can remove or add new users and then add some groups to that user. The first time I load this template, things work fine. If I go back and reselect "users" from the main dropdown, now whenever I add a group or click a link to make user changes, it acts as if I have clicked it multiple times. If I reload the entire main page, this issue stops till I reselect the dropdown again more than once.
Is this an issue somewhere with jquery or could it be some other bug?
The fix was to add event.stopImmediatePropagation(); inside the click handler in the div template.
$(document).on('click',"[name=removeCategory]",function(event) {
event.stopImmediatePropagation();
...
Thanks for your time.. My trouble has been something I am unable to resolve. Hence this post.. I have an <asp:DropDownList> which is data bound in the code-behind. Everything is working with exception to the actual drop down list of items only rendering on the first click of the control. If I click outside of the control, the items/dropdown collapses and I can reclick the control to rereveal the items. However, if I select an item, any subsequent clicks on the control do not result in the rendering of the dropdown/items. I am so stumped here. What am I missing? Thanks..
I tried successfully to disable every input and select in my page:
$('input').prop('disabled',true);
$('select').prop('disabled',true);
But in my page I have two picklist, the second one is dependent from the first in SFDC.
And when I disable every select, the dependent is not disabled.
I try to hide it, but it doesn't work either!
It only works from the Console, but I need to put these controls in a Js function.
I've found that dependent picklists are not rendered on the page in time for code in a ready function to affect them. The only way I've been able to make changes to the dependent list is to do it in a setTimeout method that fires in 1000 milliseconds or so. It's not ideal, but it does seem to work.
Lets say that I have a drop down list that I want to create "on the fly" when the user interacts with it.
For example: the drop down list only has the the option "Attach a file". When the user clicks/interacts on the drop down list, I need for it to generate, at that moment, all the available files they can attach (which depends on other interactions of the form... hence why I need an "on the fly" method).
My problem is trying to find the appropriate event as a trigger.
If I use onFocus, then IE tries to load the original drop down list and then generates the new drop down list, resulting in the user to essentially need to double click the drop down list to interact with it. In Firefox, there are no problems with this method.
I then tried switching to onMouseOver which works great in IE, but not so much in Firefox. The difference in the two is that in IE onMouseOver only triggers on the drop down box and not the drop down list and in Firefox it triggers on both (so you are trying to select an option from the list and it keeps re-generating the list on the fly, which is preventing you from interacting with it).
Any ideas?
Have you tried onClick?
Also you should put some logic into the code that fills in the options. If nothing has changed on the page, then there is no need to refill the drop down list. So if you store the state of the page somehow, you can check if the new state is different from the old state, and then fill in the dropdown if it is.