I have encountered a strange behaviour using dijit.form.select inside a tooltip-dialog. Here's a shortened part of my code:
<div id="toolbar" dojoType="dijit.Toolbar">
<div dojoType="dijit.form.DropDownButton">
<div dojoType="dijit.TooltipDialog" id="tooltip">
<input dojoType=dijit.form.TextBox type="text" id="textbox">
<select id="select" dojoType="dijit.form.Select">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button dojoType="dijit.form.Button" type="submit" id="button">click</button>
</div>
</div>
</div>
Whenever I open the toolbar and the form displays, the tooltip dialog will close, as soon as I choose an option from the select in IE only! FF is ok ...
My workaround for now is to use a normal select (I just omit 'dojoType="dijit.form.Select"'), but for layout-reasons I'd like to have a dijit.form.select.
Any hint is appreciated.
Greetings, Select0r
Using a normal "select" is not an option as I need to change the options dynamically which really is a pain with a normal select. I'd also like all selects on the page to look the same.
dijit.FilteringSelect will not show the same error but requires a different handling of changing the options dynamically. I also don't like the dropdown being an input field.
So I've come up with the following workaround, which still is not an acceptable solution but at least something I can live with for now:
<div dojoType="dijit.form.DropDownButton" id="DropDownButton">
<div dojoType="dijit.TooltipDialog" id="tooltip">
<input dojoType=dijit.form.TextBox type="text" id="textbox">
<select id="select" dojoType="dijit.form.Select" onChange="dijit.byId("DropDownButton").openDropDown();">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button dojoType="dijit.form.Button" type="submit" id="button">click</button>
</div>
</div>
dijit.Toolbar was removed, as it was of no use.
the Select will now call the DropDownButton's method "openDropDown" onChange, showing the TooltipDialog again.
Now I'm able to use the TooltipDialog in IE - but still one issue remains: the TooltipDialog remains hidden in IE until I move the mouse a pixel. But at least I don't have to click on the button again to open the dialog.
Related
I created a simple table to form my menu bar some of which will just go to another page and that works fine. I wanted to create a simple drop down select and option to go to specific pages but cant seem to get the value= to go to the page, ie: I
Corinthians selects I Corinthians but does not go to the page. .... im missing something !
<td bgcolor="#ffffcc" align="center" valign="top">Bible
Studies<br>
<div title="Please ck back for these important topics, It
will be worth the effort !"><font color="#6666cc"
size="-2">
<select onchange="window.location.href=this.value">
<option value="" selected="selected">Select Here</option>
<option value="/b_studies/1corin/1corin_panes.html">I
Corinthians </option>
<option value="">Coming Soon</option>
</select>
bootstrap selectpicker generates some elements so that protractor has to click a button to show the list of options (that are in the hidden select) and then click the item in the list. I'm having trouble figuring out, by text which list item needs to click.
Sample HTML looks like this:
<div>
<button type="button">
<div class="ripple-container"></div>
</button>
<div class="dropdown-menu open" role="combobox">
<ul class="dropdown-menu inner" role="listbox">
<li data-original-index="1"><a>Male</a></li>
<li data-original-index="2"><a>Female</a></li>
</ul>
</div>
<select>
<option> </option>
<option value="MALE">Male</option>
<option value="FEMALE">Female</option>
</select>
</div>
I want to be able to tell protractor to click the li that corresponds to the option with the value FEMALE - because of localization, I don't want to hardcode strings, but rather find out the position of the option with the value FEMALE and use that to select the <li data-original-index="2">
Is this even possible? Is there another, better way to do it?
See this plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview
When using a ng-form tag on an ng-repeat which contains a radio button group, the radio buttons are linked so if you check a radio button in one ng-repeat it will deselect in all the other ng-repeats. This puzzles me as the model of the ng-repeat is otherwise isolated from the other items. This is not only an issue when using ng-repeat. It also occurs when having multiple instances of a custom directive with isolated scope which renders a
<div ng-form name="myForm">
In the Plnkkr try adding a number of items and check the radio buttons on some of the items.
They should be independent, but they are not.
Is this a bug in Angular?
If not why does it work this way and how can I work around it?
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
<input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
<span ng-show="subForm.name.$error.required">required</span>
<button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
Those radio buttons are "connected" by a browser since you are giving them the same name. Just drop the name attribute and things start to work as expected:
http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview
As per your last comment, I have tried this out and it works. I'm not using the built-in angular validation but I believe it works all the same and is very simple
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" value="r1" ng-model="item.radio" /> r1
<input type="radio" value="r2" ng-model="item.radio" /> r2
<span ng-show="item.radio==''">required</span>
<button type="button" ng-disabled="subForm.$invalid || item.radio==''" ng-click="submitOne(item) ">Submit One</button>
</li>
See my working example at http://wiredbeast.com/coolframework/stackover.html
The trick is using ng-show="item.radio==''" to show the validation error and to disable the "Submit One" button.
In my honest opinion angular form validation and browser validation with checkboxes and radios is not very solid.
I have code that uses the <ul> and the anchor tags, I have put: <br> <br />
<center> (without some spaces.....) above it, and this: '''' below it. But I still get 3 rows I have in total 5 buttons, 4 that change when you hover over them and one dropdown menu in the middle. But I need them to be all on one level. Can anyone help me with this?
<div style="text-align:center;">
<button>Button-1</button><button>Button-2</button>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<button>Button-3</button><button>Button-4</button>
</div>
I have a form and it contains dropdown box and different div items. Based on selection from dropdown box, I show those div items. But some of the text in those div items are shown when the form is loaded and not when I select the option from dropdown box. The code is somewhat like this
<form>
<select id="">
<option value="one"> One </option>
<option value="two"> Two </option>
<option value="three"> Three </option>
</select>
<div id="onee"> header text ..<table> </table></div>
<div id="twoo"> header text ..<table> </table></div>
</form>
So when I load the page form with select drop down box is shown , but it also shows header text which is within div. How do I hide that text?
<div id="onee" style="display:none"> header text ..<table> </table></div>
<div id="twoo" style="display:none"> header text ..<table> </table></div>
so your full code on page load is
<form>
<select id="">
<option value="one"> One </option>
<option value="two"> Two </option>
<option value="three"> Three </option>
</select>
<div id="onee" style="display:none"> header text ..<table> </table></div>
<div id="twoo" style="display:none"> header text ..<table> </table></div>
</form>
after this when you change option in select box
just replace display:none with display:block
If you are using JavaScript to show divs based on selection, you can as well hide all the divs initially. Here is how to do it in JQuery:
$("#onee").hide();
$("#twoo").hide();
Or you can just hide them with CSS: diplay:none.
If you use postbacks in your drop-down, you can control html output on the server side and only render divs you need.
You can start those divs at display:none.