(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>
Related
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');
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 am working on a project that allows a user to check off boxes per tab that is created through jQuery. The tabs are created when a user clicks on the Add button. Jquery generates a set of checkboxes per tab and should allow the user to check any number of boxes they want. The issue is that it looks like they share the same checkboxes since checking boxes in one tab transfers it over to the other tab. Is this something for Session Storage? Do I have to give each checkbox a unique name? Not quite sure if this is possible with just jQuery.
I realize that something like this would be easier using a stack but I am doing this to get a better understanding of that process.
Git: https://github.com/frfroylan/project_checklist
Link: http://proj-checklist.surge.sh/
HTML:
<body onload="script()">
<h1 class="h1-text">Product Checklist</h1>
<div class="wrapper">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="tabs">
<li role="presentation" class="active" id="newTab"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></li>
</ul>
<!-- Tab info -->
<div class="tab-content" id="tab-content">
<div role="tabpanel" class="tab-pane active" id="new">
<p>New Product name:</p>
<input type="text" placeholder=" Product Name" id="newProductName">
<button onclick="genLi()">Add</button>
</div>
</div>
</div>
</body>
JS:
script = function(){
newTabPanel = $('#new');
newTab = $('#newTab');
genLi = function(){
$('.active').removeClass('active');
var prodName = $('#newProductName').val();
var newLi = $('<li role="presentation" class="active" id="newTab">'+ prodName +'</li>');
newTab.before(newLi);
genNewTabCont(prodName);
}
genNewTabCont = function(id){
var newTabPane = $('HTML_TO_LONG_CHECK_GIT');
newTabPanel.before(newTabPane);
}
}
As you already noticed the error does not occur, when you choose different names. DOM manipulation with jQuery is all about selectors. If you just use an data-attribute or class as selector your jQuery call will affect all matched elements. If you want every tab to be unique, you have to create unique ID selectors or reference them by their position.
$('.tab').eq(position);
Being fairly new to Meteor, I'm stuck with an issue I encountered while generating input "on-the-fly" with a Helper. Indeed, what I'm trying to do is to generate a left labeled input with a dropdown but the problem is that I have to call the method $('.ui.dropdown').dropdown();
After creating each input with its corresponding dropdown, and I don't know how to do it properly with semantic-UI and Meteor environment.
Here is my helper creating the inputs:
'filterColumns': function() {
return Session.get('s_filterColumns');
}
Where 's_filterColumns' is an array looking like ["Firstname", "Lastname", "LivingPlace"]
And here is the HTML template using the helper to generate inputs:
<div id="fields">
<div class="ui grid">
{{#each filterColumns}}
<div class="eight wide column">
<label>{{this}}</label>
<div class="ui left labeled input">
<div class="ui dropdown label">
<div class="text">Start by</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Start by</div>
<div class="item">Contains</div>
<div class="item">End by</div>
</div>
</div>
<input type="text">
</div>
</div>
{{/each}}
</div>
</div>
But then, when populating the session variable with new content, the inputs are being created accordingly but the javascript dropdown method is not called again and so my left label is not a dropdown.
If you have any recommendations regarding anything in my conception I'd be glad to learn from someone more experienced than me.
If you are unsure when to call $('.ui.dropdown').dropdown(), try running it inside Template.myTemplate.onRendered() where myTemplate is the name of your template. Given that you have multiple dropdowns though you might want to put the html that's inside your {{#each }} into its own template and use that for onRendered().
Note: Community Wiki answer created because question was answered by Michel Floyd in the comments.
I have a system that lists an number of items from a database, these items can have three different states that can be attached to it, Manual, Auto and VIP. A single item in this list could be either of this states and sometimes two or all three at the same time.
The system also has three filters, Manual, Auto and VIP.
I am trying to build a system so that when a state has changed on a filter (box is checked/unchecked) the system will hide or show items from this list.
So i am struggling with this concept with my current implementation.
here is some code:
<ul class="content-list" id="update-list">
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="1">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #1 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #2 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="0"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="manual-circle">M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #3 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
I have three "data-" attributes attached to each list item, i wanted to use these to detect if the item show be displayed or not but i can't think of a simple way of doing this.
My other thought on the matter would be to add a class to each item saying if it is Manual, Auto or VIP for example
<li class="list-item manual auto vip">
I understand how to remove and display elements this way however it seems a little messy to me.
So what is the best way of achieving this using Jquery? I think i might be over engineering the whole thing.
Thanks for your time.
I think you might be looking for the attribute selector.
For example, when someone wants to see the "data-auto" items, you could do the following:
$("li[data-auto='1']").show();