I am having two dropdowns , in which the second dropdown will be populated only after i select something from the first drop down. if the page is refreshedafter ajax_update the second drop down does not show the previously selected choice ??? How to do this in javascript?
You have a lot of choices for this. My suggestion would be to use the localStorage API to store the choice from the first dropdown. Then on page load, look to see if you have a value stored, and if you do, populate the first dropdown and call its change event to populate the second.
Have a look here for information on localStorage: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage
Related
I have a website which has 3 select boxes at the top. These select boxes are used as filters for a table I am displaying underneath it. When you change something on the select box I filter the table.
If I change the select box values and go to a new page and hit the back arrow at the top and return to the same page all of my select boxes changes are still there. However, the filter that I applied to the tables using javascript does not match the filter displayed. The table displays data for the default filters.
I though if I just run the filter function on page load, things would work again. But turns out the filter function runs way before chrome resets the value of the select boxes from the cache. When I set the breakpoint and started debugging the progression on returning back to page is:
1. The select boxes resets to default values (i.e the order of the `<option>` tag)
2. The table filters based on the default values
3. Chrome at some point decides to readd the filter
How do you guys deal with this?
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
I have created a driven database drop down menu on my website. It sends the selected value by the user to the database to be checked and returns a specific item.
Everything works perfectly now but I'm trying to pre select the first value so that the user will have the first option as default and can add it to cart directly and they also can choose a different size. So far, I tried 'selected' inside the option in the drop down but it doesn't do anything but displays the value when the page loads.
One last thing to mention, I'm using Ajax function to submit selected value and return result from the database.
I can think of two ways for this.
When the page is requested, make a call to your DB in your server-side code to store that value beforehand.
Use javascript's onload event to select the value as a part of a client-side script. You can use this answer as reference.
I'm having this issue where I have a table that depending on what option I select for the first column, the next column which contains a drop down, will populate with the appropriate values that users can select.
Here's an example
When the user submits the form, they're brought to a results page and have the option of going back to the first screen (where they select the drop downs etc).
Currently, I'm using the window.history.go() function to go back to the previous pages. However, the dynamically created drop downs aren't retaining the value that the user selects (the option that is at the very top of the drop down is always selected).
I'm currently using PHP for the scripts to generate the tables. Is there a way to fix this? Just need someone to point me in the right direction.
Thank you!
u can use history.pushstate(url+'#idx=x') when dropdown changes. and load the param values into dropdown when page loaded
I'm using PHP to pull from a MySQL table then populate an XML for the javascript to get that information.
Table results example shown here
I want to make a dropdown menu the the hobbienames then when that selection is made another menu to appear with the hsnames that match the hobbiename. obviously if null nothing will appear.
If the first dropdown is not very lengthy, and has a fixed length, then you can retrieve all the possible dropdowns and hide them initially.. On selection of an item from dropdown1 you can then display its corresponding dropdown.
In the other case, if the first dropdown is lengthy, then on its selection, run an AJAX function which will eventually populate the other dropdown.
Here's a sample code which you can use as reference...
http://theitbranch.com/transfer/country.zip