I have a website where I need to filter a list of media types depending on the media family. ie: if print is chosen, it must only show options to do with print, if digital is chosen, it must only show options to do with digital stuff.
I can update the list with new values, but then they are not clickable anymore?
Here are the screenshots:
I am already using: $("#mec_id").trigger("liszt:updated"); where mec_id is the id of the select. Here is the HTML after the media family is chosen, when trying to click on the media type it does not give the option to click/select the option. In the code I have selected print because there is only one value for the dropdown there (to save space in the code).
HTML:
<select id="mec_id" class=" chosen-select" tabindex="-1" multiple="" style="width: 100%; display: none;" data-placeholder="Select Media Type" name="mec_id[]">
<option data-val="12" value="print">print</option>
</select>
<div id="mec_id_chosen" class="chosen-container chosen-container-multi" style="width: 349px;" title="">
<ul class="chosen-choices">
<li class="search-field">
<input class="default" type="text" style="width: 132px;" autocomplete="off" value="Select Media Type" tabindex="8">
</li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results">
<li class="active-result" data-option-array-index="12">print</li>
</ul>
</div>
</div>
JavaScript/JQuery (function of the AJAX Success call):
success: function (data) {
var ul = document.createElement('ul');
ul.className = "chosen-results";
for (var i = 0; i < data.length; i++) {
if (i == 0) {
$('#media_types .chosen-drop').contents().remove();
$('#mec_id').contents().remove();
}
var text = data[i].text;
var li = document.createElement('li');
li.className = "active-result";
li.setAttribute('data-option-array-index', data[i].id);
li.innerHTML = text;
ul.appendChild(li);
// create options
var option = document.createElement('option');
option.setAttribute('data-val', data[i].id);
option.value = data[i].text;
option.text = data[i].text;
document.getElementById("mec_id").appendChild(option);
}
$('#mec_id_chosen .chosen-drop').append(ul);
$("#mec_id").trigger("liszt:updated");
},
Are you sure it's not suppose to be chosen:updated instead of liszt:updated
I don't see any references to liszt - http://harvesthq.github.io/chosen/
Related
I´m trying to sort a html list (dropdown menu format that gets filtered as I write something)
dropdown menu list appears when I click on search field
<div class="search-block">
<!--<img class="searchimage" src="https://cdn.glitch.global/4dc88303-8015-467f-9334-2e63fdb63c75/9385963701556258272-16.png?v=1650523566208" alt="search image">-->
<input id="searchbar" type="text" value="" placeholder=" Search" onclick="myFunction();sort()" onkeyup="filterFunction()">
<div id="myDropdown" class="dropdown-content">
<ol id="list1">
<li>New Born</li>
<li>Smash the Cake</li>
<li>Pregnancy</li>
<li>Pre-Wedding</li>
<li>Family</li>
<li>Birthday</li>
<li>Professional</li>
<li>Social Media</li>
</ol>
<!-- TO DO: ADD ITEMS TO THE LIST-->
</div>
<p class="copyright">© 2022 Farias Carril Photography | Designed and built by Daniel Carril</p>
</div>
using JavaScript function.
However, it is not working. What am I missing?
I´m using usual sort algorithm for a simple list
function sort() {
var list, i, switching, shouldSwitch;
div = document.querySelector(".search-block");
a = div.getElementsById("a");
list = document.getElementById("list1");
switching = true;
while (switching)
{
switching = false;
b = list.getElementsByTagName("li");
for (i=0; i<(b.length - 1); i++){
shouldSwitch = false;
if (b[i].innerHTML.toLowerCase() > b[i+1].innerHTML.toLowerCase()){
shouldSwitch = true;
break;
}
}
if (shouldSwitch)
{
b[i].parentNode.insertBefore(b[i+1], b[i]);
switching = true;
}
}
}
I think the first problem is that getElementsById is not a method on the div tag so this causes the script to encounter an error and halt. The second issue is that calling innerHTML on the li tags will return something like New Born, i.e. the result includes the HTML of the a tag inside the li tag. You can change innerHTML to textContent to get the text inside the a tag (alternatively you could grab the a tag and get its innerHTML).
function sort() {
var list, i, switching, shouldSwitch;
div = document.querySelector(".search-block");
// a = div.getElementsById("a");
list = document.getElementById("list1");
switching = true;
while (switching)
{
switching = false;
b = list.getElementsByTagName("li");
for (i=0; i<(b.length - 1); i++){
shouldSwitch = false;
// textContent instead of innerHTML
if (b[i].textContent.toLowerCase() > b[i+1].textContent.toLowerCase()){
shouldSwitch = true;
break;
}
}
if (shouldSwitch)
{
b[i].parentNode.insertBefore(b[i+1], b[i]);
switching = true;
}
}
}
<div class="search-block">
<!--<img class="searchimage" src="https://cdn.glitch.global/4dc88303-8015-467f-9334-2e63fdb63c75/9385963701556258272-16.png?v=1650523566208" alt="search image">-->
<input id="searchbar" type="text" value="" placeholder=" Search" onclick="sort()" onkeyup="">
<div id="myDropdown" class="dropdown-content">
<ol id="list1">
<li>New Born</li>
<li>Smash the Cake</li>
<li>Pregnancy</li>
<li>Pre-Wedding</li>
<li>Family</li>
<li>Birthday</li>
<li>Professional</li>
<li>Social Media</li>
</ol>
<!-- TO DO: ADD ITEMS TO THE LIST-->
</div>
<p class="copyright">© 2022 Farias Carril Photography | Designed and built by Daniel Carril</p>
</div>
innerHTML
textContent
I have to place a input box for search in custom dropdown for filtering the countries, but for the searching first time it is working fine (i.e; if I type 'ind', I have two countries with ind and I am able to click on that countries and select, but when I again edit the search box for another list of countries, the ng-click is not working and I am unable to select the item from list).
Html:
<div class="predtoptn" id="dvCountryLstdopn">
<input type="text" class="form-control frmsrch" ng-model="somvar.countryName" placeholder="Search Items"/>
<ul class="predtsct">
<li class="prfdwn" ng-repeat="countriesLst in ctrylst| filter:somvar:strict" ng-click="countryIdFunc(countriesLst.countryId,countriesLst.countryName)">{{countriesLst.countryName}}</li>
</ul>
</div>
JavaScript:
vm.countryIdFunc = function (Id, txt) { vm.cntryId = Id; vm.cntryIdTxt = txt; }
Can you try like the below in your template,
<li class="prfdwn" ng-repeat="countriesLst in ctrylst| filter:somvar:strict">
<span ng-click="countryIdFunc(countriesLst.countryId,countriesLst.countryName)">
{{countriesLst.countryName}}
</span>
</li>
I have a question about popping selection from dropdown off the menu. I have a dropdown that gets dynamically populated with people's names, and I'd like the name selected to pop off the drop down menu and appear in a div next to it. The dropdown menu:
<div class="col-md-4">
<div class="dropdown">
<button style="width: 100%;" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Group Members
<span class="caret"></span></button>
<ul class="dropdown-menu scrollable-menu" role="menu">
{{#each users}}
<li data-uid={{this.u_id}}>{{this.full_name}}</li>
{{/each}}
</ul>
</div>
</div>
And the div I'd like the information (name) to appear:
<div class="col-lg-4">
<h2 class="text-center" style="margin-top: 0;">Selected Group Members</h2>
<ul class="list-unstyled">
<li data-uid={{this.u_id}} class="text-center">{{this.full_name}}</li>
</ul>
</div>
I'm imagining this can be done with some jQuery, which I'm unfortunately not too great at, so I'm not quite sure how to do this. Any help is appreciated!
This should does the work. Please check.
// selected element
var selections = [];
// container that holds selections
var listContainer = $('.container .list-unstyled');
// sorting array of objects by provided field
var sortBy = function (arr, field) {
return arr.sort(function (a, b) {
if (a[field].toLowerCase() < b[field].toLowerCase()) return -1;
if (a[field].toLowerCase() > b[field].toLowerCase()) return 1;
return 0;
});
};
// redraw list on container
var reorder = function(){
listContainer.html('');
for(var i = 0; i < selections.length; i++){
listContainer.append('<li data-uid=' + selections.id + '>' + selections.value + '</li>');
}
}
// list items click handler
$('ul.list-unstyled li').click(function(){
selections.push({
id: $(this).attr('data-uid'),
value: $(this).text()
});
selections = sortBy(selections, 'name');
});
My HTML Code is like this :
<div class="content">
box 1 (Customer)
<ol class='example mauDIDROP vertical'>
<li>Valentino Rossi</li>
<li>David Beckham</li>
<li>Eden Hazard</li>
<li>Lionel Messi</li>
<li>Christiano Ronaldo</li>
<li>Frank Lampard</li>
</ol>
</div>
<div class="content">
<form id="myForm" action="" method="POST">
box 2 (Room Type)
<br>
<select id="room_type">
<option value="1">Single Room</option>
<option value="2">Double Room</option>
<option value="3">Twin Room</option>
</select>
<input type="button" value="Add" style="margin-top: -10px;" id="add_room">
<ol class="example areaDROP vertical" id="room_list">
<li class="room_number msg1" id="room_remove11">Deluxe Room<div class="room-remove"><i class="fa fa-times"></i></div><ol><li id="room_remove21">John Terry<div class="room-remove"><i class="fa fa-times"></i></div></li></ol></li>
<li class="room_number msg1" id="room_remove12">Family Room<div class="room-remove"><i class="fa fa-times"></i></div><ol><li id="room_remove22">Jose Mourinho<div class="room-remove"><i class="fa fa-times"></i></div></li></ol></li>
</ol>
<button type="submit">Save</button>
</form>
</div>
My Javascript is like this :
function delete_room(id){
$('#room_remove'+id).remove();
}
$(document).ready(function(){
$("ol.mauDIDROP").sortable({
group: '.example'
});
$("ol.areaDROP").sortable({
group: '.example',
});
var room_type_number = 5;
$('#add_room').click(function(){
var text = $("#room_type option:selected").html();
var room_type_id = $.trim($('#room_type').val());
$('#room_list').append('<li class="room_number msg" id="room_remove'+(++room_type_number)+'" data-id="'+room_type_id+'" data-name="'+text+'">'+text+'<div class="room-remove"><i class="fa fa-times"></i></div><ol></ol></li>');
$("ol.mauDIDROP").sortable({
group: '.example'
});
$("ol.areaDROP").sortable({
group: '.example',
});
});
});
Demo is like this : https://jsfiddle.net/oscar11/4wnfnz6z/1/
When I click on the close icon, the selected element successfully deleted.
But what I want:
When I click on the close icon, the selected element removed and deleted customer element appears in box 1.
For example : http://imgur.com/rEzryt3
When I click on the close icon(deluxe room), it will look like this : http://imgur.com/YpkBTKH
How to keep deleted customer element in moving towards the box 1?
Any suggestion to solve my problem?
Thank you
You can change a bit your delete_room function so it would grab the names of customers from the room you are removing and then append them as lis to your left container:
function delete_room(id){
var customers = '';
$('#room_remove'+id).find('li').each( function() {
customers += '<li>'+$(this).text()+'</li>';
});
$('#room_remove'+id).remove();
$('ol.example.mauDIDROP.vertical').append(customers);
}
Check fiddle: Fiddle
This approach have better performance, cause you are setting the find to a var and doing a loop instead of doind a loop with the find.
var child = $('#room_remove'+id).find('li');
if(child.length > 0){
var li = "";
child.each(function(){
li += "<li>"+$(this).text()+"</li>";
});
}
$(".mauDIDROP").append($(li));
<div id="list1" class="dropdown-check-list"> <span class="anchor">Select State</span>
<ul class="items" data-bind="foreach:carTypes" onchange="GetSelectedValut1()">
<li>
<label>
<input id="items1" type="checkBox" /><span id="vv1" data-bind="text:text,value:text"></span>
</label>
</li>
</ul>
</div>
Want all the values of the cartypes when i check the box. geting only one (top most one) value here.
Here is my javascript code:
function GetSelectedValut1() {
if (document.getElementById('items1').checked) {
var list_value = document.getElementById("vv1").value;
document.getElementById("vall1").innerHTML = list_value;
} else document.getElementById("vall1").innerHTML = "";
}
want all the values of the cartypes when i check the box. geting only one(top most one) value here. my event to get the values is it sufficient here.