I'm using country picker from Bootstrap form helper:
Country Picker
Problem is that i need to initialize it dynamically with a country. I'm using data-country="US" as default, anyways i need to change it on document ready function.
<div id="country-select" class="bfh-selectbox bfh-countries" data-flags="true" data-value="US">
<input type="hidden" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option input-medium" data-option=""></span>
<b class="caret"></b>
</a>
<div class="bfh-selectbox-options">
<input type="text" class="bfh-selectbox-filter">
<div role="listbox">
<ul role="option">
</ul>
</div>
</div>
</div>
From the Example 3, you can use
$(document).ready(function(){
$('#country-select').bfhcountries({country: 'TN'});
});
$('#LoadCountry').click(function(){
$('#countries1').bfhcountries({country: 'TN'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.css" rel="stylesheet"/>
<button id='LoadCountry' class="btn">Load Countries</button>
<br><br>
<select id="countries1" class="form-control"></select>
use the html below to select a default country on initialize. Also add bootstrap-formhelpers.js and bootstrap-formhelpers.css to your html or your select will not be populated with data.
<form><select id="country-select" name="country-select" class="form-control bfh-countries" data-country="US" data-flags="true"></select></form>
and to select a country after initialization,
$('#country-select').val('TN');
see the document for more options on initilization.
Here's a working fiddle.
Per OP's comment The OP is using a theme using select2, quoting from there
Select2 will listen for the change event on the element that it is attached to. When you make any external changes that need to be reflected in Select2 (such as changing the value), you should trigger this event.
and therefore to reflect changes;
$('#country-select').val('TN').trigger('change');
Related
(Backend developer trying to do some front end development here)
I have a simple HTML form with some text field inputs and a select menu. When the form is submitted I see the text field values hitting the web server but I don't see the value for the select menu hitting the server. The code for the select menu is:
<div class="mdc-select mdc-select--outlined mdc-select--with-leading-icon role-list">
<i class="material-icons mdc-select__icon" tabindex="0" role="button">work_outline</i>
<div class="mdc-select__anchor role-width-class">
<i class="mdc-select__dropdown-icon"></i>
<div id="role" class="mdc-select__selected-text" aria-labelledby="roles-select-label"></div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label id="roles-select-label" class="mdc-floating-label">Role</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface role">
<ul class="mdc-list">
<li class="mdc-list-item" data-value="0">
Painter
</li>
<li class="mdc-list-item" data-value="1">
Electrician
</li>
<li class="mdc-list-item" data-value="2">
Decorator
</li>
</ul>
</div>
</div>
The select menu is a material design component as described here.
The Javascript I have associated to this component is:
mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));
const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));
role.listen('change', () => {
alert(`Selected option at index ${role.selectedIndex} with value "${role.value}"`);
});
A couple of questions I have straight off the bat:
Should I be using <li> instead of <option> - the code above follows the examples shown on the website.
Should there be a name attribute?
Create a hidden input:
<input type="hidden" name="my_select" id="my_select" value="">
Then store the value there:
mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));
const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));
role.listen('change', () => {
document.getElementById('my_select').value = role.value;
});
There is a new update to this in material documentation in additional information section. It suggests doing the same thing that the accepted answer says but with no JavaScript.
Just wanted to put this out there for new people referring to this.
Select with hidden input (for HTML forms)
For convenient submission of Select's value in HTML forms, a hidden input
element may be added under the root element. The component will synchronize
its value with that of the hidden input.
<div class="mdc-select mdc-select--filled demo-width-class">
<div class="mdc-select__anchor">
<!-- Rest of component omitted for brevity -->
</div>
</div>
I am trying to load a dropdown with angularjs and semantic UI with the following code
<div id="state" class="ui search selection dropdown">
<label for="state">Estado</label>
<input type="hidden" name="state">
<i class="dropdown icon"></i>
<div class="default text">Selecione o Estado</div>
<div class="menu" ng-model="state" ng-change="loadCity()">
<div ng-repeat="state in states" class="item" data-value="{{state.ID}}">{{state.NAME}}</div>
</div>
</div>
<div>
But the event is not called.
When I use the code below it works:
<select id="state" class="ui search selection dropdown" ng-model="state" ng-init="loadState()" ng-change="loadCity(state.ID)">
<option ng-repeat="state in states" value="{{state.ID}}">{{state.NAME}}</option>
</select>
What am I doing wrong?
Looks like this is an issue other people have encountered. Take a look at this issue: https://github.com/Semantic-Org/Semantic-UI/issues/1913
I found a way to solve this issue on angular side using some 1.3 magic. It's not the best way of doing this but it works.
It can simply be solved by using the formController and a watch.
I updated the plnkr. Note that i use underscore.js to find the array index of the control inside the form.
The rest is pure angular and some jquery.
http://plnkr.co/edit/eDOej3zJ0bwQ1xyX1LDI?p=preview
Look at the section starting with:
app.directive('select'
I have a dropdown which i am trying to populate from the javascript. But i am unable to do it.
This is my HTML
<div class="ui fluid search selection dropdown values">
<input type="hidden" name="values" selectOnBlur={false}>
<i class="dropdown icon"></i>
<div class="default text">Select a category</div>
<div class="menu">
</div>
</div>
And this is the JS
$('.ui.dropdown.values').dropdown({values:[{name:"oi",value:32},{name:"yo",value:2}]})
Please find the codepen link below
CodePen
Thanks
Can be fixed by changing versions to:
https://code.jquery.com/jquery-3.2.1.min.js
https://cdn.jsdelivr.net/npm/semantic-ui#2.2.13/dist/semantic.min.js
Because the dropdown library's version you used didn't support populating via JS (as per docs)
I have created a simple jQuery toggle function which adds and removes the class formVisablethe toggle function is adding the class how in the wrong place CLICK HERE.
I want to add the class to the following element <div id="hide-overlay"> however at the moment the class is being added to my button element <a id="show-form">. Below is a snippet of my code
HTML
<div class="row promo-image responsive">
<figure>
<figcaption class="caption">
<a id="show-form" class="promo-button" href="#">
<span>Be More Productive</span>
<i class="fa fa-download"></i>
</a>
<h4>Download the 8 steps for successful collabration</h4>
</figcaption>
</figure>
</div>
HIDDEN ELEMENT
<div id="hide-overlay">
<a id="hide-form-close" href=""><i class="fa fa-times fa-2x"></i></a>
<div class="col-sm-6 col-sm-offset-3 form-container">
<h2 class="business">Register</h2>
<form class="main-contact submit-fade ajax-form" action="process.php" method="POST">
<ul class="small-block-grid-2 medium-block-grid-2 hide-form">
<li>
<label for="name">Name</label>
<input type="text" class="form-control" name="name" placeholder="Name" required>
</li>
<li>
<label for="email">Email</label>
<input type="text" class="form-control" name="email" placeholder="Email">
</li>
</ul>
<input type="submit" class="btn btn-success">
</form>
</div>
</div>
JQUERY
var $hideOverlay = $("#hideOverlay").hide();
$("#show-form").on("click", function(e){
$(this).toggleClass("formVisable");
});
It's because you are using this which represents the object that is calling the function, in this case #show-form. You should use $('#hide-overlay').toggleClass("formVisible");
Here's the fiddle for it: http://jsfiddle.net/norg5k2o/4/
"This" represents the object that an action is being applied to. In this case, it's your button. You want the class to be applied to your overlay, rather than to the button. Therefore, try this:
Also, you had some spelling errors.
$("#hide-overlay").hide()
$("#show-form").on("click", function(e){
$("#hide-overlay").toggleClass("formVisible");
});
WORKING DEMO HERE
You did not properlay declare the variable. You had $(#hideOverlay) when your HTML id attribute was actually id='hide-overlay'. As such, I have re-written the jQuery to properly target and hide the form as was your original intent. I also, disabled the link so that it will only do the show/hide function and not the go to href='#' action.
As the other answers suggest, when using the $(this) selector in jQuery, it will target the parent selector of the current iteration of the function.
I also updated your CSS as it was hiding the form.
View working example
var $hideOverlay = $("div#hide-overlay");
$hideOverlay.toggle();
$hideOverlay.css("border", "solid 1px black");
$("a#show-form").on("click", function(e){
e.preventDefault();
$hideOverlay.slideToggle(300);
});
The $(this) inside a JQuery event handler is the DOM element that has the handler attached. If we attached the handler to something else, like the containing <div>, we will get the DIV DOM element doesn't matter which inside elements of the DIV we clicked.
So, in this case you would need something like this, since $("#hideOverlay") is already cached, the correct way to do it is:
var $hideOverlay = $("#hideOverlay").hide();
$("#show-form").click(function(e){
$hideOverlay.toggleClass("formVisible");
//Prevent default behavior for links and buttons
e.preventDefault();
});
I'm working with Semantic UI dropdowns, and I need to create a dropdown with around 3000 options in it. The dropdown works very well, except for one case. If the user clears out the search text, the dropdown completely locks up. I believe it's because it's trying to reload all the elements.
I've looked through the settings (http://semantic-ui.com/modules/dropdown.html#/settings) that are available for the dropdown, but nothing stands out in change the way it handles reloading all the elements.
Any advice would be greatly appreciated.
HTML:
<div class="ui fluid search selection dropdown">
<input type="hidden" name="security_group"></input>
<i class="dropdown icon"></i>
<div class="default text">Select Security Group</div>
<div class="menu">
<j:while test="${reference.next()}">
<div class="item" data-value="${reference.sys_id}">${reference.u_name}</div>
</j:while>
</div>
</div>
Javascript:
$(document).ready(function(){
$(".ui.fluid.search.selection.dropdown").dropdown();
$(".ui.fluid.search.selection.dropdown").width("100%");
});