I created dropdown dynamically using javascript but when I tried opening the dropdown menu, it doesn't open at all.
This is how I created the dropdown dynamically:
$('#contentdiv').append("<div class='ui fluid selection dropdown'><input type='hidden' name='user'/><i class='dropdown icon'></i><div class='default text'>Select Friend/Follower</div><div class='menu' id='menu'>");
for(var k=0;k<fflist.length;k++)
{
$('#menu').append("<div class='item' data-value='"+fflist[k]+"'>"+fflist[k]+"</div>");
}
$('#contentdiv').append("</div></div>");
Web console show the element as this, I can't find any problem:
<div class="ui fluid selection dropdown">
<input type="hidden" name="user">
<i class="dropdown icon"></i>
<div class="default text">Select Friend/Follower</div>
<div class="menu" id="menu">
<div class="item" data-value="DivyanshuGaur16">DivyanshuGaur16</div>
<div class="item" data-value="akshaykumar">akshaykumar</div>
<div class="item" data-value="aamir_khan">aamir_khan</div>
<div class="item" data-value="SrBachchan">SrBachchan</div>
<div class="item" data-value="UncleOBEY">UncleOBEY</div>
<div class="item" data-value="Waakye_Orgasm">Waakye_Orgasm</div>
<div class="item" data-value="Iamdbeatz">Iamdbeatz</div>
<div class="item" data-value="KwameUltd">KwameUltd</div>
</div>
</div>
Related
I'm currently learning website design, I have started creating my own Basecamp like website (project management tool). I am in need of a plugin or a tutorial on autocomplete input javascript like Basecamp... however i'm unsure on how to set this up as i'm super new to javascript and still trying to get my head around it all.
Use the multiple search selection feature from Semantic UI's dropdown module:
https://semantic-ui.com/modules/dropdown.html#multiple-search-selection
Here's a sample jsfiddle: https://jsfiddle.net/9wnjra1z/
<form class="ui form">
<div class="field">
<label>Assigned to</label>
<div class="ui fluid multiple search selection dropdown">
<input type="hidden" name="users" />
<i class="dropdown icon"></i>
<div class="default text">Select Users</div>
<div class="menu">
<div class="item" data-value="kristin_aardsma">
<img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/jenny.jpg">
<span>Kristin Aardsma</span>
</div>
<div class="item" data-value="jonny_cyrus">
<img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/elliot.jpg">
<span>Jonny Cyrus</span>
</div>
<div class="item" data-value="stevie">
<img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/stevie.jpg">
<span>Stevie</span>
</div>
<div class="item" data-value="matt">
<img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/matt.jpg">
<span>Matt</span>
</div>
</div>
</div>
</div>
</form>
You will need the following references in your code to use this library:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js
i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?
<section class="our_services_tow">
<div class="container">
<div class="architecture_area services_pages">
<div class="portfolio_filter portfolio_filter_2">
<ul>
<li data-filter=".enc"><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</li>
<li data-filter=".format"><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</li>
<li data-filter=".prazos"><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</li>
<li data-filter=".entreg"><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</li>
<li data-filter=".pag"><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</li>
</ul>
</div>
<div class="portfolio_item portfolio_2">
<div class="grid-sizer-2"></div>
<div class="single_facilities col-sm-7 enc">
<div class="who_we_area">
<div class="subtittle">
<h2>blablabla</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
<div class="single_facilities col-sm-7 format">
<div class="who_we_area">
<div class="subtittle">
<h2>Preferência de formatos de ficheiro.</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function
I've been working with Semantic UI for a project. I'm using the Search Selection version of the dropdown (classes are 'ui fluid search selection dropdown'). Under each item, I have setup a custom data-dogs attribute, with either 0 or 1. If the selected item has a data-dogs value of 1, I need an item on my form to show, or hide if it's a 0.
It's working fine on the mouse click, but I'm rather rusty with JS, so I'm not sure if there is an easy way to get the same functionality with the enter key and up/down arrows).
The JS code I've made is below.
If anyone could give me some pointers, I'd very much appreciate it.
Many thanks in advance!
$('.item').on('click', function(){
if($(this).data('dogs')==1){
$('#dogCheckbox').removeClass('hidden');
console.log('Working?');
} else {
$('#dogCheckbox').addClass('hidden');
}
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="location" id="location_search">
<i class="dropdown icon"></i>
<div class="default text"></div>
<div class="menu">
<div class="item" data-value="1" data-dogs="0">A1</div>
<div class="item" data-value="2" data-dogs="0">A2</div>
<div class="item" data-value="3" data-dogs="0">A3</div>
<div class="item" data-value="4" data-dogs="0">A4</div>
<div class="item" data-value="5" data-dogs="0">A5</div>
<div class="item" data-value="6" data-dogs="0">A6</div>
<div class="item" data-value="7" data-dogs="0">A7</div>
<div class="item" data-value="8" data-dogs="0">A8</div>
<div class="item" data-value="9" data-dogs="1">A9</div>
<div class="item" data-value="10" data-dogs="1">A10</div>
<div class="item" data-value="11" data-dogs="1">A11</div>
<div class="item" data-value="12" data-dogs="0">A12</div>
<div class="item" data-value="13" data-dogs="1">A14</div>
<div class="item" data-value="14" data-dogs="1">A15</div>
<div class="item" data-value="15" data-dogs="1">A16</div>
</div>
</div>
<div class="ui checkbox hidden" id="dogCheckbox">
<input type="checkbox" tabindex="0" class="hidden" name="
form_dog">
<label>Dog friendly unit! Is a dog present?</label>
</div>
You can try this:
$(".item").keyup(function(event){
if(event.keyCode == 13){
$('.item').click();
}
});
13 is the Enter key code, so- when keyup event occurs, and the pressed key is Enter- do the click function.
Hope it helps
I need some help using the dropdown control in semantic.
Te multiple selection is not working as expected.
Here is the code:
<div class="ui fluid multiple search selection dropdown">
<input name="tag" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Tags</div>
<div class="menu">
<div class="item" data-value="angular">Angular</div>
<div class="item" data-value="css">CSS</div>
<div class="item" data-value="design">Graphic Design</div>
<div class="item" data-value="ember">Ember</div>
</div>
</div>
and the script code
$('.tag .ui.dropdown').dropdown({allowAdditions: true});
A single select is the one thats works.
Thanks in advance :)
You should be using semantic-ui 2. Which version are you using?
See new UI elements here:
https://github.com/Semantic-Org/Semantic-UI/blob/master/RELEASE-NOTES.md#version-200---june-30-2015
Here you have your exact code running on plunker with version 2.0.8:
http://plnkr.co/edit/TPaqyX8f46H2K4eu59yp?p=preview
//Same code as in the question
<div class="ui fluid multiple search selection dropdown">
<input name="tags" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Tags</div>
<div class="menu">
<div class="item" data-value="angular">Angular</div>
<div class="item" data-value="css">CSS</div>
<div class="item" data-value="design">Graphic Design</div>
<div class="item" data-value="ember">Ember</div>
</div>
</div>
First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks