Dropdown List is not Updating the Selected Value (SemanticUI) - javascript

I am using SemanticUI for a dropdown list
<div class="ui dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
in the bottom of my page, I am initializing it as
jQuery(document).ready(function($) {
$('.ui.dropdown')
.dropdown()
;
});
The problem is that when a user selects an item, it does not update and it keeps showing the default value as selected.
But when I go to Chrome Console and execute the above code JQuery(document)..., then it works fine.
I am assuming it is due to that the initialization needs to execute after page loads completely. So, What I did is the following instead of the above:
window.addEventListener("load", function(){
jQuery(document).ready(function($) {
$('.ui.dropdown')
.dropdown()
;
});
});;
It worked. Dropdown list updates selection immediatly. However, when I click on Submit, I and page reloads, the selection is lost.
The drop down is being used as a filter to table. Having the selection gets lost on submit, makes filter unusable.
What is the best way to go around this.

Use AJAX to submit the form so the page doesn't refresh.

<select>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
no extra js, css required,
edit: autocomplete attribute is not required because it is the default

Related

Backing to a form with a chosen dropdown forgets its value visually

Using the chosen lib I run into the following issue, you can reproduce it yourself by going to their show-and-tell-page:
https://harvesthq.github.io/chosen/
Steps to reproduce:
In their standard select section, select -any country you want- in both the standard dropdown and the chosen dropdown
Click 'fork on github'(or any link) to leave the page
Navigate back by hitting the back button in chrome
The standard dropdown shows you the previously selected country
The chosen dropdown is empty (but under the hood the value is selected, according to what I'm seeing with my form. It just is not showing)
So this leads to confusion. When the user would back and then go forward again by submitting the form(in my case) it would use another value than what is shown.
My form basically looks like:
<form id="myForm" action="${home}mySite/foo/bar" method="GET">
<select id="bar" name="barName" class="chosen-select">
<option value="a">foo 1</option>
<option value="b">foo 2</option>
<option value="c">foo 3</option>
<option value="d">foo 4</option>
</select>
<input type="submit" value="Continue"/>
</form>
If I remove the class="chosen-select" it works as I expect, but I lose chosen's nice search feature which I want. I've tried messing around with
<option value="a" selected="selected">Foo 1</option>
in the dropdown, but that doesn't help.
I've also tried changing the method="GET" to POST but there is no difference in behaviour. It still works as in the example link I provided.
The chosen lib generates the following in on the page:
<div class="chosen-container chosen-container-single" title="" id="parkingZoneOwner_chosen" style="width: 40%;"><a class="chosen-single">
<span>Foo 1</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div></div>
But nothing about the generated html looks wrong to me, even after backing to the page.
I tried this in the js (events):
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$(".chosen-select").chosen({
width: "40%",
search_contains: true
});
$('.chosen-select').on('chosen:ready', function(evt, params) {
$(".chosen-select").val("a");
});
});
});
$('.chosen-select').on('chosen:ready', function(evt, params) {
// alert("reached")
// I had really high hopes for this one:
$('.chosen-select').trigger('chosen:updated');
//Also tried this one:
$('#myForm')[0].reset();
});
Anyone know a way to fix this? Either the chosen dropdown needs to show what actually will be submitted in the form or the entire form maybe could be reset to default values somehow.
This solved it in the end, turning off autocomplete on the form.
<form id="myForm" action="${home}mySite/foo/bar" autocomplete="off" method="GET">
I don't know why this works.

Update HTTP GET Request from Select Menu Change

I have a search results page in a PHP site that returns a list of results. I now need to add a filter option to the search results page so that users can further refine the search result from some Select menu choices. The URL for the search results looks like this:
findProducts.php?action=searchAssets&orderNumber=xxxx&productName=zzz
and is performed from a GET request on the search form page.
I've added some filters using select menus like this:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Filter By</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" id="filter" action="filter.php" method="get" role="form">
<input type="hidden" name="action" value="filterSearch">
<div class="form-group">
<div class="col-sm-9">
<select class="form-control" name="productType" id="productType">
<option selected="selected">By Product Type</option>
<option value="Cars">Cars</option>
<option value="Trains">Trains</option>
<option value="Planes">Planes</option>
</select>
</div>
</div>
</form>
</div>
</div>
What I now need to happen, and not sure about how to do this, is that when the Select menu is modified that it performs the search again, e.g. the GET request would now be something like this:
findProducts.php?action=searchAssets&orderNumber=xxxx&productName=zzz&productType=Cars
if the user selected the Cars option from the select menu. I'm using PHP and Bootstrap so jQuery/PHP solutions can be used here.
Attach a on-chage event to your dropdown, then when triggered append it's value to the current url, and reload the page.
$(document).ready(function(){
$('#productType').change(function(){
window.location.href = window.location.href + '&productType=' + $(this).val();
});
});
this is what you need https://www.w3schools.com/php/php_ajax_database.asp
you can do even chained dropdowns. if you want to send more one param (to do WHERE something='a' AND b='c') to that php page use hidden form feilds and javascript.
Onn select "change" event, you can call a function which would do a ajax call to your search result url.. like this:
$("#productType").on('change', function(){
var product_type = $(this).val(); //selected product type
var your_search_url = "path/to/findProducts.php?action=searchAssets&orderNumber=xxxx&productName=zzz&productType="+product_type;
$.get(your_search_url, function(data, status){
// your code here to deal with the search results
});
});

