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?
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
In my application I will eventually want to dynamically assign values to certain checkbox values but where I am at currently is this.
When the page first loads, a set of checkboxes load and when any of these are checked, a corresponding div is revealed nearby. In THAT div there is an additional checkbox that drops down a section of text that should match what the value of the original checkbox value is.
I have the click a box, reveal a box, click a box, reveal the text part working correctly but what it displays is hardcoded and I'm trying to figure out how to pass the values of the checkboxes around to tie everything together dynamically. Thank you for your assistance on this.
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 am trying to extract and assert on the text of the currently selected option in a drop down, and finding it harder to do than I expected.
The situation is as follows:
Open browser page with a drop down list on it
Assert that the currently selected item is X, the default
Click a button elsewhere that changes the value of the drop down
Assert that a part of the page based on the selected drop down has changed
Assert that the currently selected item in the list is now Y
The last step is the part that I can't get to work, and the second to last is what makes me believe that I don't have a timing issue, as other parts of the page have reacted to the altered drop down (this is in an Angular app, though I don't think that's adding to the problem).
The problem I think I'm having is that the selected attribute is set in the HTML and so is not being updated when the displayed value of the drop down is altered. So if I find all the option elements under the select in question, iterate over them and call getAttribute("selected") then the results of that don't change even though I can see that the displayed text in the drop down has been updated.
Attacking it from a slightly different angle, I tried to getText of the select itself, but that gives me back the text values of all the possible options, which makes sense.
The Java API has a getFirstSelectedOption which I was hoping to replicate, but it appears to do exactly what I'm describing above!
I have written a control panel for managing devices, however as we have imported hundreds of them, there are a lot of values that need to be manually set. I have an overview page that shows the most import information and I am looking at some way to allow the end-user to change those values by clicking them.
Right now they are just text in TD cells pulled from the Database. Would it be possible to do something like double clicking the cell changes it to a drop-down box of options and then when deselected it automatically saves it to the database?
I have been searching Google and Stack Overflow but I am not even sure what to search for to get an idea of how to accomplish this.
To do this you must (short version):
Handle click event on your value from table
Change(hide text and display input) text for input with setted value
Handle blur event on your input
If some changes have been made, send Request (by AJAX) to your php actions which save value in database. Or do nothing if there were no changes.
Change(hide input and display text ) input to text