I am encountering strange behavior in a small Elm program with an HTML select element.
The options initially include an empty first item with a value of "" and 3 additional items with values "bar", "baz", and "foo".
When the page initially displays, the empty first item is selected, as expected.
If the dropdown is then clicked and "bar" is selected from the list, the dropdown then shows, and selects "baz", not "bar". Note that when an item is selected, the select element is re-rendered without the empty first option.
Here is code that demonstrates this problem.
Why is this occurring? Should I just leave the empty first item in the select options? That will leave an empty "slot" in the dropdown. Can this be avoided?
I initially found this in Chrome, but it also occurs in Firefox, so I suspect I am violating something in the HTML specification.
First off I just wanted to say, thank you for isolating the issue and giving us a small sample project that demonstrates the issue. It took a bit of digging, but I discovered that the html 'selected' attribute, is to set the selected value at page load. So updating it after page load will cause odd behaviors, we are to use 'value' instead. And on the flip side, setting 'value' on page load is ignored! Thanks html! ;) Source here
See revised code here
Related
I have a yes/no fields that controls whether the next 3 sections are visible (relevant) or not. It works fine, but as soon as the visibility state is changed at runtime, the sections cannot be clicked anymore in wizard view! I also cannot navigate to them using the prev/next buttons at the bottom. Is this a bug?
I defined rules for all sections that have a conditional visibility state:
relevant="$control-1 eq true()"
Is there another way i could do this, maybe as a "global" XPath expression?
Demo
This looks like a bug. We fixed a very similar one with #3547, but I entered a new bug since this is failing again, see #3610. Please follow-up there.
I'm working on a script with mechanize in Ruby. I'm trying to select the values of the form(dropdown), however the values for the second field of the form don't appear until the first field has a selection. It prevents the following -
my_form[0].options[2].select
my_form[1].options[2].select
my_form[2].options[2].select
my_form[3].options[0].select
because the second field doesn't have any value at this point. The selection of the first part works like it should, however.
The line in the form looks like this
<select id="DistrictId" name="DistrictId"><option value="">---SELECT---</option>
<option value="3">Alaska Gateway School District</option>
...
</select>
<input type="button" id="selectDistrict" value="SELECT">
I see there is a Select button after the field, however I'm not sure on how to click it and have the second field populate.
When I use the following
my_form.button_with(:value => "SELECT").click
I don't get an error, but it also doesn't repopulate the second field. I tried placing that line after the selection of the first field, and it gets me no further.
I haven't seen anything that is super helpful with dropdown menus.
Use a Login form with Mechanize was helpful in dealing with the form, but didn't help with actually selecting that button.
The other thing that I need this to do is to loop though all of the options in the drop down menus.
I've been able to find some things about dropdowns and python, which has also helped.
I can select the part with the
.options[x]
But I am unsure as to how to know when to end the looping. It looks like the elements are stored as an array, and so I can just do .each do on the forms. http://crabonature.pl/posts/23-automation-with-mechanize-and-ruby was helpful for going through the form, but it all comes back to having to select the top form value before being able to see the values in the fields under it.
We are using a Telerik Rad ComboBox to render a drop down. The issue is by default it renders a div and<ul><li> for the drop down list. We tried setting the RenderingMode to "Simple" BUT for some reason the RenderingMode property is not taking. We want the Simple property because it is SUPPOSED TO ouput:
<select><option></option></select>
instead it is still rendering
<ul> <li>.
On mobile devices we want the list to pop up the device's default select option viewer.
We found that there is a property for the ComboBox to set RenderingMode="Simple", HOWEVER, it does not seem to be switching out our RadComboBox to elements, it is keeping the default. I checked the HTML output in Firebug and nothing has changed. The RadComboBox is inside a RadGrid that is triggered when "Add new record" selected.
Any reasons why setting the RenderingMode to Simple doesn't work???
EDIT
I see it rendering the select in Firebug and the style is pushed way left -9999 and the position if fixed, I overwrote the CSS so that those came into view BUT the values are not taking or inputting into our RadGrid when we click save. It does not seem the items have the same values.
EDIT 2
Image 1. Even though we have RenderingMode="Simple" it still creates the 'ul li' version.
Image 2. It creates the HTML but according to the documentation the 'ul li' is supposed to be gone and the droplist is supposed to show up in place of it. Instead, as you can see in Firebug, it inputs BOTH.
Image 3. Shows both input types when I take the -9999px or the position fixed from the CSS can see both actually are rendered on the page
Image 4. Is the Code example. Very simple .Net using the RadComboBox with the RenderingMode specified but not working correctly.
i have a page where inputs are loaded dynamically on button press.
When the button is pressed, I add the source code to the innerHTML of the container element.
So if you press it it once it will contain .
if you press it again, it will add a second one, with name 'inp-2'.
The problem is that if you add one input, you fill it in with some text, then you press the add button again, the inserted text will gone, because - at least i think so - it keeps the original innerHTML, which does not contain the inserted text. This is happening in FF, Chrome. in IE it is working fine, because the innerHTML of the IE is updated by the user's interactivity; if you fill in an input then you view the source code, then you will see your text is in the input's value attribute, not like in FF or Chrome.
What do you suggest, how can this be solved in the most quick and efficient way? Keep in mind that I have simplified the code to a single input, but for each press of the button, a huge source code is added to the innerHTML (1 table containing trs, tds, about 9 inputs and text). thanks
If you want to continue using .innerHTML, instead of DOM methods that will actually append nodes, you will need to add "change" event handlers to those inputs. The browser is not required to synchronize the value attribute and the value property of the <input/>, but your event handler can do that in a cross-browser way.
Try something like this. The innerHTML should be updated each time the attribute is updated.
node.innerHTML += '<input name="inp-#" value="starting_value" onchange="this.setAttribute(\'value\',this.value);" />';
When I open form to edit values:
It doesn't change form values when I navigate with <> buttons
It opens New form with same values as first edited row, and when I click "Submit", it overwrites that row instead of creating a new item
When I click to edit another row, it always shows the form values for the first edited row – i.e. if I click New first and then edit row, it shows empty form.
So, in short, the first time form opens, the values are "stuck" whatever row I open later.
What can cause this? I remember it used to work OK some time ago.
UPDATE:
No with recreateForm I don't have this issue (I use it as temporary workaround).
Hm, I can reproduce this on jqGrid example, but not on Live Manipulation - on New in Version 3.7, Add/edit/delete on local data:
Click any row and edit it (open form)
Close form
Select any other row and click edit - form shows incorrect values (from the row that was opened first)
Click Add new row button in toolbar - form shows same values - which is very convenient, usually new rows are "almost" same - if only it would add new row, not update the existing one!
Of course in live demo Submit doesn't do that (it doesn't seem to work at all) but except for this symptoms are same.
Also <> buttons do not change data in form, though they change selected row - but from what I remember previously it used to update form values also to match selected row.
Probably you should post the description of your bug with "New in Version 3.7", "Add/edit/delete" as a bug in the in trirand forum.
The problem is that the bug exist in very special environment/data/settings. For example I tested my old local edit example modified to jqGrid 3.8.1 or in 3.7.2 and can not reproduce the problem which you describes. So you can use my examples as a template could it helps you.
Moreover in all examples which I use for real projects I use always parameter recreateForm:true. If you don't use it jqGrid not create a form, but try to use an existing with other data. It works in a lot of cases wrong. For example if you use any dataInit functions they will be called only once during creating of the form, which can make very strange affects. If you use edittype: 'custom' the usage of recreateForm:true is really mandatory (see this). So I recommended many times all people to use
jQuery.extend(jQuery.jgrid.edit, {recreateForm: true});
to set recreateForm: true as your default settings. You could save many hours or days of debugging of some strange effects in your edit/add dialogs.