I have a page that contains a select element for creating a new object.
When a user visits the page, if he/she selects a value from the select element and then reloads the page (using cmd|ctrl + R) the select keeps the value even though the value was never submitted.
I don't want the option to be remembered upon reloading since it was never submitted.
I tried adding in my application controller a before filter in order to disable cache:
before_filter :disable_cache
def disable_cache
expires_now
end
Using a browser tool (HttpFox) I get the response header:
Cache-control no-cache, private
and the response body has no selected option in it but while rendering, user's selected option before the reloading of the page is still there.
Response body:
<select class="select optional" id="an_id" name="a_name">
<option value=""></option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
An actual reset for the select happens only when using cmd|ctrl + shift + r
Any ideas?
Workaround: I had to disable autocomplete.
Either on specific element or the the hole form.
I found the solution from here
Related
I have a select box on my form which is getting displayed using addOption. Below the code for the same
storeData = response.myData;
var select = dijit.byId('mySelect');
select.addOption(storeData.items);
HTML declaration of Select box
<select id="mySelect" data-dojo-type="dijit/form/Select" data-dojo-attach-point="mySelect" data-dojo-props="name:'mySelect', placeHolder: 'Select a value', value:''"></select>
In the storeData, I am returning list of JSON objects including a blank option. (label="" and value=" ");
I want the place holder text to get displayed when no option is selected. But by default first option (i.e. blank value option) is getting selected and because of that place holder text is not getting displayed. If I remove the blank value option from list of options, then the option after that is getting selected by default.
Is there any way where I can set the selection to none. Any pointer for this issue?
dijit/form/Select acts as a normal selection box element (simply said it's an enhanced form of <select>). It's the default behavior of such a select box to select the first option by default.
Either way, the dijit/form/Select widget does not support placeholders I think, neither is it documented in the API docs.
As an alternative you could use the dijit/form/ComboBox or dijit/form/FilteringSelect widget, which both support the placeHolder property.
Another common practice (at least with <select>) is that you add a default selected and disabled item, which acts as your placeholder, for example:
<select name="select1" data-dojo-type="dijit/form/Select">
<option disabled="disabled" selected="selected" value="">- Select a state -</option>
<option value="TN">Tennessee</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
</select>
Demo: JSFiddle
I am using JQuery Mobile for a mobile website, and for localization I am using i18next. I have an issue in my form, here it is :
<form id="form" method="POST" action="webservices/action.php">
<select id="subject">
<option value='0' data-i18n="contact.email" selected></option>
<option value='1' data-i18n="contact.name"></option>
<option value='2' data-i18n="contact.object"></option>
</select>
</form>
The localization works fine, I have the desired text displayed. However, the first option is not displayed and it is not possible to select it (it is possible to select other options). When looking at the select object in Javascript, it seems that the correct index is selected., therfore it is a UI problem.
I don't have any problem when not using i18next.
Anyone have an idea how to fix this issue ?
I found a workaround. I noticed that when I sent my form and reset it, the dropdown list was correclty displayed. So after initializing i18n, I used this:
document.getElementById("form").reset();
The form is now displayed correctly.
When using the ui-select2 (https://github.com/angular-ui/ui-select2), the preselected option is not shown properly.
I created a plunkr: http://plnkr.co/edit/Ek86jUciPo7rgBnbKdFc
When the page is loaded, the model of the select is set to the second option. And somehow, it is properly set in the select box, see: https://dl.dropboxusercontent.com/u/1004639/stackoverflow/screenshot-select2.png. But the value is not shown above the text box. Or in the select box when the select box is closed.
PS: I tried it without ng-options. Same problem.
I can get it working using ng-repeat and ng-selected. Unfortunately, though, when you use ng-repeat, you can only bind to a string. It's not ideal, but the choice does start out pre-selected.
Here's a working http://plnkr.co/edit/jodn35fvUQpdD2d5BpoC
<select ui-select2="" ng-model="selectedId" >
<option value="">Choose...</option>
<option ng-repeat="option in options" value="{{option.id}}" ng-selected="{{option.id == selectedId}}">{{option.name}}</option>
</select>
And I updated the JS to add this line:
$scope.selectedId = $scope.selected.id;
https://github.com/angular-ui/ui-select2#working-with-dynamic-options
ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead.
I have created a profile page in php where a user using an html drop down list chooses gender. The html code is the following:
Gender<select name="gender">
<option value=" "> EMPTY </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
After the user chooses gender the form dispatches and saves the data into database. The problem is that if the user visits again the profile page the drop down list does not keep the value that the user selected before, but shows the first option value each time. How can I modify this so that the drop down list will show the selected value that users enters before?
Set the "selected" attrubute on the correct option tag. You'll have to figure that out either on the server before you deliver the HTML or use Javascript client-side, depending on where you're storing the user's selection.
Try like below... it will help you ...
<option value=" " selected> EMPTY </option>
If we set Selected attribute in Option tag ... then it specifies that an option should be pre-selected when the page loads
after selecting and form is submited then the selected value must be saved in a session variable . and when the person visits page again set the selected attribute to the corresponding by checking the session value
Is there a good way to make an HTML dropdown read only. Using disabled attribute of select seems to work, but the value is not posted.
<select disabled="disabled">
I have a complex page with lots of javascript and ajax. Some actions in the form cause to drop down to be read only some actions let user decide the value.
Edit: Is there a better way other than using a hidden input?
If you do not want user to pick an option, how is this different from read-only input type="text"?
<select name="selectbox" disabled="disabled">
<option>option 1</option>
<option selected="selected">option 2</option>
<option>option 3</option>
</select>
Correct me if I am wrong, but if an option is selected, the value is sent