I have a ComboBox using FuelUX, code as below:
<div class="form-group">
<label for="number_choice">
1, 2, 3, or 4?<br />
</label>
<div class="input-group input-append dropdown combobox" data-initialize="combobox" id="myCombobox">
<input type="text" name="number_choice" id="number_choice" class="form-control input-lg"
value="{{ old('number_choice') }}">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown"><span
class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li data-value="1">1</li>
<li data-value="2">2</li>
<li data-value="3">3</li>
<li data-value="4">4</li>
<li data-value="??">Other (let us know in your own words)</li>
</ul>
</div>
</div>
</div>
I can't see in the documentation how I can allow for the custom value "Other" where users can specify in their own words, what it is exactly they want.
The following should work. changed will fire on blur/deselect.
$('#myCombobox').on('changed.fu.combobox', function (event, data) {
var selectedItem = $('#myCombobox').combobox('selectedItem');
});
Related
I am trying to have a search bar with 2 options (as dropdown list) and ONLY if user selects S1 it should call a highligthme () function and should display .
but if user selects S2 it should not call this function and my code is calling this function on both selections from drop down list ?
Below is my code. Please guide what am i doing wrong?
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">ACTION</span>
</button>
<ul class="dropdown-menu scrollable-dropdown" role="menu" >
<li id="S1"><a href="#" >search 1</a></li>
<li id="S2">search 2</li>
</ul>
</div>
<input type="hidden" name="search_param" id="search_param">
<input type="text" class="form-control" name="Search" id="txtBoxSearchKey" placeholder="Select Action from list " size="20" >
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btnSearch" class="btnSearch"onclick="orderSelector(document.getElementById('txtBoxSearchKey').value,document.getElementById('search_param').textContent)">
<span class="glyphicon glyphicon-search"></span>
</button></span>
<span class="result-count" ></span>
</div>
CSS being used is:
/* Style to create scroll bar in dropdown */
.scrollable-dropdown{
height: auto;
max-height:320px; /* Increase / Decrease value as per your need */
overflow-x: hidden;
}
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
Ok you missing the event listeners on your buttons clicks .
Another think I changed was to give the elements ID's so we can add events to them .
I also used they CSS libraries that come with bootstrap
In order to get the popup to display we have to add the
show
class to the element
Here is the working code in the snippet It shows the popup and runs a function called highlight if S1 is clicked ...
I trust this helps
//first thing is to get the action button click event
var dropdown = document.getElementById('dropdown');
dropdown.addEventListener("click", display);
function display(e) {
var foo = document.getElementById('foo');
if (foo.classList.contains('show')){
foo.classList.remove('show');
}
else{
foo.classList.add('show');
}
}
// now to run your highlight me function
var s1 = document.getElementById('S1');
s1.addEventListener("click", highligthme)
function highligthme() {
console.log('this does whatever hilightme does ')
foo.classList.remove('show');
}
.scrollable-dropdown {
height: auto;
max-height: 320px;
/* Increase / Decrease value as per your need */
overflow-x: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id='dropdown'>
<span id="search_concept">ACTION</span>
</button>
<ul class="dropdown-menu scrollable-dropdown " id='foo' role="menu ">
<li id="S1">search 1</li>
<li id="S2">search 2</li>
</ul>
</div>
<input type="hidden" name="search_param" id="search_param">
<input type="text" class="form-control" name="Search" id="txtBoxSearchKey" placeholder="Select Action from list " size="20">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btnSearch" class="btnSearch"
onclick="orderSelector(document.getElementById('txtBoxSearchKey').value,
document.getElementById('search_param').textContent)">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<span class="result-count"></span>
</div>
I have below stackblitz
When I move click event form li to input change, it fired once, but
event.stopPropagation();
does not work.
https://stackblitz.com/edit/bootstrap-pvjfbv?file=index.html
Please help I spent alot of time, but could not manage to make it work
Removing the 'label' element surrounding the 'input' tag fixes the issue.
<div class="flx" style="align-items: flex-start">
<div style="flex: 1;">
<div class="dropdown_23 drp-custom-select-container modal-select-custom">
<div class="btn-group keepopen bootstrap-select form-control input-sm ddlcustomselect" data="Select">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button">
<span #spnSelectedText class="filter-option pull-left" style="width: calc(100% - 20px);overflow: hidden;margin-right: 20px;">Select</span>
<span class="bs-caret">
<span class="caret"></span>
</span>
</button>
<div class="dropdown-menu open" role="combobox" style="max-height: 482px; overflow: hidden;">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 470px; overflow-y: auto;">
<li *ngFor="let item of data_source" (click)="SelectElementCliked($event,item)" >
<input type="checkbox"/>
<span class="checkmark"></span>
<span class="text">{{item.Text}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Refer this
you have to emit #output
in template file - apply change event on input check box instead of li
<li *ngFor="let item of data_source" >
<label class="checkboxcontainer checkbox-inline">
<input type="checkbox" (change)="SelectElementCliked($event, item)"/>
<span class="checkmark"></span>
<span class="text">{{item.Text}}</span>
</label>
</li>
In ts file
SelectElementCliked(event: any, item: any) {
if ( event.target.checked ) {
console.log(item);
this.onItemSelected.emit(item);
}
}
changing the < li > content to as follows fixes the issue
<li *ngFor="let item of data_source" (click)="SelectElementCliked($event,item)" >
<label class="checkboxcontainer checkbox-inline">
<input [id]="item.Value" [name]="item.Value" type="checkbox" />
<span class="checkmark"></span>
<label (click)="$event.stopPropagation()" [for]="item.Value" class="text">{{item.Text}}</label>
</label>
</li>
on clicking the label 2 events are propagated to the parent component , hence emiting 2 events. you may block the click of the label element using stopproagation
I am trying to make my dropdown open only on click. Currently, I can click to open the dropdown however when I move my mouse to the submenu or anywhere else the submenu disappears.
I have tried to use e.stopPropagation but no luck.
Is there a CSS or Javascript solution I can use to help.
HTML
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="menu-anchor" href="javascript:;">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants</a> <i class="dropdown-toggle" data-toggle="dropdown"></i>
<div class="dropdown-menu" id="myDropDown">
<div class="row">
<div class="col-xs-6 col-md-4">
<label for="activityCode">Activity Code</label>
<input name="activityCode" id="activityCode" class="form-control" type="text" maxlength="3" value={this.state.activityCode} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="awardId">Grant Number</label>
<input name="awardId" id="awardId" class="form-control" type="text" maxlength="10" value={this.state.awardId} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="granteeName">Grantee Name</label>
<input name="granteeName" id="granteeName" class="form-control" type="text" value={this.state.granteeName} onChange={this.handleChange} />
</div>
</div>
</div>
</li>
</ul>
</div>
JS
$('#myUlList').on({
"click":function(e){
e.stopPropagation();
}
});
$('#myDropdown').on({
"click": function (e) {
e.stopPropagation();
}
});
Use <a class="dropdown-toggle" data-toggle="dropdown" href="#"> to open/close a dropdown menu in Bootstrap. JQuery code for the dropdown is not needed. Ofcourse the jquery.min.js and bootstrap.min.js are required.
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="dropdown-toggle menu-anchor" data-toggle="dropdown" href="#">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants
</a>
<div id="myDropDown" class="dropdown-menu">
...
</div>
</li>
</ul>
</div>
I don't recognize your jquery as valid syntax. Try this to trigger a function on click.
$('#myUlList').on("click", function(e) {
e.stopPropagation();
});
$('#myDropdown').on("click", function(e) {
e.stopPropagation();
});
I have the below code to create a form input field which the user can type their search query into as normal. However, I also want to dropdown option to be part of this input. The problem I have, is that when the user selects an option from this dropdown, there is no placeholder text that appears in the input field or nor does the input text change to show the user what they just selected from the dropdown. I tried to write a small script which would detect if an li a was selected and it would update the input field accordingly but I am a bit stuck. Any help welcome.
<form role="form">
<div class="input-group">
<div class="input-group-btn">
<input type="text" class="form-control" placeholder="Search">
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input">black</li>
<li class="input">white</li>
<li class="input">red</li>
<li class="input">blue</li>
<li class="input">yellow</li>
</ul>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
</form>
$('ul li a').on('select', function () {
var selectedOption = $(this).find("placeholder").text();
$(this).text(selectedOption);
})
Here you have an working jsfiddle
$('ul li a').on('click', function () {
var selectedOption = $(this).text();
$('.form-control').val(selectedOption);
})
Try this code :
$('#color-dropdown-menu li').click( function () {
$('.form-control').attr('placeholder',$( this ).text());
});
HTML :
<form role="form">
<div class="input-group">
<div class="input-group-btn">
<input type="text" class="form-control" placeholder="Search">
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input">black</li>
<li class="input">white</li>
<li class="input">red</li>
<li class="input">blue</li>
<li class="input">yellow</li>
</ul>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
</form>
CHECK IT
Please I am assigning user permission based on user type read from session data in Node.js and the hide html li elements based on the type of user. It seems to work but the behaviour it awful in the sense that. Whenever I load a page, all the menu items refresh/ loads again before they are hidden. How do I prevent this behaviour. It there something I have doing wrong or the approach is just not good. I have reference the client-side code on each page within the application
This is my code for the client side
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
if (data == 'Student') {
$("#Offer").find("#shareitem").show();
$("#Offer").find("#offeritem").hide();
$("#Offer").find("#returnitem").hide();
$("#Offer").find("#recallitem").hide();
$("#Offer").find("#renewitem").hide();
$("#Offer").find("#guestoffer").hide();
$("#Offer").find("#manageoffers").hide();
$("#Overview").hide();
$("#WithHolding").hide();
} else if (data == 'Admin') {
$("#Offer").find("#shareitem").hide();
$("#Discover").hide();
} else if (data == 'Teacher') {
$("#Offer").find("#shareitem").hide();
$("#Discover").hide();
} else {
$("#Offer").hide();
$("#Discover").hide();
$("#Overview").hide();
$("#WithHolding").hide();
$("#myAccount").hide();
$("#Message").hide();
}
})
});
This is my code on the server side
outer.get('/permission',function(req,res) {
if (req.user)
{
var UserType = req.user.UserType;
switch (UserType) {
case "Admin":
if ((req.isAuthenticated()) && (req.user.UserType == 'Admin')) {
res.send(UserType)
}
break;
case "Student":
if ((req.isAuthenticated()) && (req.user.UserType == 'Student')) {
res.send(UserType)
}
break;
case "Teacher":
if ((req.isAuthenticated()) && ((req.user.UserType == 'Admin') || (req.user.UserType == 'Professor'))) {
res.send(UserType)
}
break;
default :
if (req.isAuthenticated()) {
res.send(UserType)
}
}
}else{
res.send('undefined')
}
});
// This is my Navbar which contains the menus and it is called or references on each page through out the application
<script src="/javascript/ClientJs/HideMenus.js"></script>
//This my Javascript file which contains the permission instructions(client side)
<nav id="nav"class="navbar navbar-inverse navbar-fixed-top" style="z-index: 10;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/"><%=__('Borrowing Sys')%></a>
<div class="nav-collapse collapse" aria-expanded="true">
<ul id="menu"class="nav">
<li id="home"><%=__('Home')%></li>
<li id="Offer" class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Offer')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li id="offeritem"><%=__('Offer Item')%></li>
<li id="recallitem"><%=__('Recall Item')%></li>
<li id="renewitem"><%=__('Renew Item')%></li>
<li id="returnitem"><%=__('Return Item')%></li>
<li id="odivider"class="divider"></li>
<li id="guestoffer"><%=__('Guest Offer')%></li>
<li id="shareitem"><%=__('Share Item')%></li>
<li id="manageoffers"><%=__('Manage Offers')%></li>
</ul>
</li>
<li id="Discover"class="dropdown">
<%=__('Discover Items')%><span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><%=__('Discovery Map')%></li>
<li><%=__('Send a Request')%></li>
<li><%=__('Available Items')%>
</li>
</ul>
</li>
<li id="Message" class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Messages')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%=__('Private Messages')%></li>
</ul>
</li>
<li id="Overview"class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('System Overview')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%=__('Data Analysis')%></li>
<li><%=__('User Activity Logs')%></li>
<li class="divider"></li>
<li><%=__('Remove Offers')%></li>
<li><%=__('Students Request')%></li>
</ul>
</li>
<li id="myAccount" class="dropdown">
<%=__('My Account')%><span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li id="youroffers"><%=__('Your Offers')%></li>
<li id="reservations"><%=__('Reservations')%></li>
<li id="divider"class="divider"></li>
<li id="profile"><%=__('My Profile')%></li>
<li id="invite"><%=__('Invite Friend')%></li>
<li ><%=__('Log out')%></li>
</ul>
</li>
</ul>
<!-- add search form -->
<div id="WithHolding" class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="<%=__('Student ID')%>" Id="SearchStudent" name="SearchStudent">
<button id="Search" name="Search" class="btn btn-primary" type="button"><%=__('Check Clearance')%>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
This is a typical example of how i have referenced the NavBar on all pages. This is the overall structure of the design
<!DOCTYPE html>
<html lang="en">
<% include ./MyLayout/header %>
<body>
<% include ./MyLayout/navbar %>
<script src="/javascript/ClientJs/RenewItem.js"></script>
<div class="container">
<div class="row-fluid">
<div id="content" class="span12">
<div class="row-fluid">
<form class="form-horizontal span12" method="post" action="RenewItems">
<fieldset>
<legend><%=__('Renew Item')%>
<h6 style="color: #006dcc"><%=__('Extend/Renew item given to student')%></h6>
</legend>
<br>
<% if(SuccessMessage.length>0){ %>
<div class="row-fluid status-bar">
<div class="span12">
<div class="alert alert-success alert-dismissible" id="alertmessage" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong><%=__('Success !')%></strong><%= SuccessMessage %>
</div>
</div>
</div>
<% } %>
<% if(ErrorMessage.length>0){ %>
<div class="row-fluid status-bar">
<div class="span12">
<div class="alert alert-danger alert-dismissible" id="alertmessage" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong><%=__('Error!')%></strong> <%= ErrorMessage %>
</div>
</div>
</div>
<% } %>
<div class="row-fluid">
<div class="span8">
<div class="control-group">
<label for="BookingNo" class="control-label"><%=__('Booking Number:')%></label>
<div class="controls">
<input id="BookingNumber" name="BookingNumber" type="text" value="" required=""
title="<%=__('Please enter Booking number for the transaction')%>"
placeholder="<%=__('Booking Number')%>">
</div>
</div>
<div class="control-group">
<label for="ItemName" class="control-label"><%=__('Item Name:')%></label>
<div class="controls">
<input type="text" id="ItemName" name="ItemName" value="" required=""
title="<%=__('Please enter Item Name')%>" placeholder="<%=__('Item Name')%>">
</div>
</div>
<div class="control-group">
<label for="StudentID" class="control-label"><%=__('Student/Guest ID:')%></label>
<div class="controls">
<input id="StudentID" name="StudentID" type="text" value="" readonly required=""
title="<%=__('Please enter student matriculation ID')%>" placeholder="<%=__('Matriculation Number/Guest ID')%>">
</div>
</div>
<div class="control-group">
<label for="ItemNumber" class="control-label"><%=__('Item Number:')%></label>
<div class="controls">
<input id="ItemNumber" name="ItemNumber" type="text" value="" readonly
required="" title="<%=__('Please enter Item Number')%>" placeholder="<%=__('Item Number')%>">
</div>
</div>
<div class="control-group">
<label for="EmailID" class="control-label"><%=__('Student/Guest Email ID:')%></label>
<div class="controls">
<input type="text" id="StudentEmail" name="StudentEmail" value=""
placeholder="<%=__('Student/Guest Email')%>" readonly required=""
title="<%=__('Student/Guest Email ID cannot be empty')%>">
</div>
</div>
<div class="control-group">
<label for="ReturnDate" class="control-label"><%=__('Old Return Date:')%></label>
<div class="controls">
<input id="OldReturnDate" name="OldReturnDate" type="text" value="" readonly
placeholder="<%=__('DD-MM-YYYY')%>" required="" title="<%=__('Please search for item')%>">
</div>
</div>
<div class="control-group">
<label for="Remarks" class="control-label"><%=__('Duration:')%></label>
<div class="controls">
<select Id="Duration" name="Duration" class="form-control">
<option value="1 week"><%=__('1 week')%></option>
<option value="2 weeks"><%=__('2 weeks')%></option>
<option value="3 weeks"><%=__('3 weeks')%></option>
<option value="4 weeks"><%=__('4 weeks')%></option>
</select>
</div>
</div>
<div class="control-group">
<label for="ReturnDate" class="control-label"><%=__('New Return Date:')%></label>
<div class="controls">
<input id="ReturnDate" name="ReturnDate" type="text" value="" placeholder="<%=__('DD-MM-YYYY')%>"
readonly required="" title="<%=__('Please specify duration of extension')%>">
</div>
</div>
<div class="control-group">
<label for="Remarks" class="control-label"><%=__('Remarks:')%></label>
<div class="controls">
<textarea id="Remarks" name="Remarks" style="width: 70%;" rows="4" required=""
title="<%=__('Any remarks regarding the renewal of an item')%>"></textarea>
</div>
</div>
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="reset" class="btn btn-default"><%=__('Cancel')%></button>
<button type="submit" class="btn btn-primary"><%=__('Renew')%></button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<% include ./MyLayout/footer_bottom%>
</html>
What about hiding everything first. Suppose your menu items are wrapped in a div or if menu items are in a OL/UL, you can set it up to hide on loading of page:
.menu-wrapper{
display:none;
}
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
//your stuff
}).always(function(){
$(".menu-wrapper").show();//this will toggle display:none
});
});
You are noticing this because of the delay in getting the response from the server.
All Menus Loaded First > Wait Few Seconds > Server Responds > Hide Menus
To avoid this, hiding menus during initial loading and showing them once you get the response will be the correct approach.
BTW, I will not prefer to show and hide menu items in the client side. The best option will be to get the list of allowed menu items from the server and rendering in the client side.
Please remember, an user can change the CSS styles to see the hidden menu and he could do operations that are not allowed, unless your server validates each request.
Change your html to render the menus in hidden mode, by adding the css class.
.menu-wrapper {
display:none;
}
<ul id="menu" class="nav">
<li id="home"class="hidden-menu"><%=__('Home')%></li>
<li id="Offer" class="dropdown menu-wrapper">
</li>
<li id="Discover" class="dropdown menu-wrapper">
</li>
<li id="Message" class="dropdown menu-wrapper">
</li>
<li id="Overview" class="dropdown menu-wrapper">
</li>
<li id="myAccount" class="dropdown menu-wrapper">
</li>
</ul>
Then after you get the permissions from the server, enable the nodes.
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
// If the menu should be shown then remove the css class
if(data === 'Admin') {
$("#Discover").removeClass('hidden-menu');
}
})
});