AngularJs + Reset all attributes on a SingleClick and dnt have form tag

In AngularJs, I am trying to reset all the attributes ( i.e, Dropdown, CheckBox, RadioButton etc) inside a controller. Trying to built global function for all the Controllers.
Snippet :-
<div id="first_div" ng-controller="FirstDivController">
<select id="user_list" ng-options="user in users" ng-model="user_name" >
<option value="">Select</option>
</select>
<input type="checkbox" checklist-value="social_medium" data-target="facebook"
ng-model="checked">
<input type="checkbox" checklist-value="social_medium" data-target="twitter"
ng-model="">
<a href="javascript:void(0);" ng-click="reset_data()">
<span></span> Reset
</a>
</div>
On a single click, I am trying to reset the all the element values as default, and dnt have any form tag. But I am not getting the way to implement it.
Thanks in advance.

Semantic UI: Dropdown default/placeholder value issue

I'm working on creating a html form using 'Semantic UI' framework. While I'm using a normal select item for a dropdown/select list, I'm styling it using Semantic UI. Everything works fine, but once I select a value from the dropdown, I can't deselect the option/value as an end user.
Suppose in this FIDDLE , if I select 'male', and again want to de-select the option and show the placeholder/default text 'Gender', I'm not able to. Can someone help me figure out a way to make the select work as a regular html select item rather than a dropdown ?
HTML Code
<div class="field">
<label style="width: 250px">Select a Gender</label> <select
name="skills" class="ui fluid dropdown">
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
JavaScript Code
$(".ui.fluid.dropdown").dropdown({})
Try this :
$('select.dropdown').dropdown({placeholder:'Your placeholder'});
see Semantic UI (or Semantic UI CN for a Chinese version) for more info.
In the classic HTML <select> element, it treats your empty valued <option value="">Gender</option> as another dropdown menu item.
However, Semantic UI uses the empty valued <option> as the placeholder text. If you want Gender as a selectable option, it should really be another item that is independent of your placeholder text.
If you want the ability to clear the selection, I think there are better UX paradigms to handle this. For example, you could have an external clear selection button which calls:
$('.ui.fluid.dropdown').dropdown('clear')
Another more streamlined option might be to use the multi-selection dropdown, and limit the maxSelections = 1, the first example from the examples page. That way the user gets an impression that they have selected something, and to clear the selection they use an element within the same dropdown container.
You should know that .dropdown() in Semantic UI removes any null value from your select by default.
Nevertheless, there are some approaches to what you are looking for.
Check this fiddle.
You can achieve this with the snippet below.
<div class="ui selection dropdown">
<input name="gender" type="hidden" value="default">
<i class="dropdown icon"></i>
<div class="text">Default Value</div>
<div class="menu">
<div class="item" data-value="default">Default Value</div>
<div class="item" data-value="0">Value</div>
<div class="item" data-value="1">Another Value</div>
</div>
</div>
You can take a look at here https://semantic-ui.com/modules/dropdown.html#/examples. Also you can use 'clearable'.
If you wanna pass this value to back-end, keep in mind that the selected value is in the input.
$('.ui.dropdown').dropdown({
clearable: true
});

Enable "disabled Multiselect" using jquery/javascript

here's my code below. On page load, all multiselect are disabled but once the user click the enable button, all multiselect should be enable. Here's my code below. I'm not able to make this work, I wonder why. But if I add "$('#multidiv option').prop('disabled', false);" on first load, it works, but all my multiselect will be enabled on first load. I want to disabled all on first load but enable all by clicking a button. Thanks.
<div id="multidiv">
<label style="float:left; margin-right:-2px;">Target Android Device</label>
<div class="span5" style="display:inline-block; float:left;">
<select id="android" disabled="disabled" multiple="multiple" name="android[]">
<option value="Nexus">Nexus</option>
<option value="HTC">HTC One</option>
<option value="Sony">Sony Xperia</option>
</select>
</div>
</div>
My javascript code below:
$('#enable_button').on("click",function(){
$('#multidiv option').prop('disabled', false);
});
$('#android').multiSelect(); //using "http://loudev.com/" plugin
I've found the solution to my problem.
This $('#multidiv option').removeAttr('disabled'); code actually works. It's the plugin problem.
By adding $('#android').multiSelect('refresh'); it works fine now. The plugin needs to be refreshed after this code $('#multidiv option').removeAttr('disabled');
Thanks for all for trying to help btw.
Why not use the id of the <select> itself:
$('#enable_button').on("click",function(){
$('#android option').removeAttr('disabled');
});
you can use this script;
$('#android').multiselect('disable');
and
$("#android").multiselect('enable');
its work for agungpanduan.com

Categories

Resources