We Keep Coding

Search bar with dropdown options and function call

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>

Angular 6 bootstrap multiselect item click firing twice

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

Disable toggle inheritance from parent tag

Hi i was wondering if it is possible to override or disable inheritance from a parent tag.
what i want to do is to be able to make use if the "input-group" class but having a particular tag not inheriting the toggle function from the parent a-tag.
the reason i'm doing this is because i'm using a plugin and i want to add a button looking consistent with the overall theme.
Here is some code:
<div class="col-lg-12 col-md-6">
<lable class="lfInputLable">From date</lable>
<div class="dropdown">
<a class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target="#">
<div class="input-group">
<!-- COMMENT: i want the span tag shown under this comment NOT to inherit the a-tag's toggle function, it being inside it and all -->
<span type="button" id="dateRemove" class="input-group-addon" ng-click="clearToDate()"><i class="glyphicon glyphicon-remove"></i></span>
<input type="text" class="form-control" data-ng-model="data1.dateDropDownInput1" data-date-time-input="YYYY-MM-DD HH:mm" disabled="disabled"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="data1.dateDropDownInput1" data-datetimepicker-config="{ dropdownSelector: '#dropdown1' }" />
</ul>
</div>
</div>
So is this at all possible?

Change class name based on text mentioned in the box in Jquery

i am trying to change the current class name prefix.
Here is how my html looks like:
<div class="add_multi_category_block">
<div class="form-group">
<div class="col-md-2">
<a id="add_category" class="control-label add_category">Add multiple category</a>
</div>
<div class="col-md-10">
</div>
</div>
<div class="form-group main_category">
<div class="col-md-1 rowCountNumber" style="text-align: right;">0</div>
<div class="col-md-2"><input type="text" class="form-control col-md-3" name="main_category[]" id="" value="" placeholder=""></div>
<div class="col-md-1"><a class="add_sub_category main_category0 btn btn-circle green-sharp btn-sm" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
<div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm nav-item tooltips"><i class="fa fa-times"></i></a></div>
</div>
<div class="form-group main_category">
<div class="col-md-1 rowCountNumber" style="text-align: right;">1</div>
<div class="col-md-2"><input type="text" class="form-control col-md-3" name="main_category[]" id="" value="" placeholder=""></div>
<div class="col-md-1"><a class="add_sub_category main_category1 btn btn-circle green-sharp btn-sm" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
<div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm nav-item tooltips"><i class="fa fa-times"></i></a></div>
</div>
<div class="form-group sub_category_1">
<div class="col-md-2 rowCountNumber" style="text-align: right;">1.0</div>
<div class="col-md-2"><input type="text" class="form-control col-md-3" name="sub_category_[]" id="" value="" placeholder=""></div>
<div class="col-md-1"><a class="btn green-sharp btn-circle btn-sm add_sub_category add_sub_category_1" data-placement="top" data-original-title="Add Sub Category" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
<div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm "><i class="fa fa-times"></i></a></div>
</div>
<div class="form-group sub_category_1">
<div class="col-md-2 rowCountNumber" style="text-align: right;">1.1</div>
<div class="col-md-2"><input type="text" class="form-control col-md-3" name="sub_category_[]" id="" value="" placeholder=""></div>
<div class="col-md-1"><a class="btn green-sharp btn-circle btn-sm add_sub_category add_sub_category_1" data-placement="top" data-original-title="Add Sub Category" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
<div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm "><i class="fa fa-times"></i></a></div>
</div>
</div>
Here is how it looks like when its get arranged in HTML with CSS, check below screenshot:
Now the problem is, i can have N level of childs here. Here i just want to do is, if i remove "0" column, then it should update the below column from "1" to "0" and sub-sequent child's should be
0
0.0
0.0.0
0.0.1
0.1
and so on...with the below number as well. So for the time being i used this below code to remove all the child under one parent.
Here is how it looks like.
$(document).on('click', '.remove_category', function(){
var parentRowCount = $(this).closest('.form-group').find('.rowCountNumber').html();
var subCategory = parentRowCount.replace(/[ .]/g, "_");
$(this).closest('.form-group').remove();
$("*[class*='sub_category_"+subCategory+"']").remove();
var i = 0;
$('.main_category').each(function(){
$(this).find('.rowCountNumber').html(i); /*----------This will change the number of outer columns but not of the childs -------*/
i++;
});
});
Is there any way to rename all the child with all sub level child at the same time?
For your understanding i am adding one more screenshot of show you how complexity increases here.
Thank you!

You just need to do another loop of all the sub-level elements and change the numbers. Below is the relevant code change.
$('.main_category').each(function(i,v){ // added "i" for index value
var previousNumber = $(this).find('.rowCountNumber').html(); // gets you the old number
var subClassName = 'sub_category_'+ previousNumber; // get the possible sub element class names
$(this).find('.rowCountNumber').html(i);
$('.add_multi_category_block [class="'+ subClassName +'"]').each(function(subIndex,elem){
$(elem).removeClass(subClassName).addClass('sub_category_' + i);
$(elem).find('.rowCountNumber').html( i + '.' + subIndex );
});
//i++; not required as the default callback provides you the index value.
});
Note: I have also changed certain code for better performance, Other changes which you can consider is
instead of $("*[class*='sub_category_"+subCategory+"']").remove(); use
$(".add_multi_category_block [class='sub_category_"+subCategory+"']").remove(); This will limit jquery to search only within the specified parent div .add_multi_category_block.

Search bar in navbar doesn't look the same in Google Chrome and Firefox

I have the following code for my search bar in the navbar. It looks well in Firefox but on Google Chrome the search bar stretches and goes below the navigation. How do I fix this?
<div class = "navbar navbar-inverse navbar-fixed-top">
<div class = "navbar-inner">
<div class = "container">
SIG Inventory System
<div class="navbar-header">
<button type='button' class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
</div>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav ">
<li class = "active">Home</li>
<li>About</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control input-sm " placeholder="Search..." name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-danger btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
<!--<form class="nav navbar-form navbar-right" role="search">
<div class="form-group ">
<input class="form-control input-sm " placeholder="Search..." type="text">
</div>
<button type="submit" class="btn btn-danger btn-sm">
<span class="fa fa-search"></span>
</button>
</form>-->
</div>
</div>
</div>
</div>

I had the same problem in bootstrap 3, with very similar markup. Try adding this to your override CSS, it will fix the end issue but doesn't solve the actual problem, unfortunately. I haven't gotten that far, yet.
nav .navbar-form {max-width: 300px}
Edit
Apparently this is a little more elegant of a fix.
.navbar-form .input-group-btn,
.navbar-form .input-group-addon {
width: auto;
}
However, I settled on:
.navbar-form .input-group-btn,
.navbar-form input { width: auto; }
See https://github.com/twbs/bootstrap/issues/9950