We Keep Coding

Display active Main Menu and sub Menu using CSS and javascript

I have left side menus.
<div class="panel">
<div class="panel-heading panel-red" role="tab" id="headingDash" style="">
<a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseDash" aria-expanded="true" aria-controls="collapseDash" class="menuList" style="">
<i class="fa fa-dashboard" style=" padding: 15px;color: #fff"></i>
Dashoboard
</a>
</div>
<div id="collapseDash" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingDash">
<div class="panel-body">
<ul class="nav">
<li class="subMenuList active" style=" ">
Dashboard-1
</li>
<li class="subMenuList" style="">
Dashboard-2
</li>
</ul>
</div>
</div>
</div>
I want to display active main menu and sub menus. On-click of sub menu using css and JS.
I have done it for static main menu and sub menus.
My Fiddle link: https://jsfiddle.net/whv76xd0/6/
How can do this dynamic on click?
Working Fiddle link

Try this.
$(document).ready(function(){
$(document).on("click", ".subMenuList", function(){
$('.panel-heading').removeClass('panel-red');
$('.subMenuList').removeClass('active');
$(this).closest('.panel').find('.panel-heading').addClass('panel-red');
$(this).closest('.panel').find('.panel-heading').removeClass('panel-head');
$(this).addClass('active');
})
})

#pavan, If you want to handle dynamic link of submenu, then try with below jQuery function.
$(document).ready(function(){
$(document).on("click",".subMenuList",function(){
alert();
})
})
Here, instead of alert you can put, any functionality which you want to perform with submenu click event

Show input with ng-show when select some value from dropdown

I'm getting info from json and printing on a dropdown. Next, my code:
function firstCombo (){
$http.get('app/combo.json')
.then(function(data){
vm.dataCombo = data.data;
//console.log(vm.dataCombo);
});
}
On my html view:
<div class="col-md-4 col-md-offset-3"> What is this?
<button type="button" id="options1" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">
Select one <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="list1">
<li ng-repeat="dea in $ctrl.dataCombo">{{dea.value}}</li>
</ul>
</div>
The returned values are just 3:
Apple
Orange
Mango
What i want to do, is to show an input if the user selects "Apple":
<div class="row" ng-show="false">
<div class="col-md-4">What kind of apple?<input type="text" class="form-control"></div>
</div>
Right now, is hidden with ng-show="false", but, what am i have to do to show/hide the input if the value of dropdown is "Apple"? Guess is very simple, but right now, i'm in blank.
Thanx in advance.

you can use ng-if rather than ng-show/hide option.This is one of best practice in AngularJs
<div class="row" ng-if="selectedValue=='Apple'">
<div class="col-md-4">What kind of apple?<input type="text" class="form-control"></div>
</div>

How to preselect a option - Dropdown

my HTML is a static variant, not a solution builded with ng-repeat or an existing JSON/Angular Controler.
I need to select a custom option and used alreay ng-select without a success.
My HTML looks like:
<div class="btn-group" dropdown>
<button type="button" class="pull-right btn btn-block btn-dropdown" dropdown-toggle>
<div class="pull-left">
<i class="flag-{{my.filter.flag}} left vcenter"></i>
<span class="vcenter">{{my.filter}}</span>
</div>
<div class="pull-right"><span class="caret"></span></div>
</button>
<ul class="dropdown-menu" dropdown-menu ng-init="options[0]">
<li ng-class="{active: my.filter == 'Germany'}">
<a ng-click="my.filter = 'Germany'; my.filter.flag='DEU'"><i class="flag-DEU"></i><span>Germany</span></a>
</li>
<li ng-class="{active: my.filter == 'England'}">
<a ng-click="my.filter = 'England'; my.filter.flag='GBP'"><i class="flag-GBP"></i><span>England</span></a>
</li>
</ul>
</div>
so how can i solve it to preselect the option "Germany" by pageloading into the div.pull-left section?

You mention ng-select in your question, but you used ng-selected. Maybe it is just a typo.

Sumbit multiple dropbox fields to $_POST in html

I see from this previous question´s answer that you can send a dropbox value to $_POST with this jquery but now i have to do it with 2 dropbox elements.
In my case both $_POST variables are mixing up and having the value of the 'category' dropbox but i need that each $_POST variable come with its corresponding dropbox value.
This is the html for both dropbox fields:
<div class="control-group">
<label class="control-label" for="provider_name">Nombre del Proveedor</label>
<div class="controls">
<!-- ----------Dropdown---------- -->
<div class="btn-group btn-input clearfix">
<button type="button" name="provider_name" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
<span data-bind="label">Elige una</span> <span class="caret"></span>
</button>
<input type="hidden" id="provider_name" name="provider_name" />
<ul class="dropdown-menu" role="menu" >
<?php
foreach($array_providers as $row ){
echo '<li>'.$row["nombre_proveedor"].'</li>';
}
?>
</ul>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="category">Categoría</label>
<div class="controls">
<!-- ----------Dropdown---------- -->
<div class="btn-group btn-input clearfix">
<button type="button" name="category" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
<span data-bind="label">Elige una</span> <span class="caret"></span>
</button>
<input type="hidden" id="category" name="category" />
<ul class="dropdown-menu" role="menu" >
<?php
foreach($array_categories as $row ){
echo '<li>'.$row["nombre_categoria"].'</li>';
}
?>
</ul>
</div>
This is the jquery im using:
$( document.body ).on( 'click', '.dropdown-menu li', function( event )
{
var $target = $( event.currentTarget );
$target.closest( '.btn-group' )
.find( '[data-bind="label"]' ).text( $target.text() )
.end()
.children( '.dropdown-toggle' ).dropdown( 'toggle' );
return false;
});
$(document).ready(function(){
$('.dropdown-menu li').click(function()
{
$('#provider_name').val($(this).html());
$('#category').val($(this).html());
$('#myform').submit();
});
});

Just to make thing clarified, from the question you have provided, they don't actually do anything fancy with the jQuery code. What they have done is: When you click on the "li" tag, it will pass the data to the hidden input and then force the form to start submitting process.
If you are planning to do the same things but with multiple dropdown, the most simplest way is to use .parent().
$("li").parent() // this will return you the <ul> object containing the li
Look at my jsfiddle for more info:
http://jsfiddle.net/mankinchi/dfbhL81s/
In my jsFiddle, I have 2 different dropdown and input (I didn't hide the input just for clarification. And didn't put it in the form or force it to submit). As you can see, I distinguish the drop down menu by id and input by class. When you click on a "li" tag,
var parentId = $(this).parent().attr("id");
this will get the id of the "ul" tag contains it and use it to find the "input" tag

I was able to differentiate between the two drop-downs by adding an if condition in the jquery asking to identify the parent of the list by an id i set earlier on the html.
Here i add both dropdowns html code and the jquery for reference:
First Dropdown:
<div class="dropdown">
<button id="provider_button" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Elige una <span class="caret"></span>
</button>
<input id="provider_name" type="hidden" name="provider_name"/>
<ul id="provider_list" class="dropdown-menu" aria-labelledby="dropdownMenu1">
<?php
foreach($array_providers as $row ){
echo '<li>'.$row["nombre_proveedor"].'</li>';
}
?>
</ul>
</div>
Second dropdown:
<div class="dropdown">
<button id="category_button" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Elige una <span class="caret"></span>
</button>
<input id="category" type="hidden" name="category"/>
<ul id="category_list" class="dropdown-menu" aria-labelledby="dropdownMenu1">
<?php
foreach($array_categories as $row ){
echo '<li>'.$row["nombre_categoria"].'</li>';
}
?>
</ul>
</div>
Jquery:
$(document).ready(function()
{
$('.dropdown-menu li').click(function(event)
{
var $target = $(event.currentTarget);
if($(this).parent().attr("id") == "provider_list"){
$('#provider_button').text($target.text()); //this is to change the button when option selected
$('#provider_name').val($(this).text());
}
if($(this).parent().attr("id") == "category_list"){
$('#category_button').text($target.text()); //this is to change the button when option selected
$('#category').val($(this).text());
}
});
});
The drop-down toggle behavior is handled by bootstrap.
I don't know if this is the best solution but i am a newbie and this is what worked in the moment.

Making same jquery work for drop downs in dynamically rendered partial views

In my main view, I have an add button. Clicking the add button brings in a partial view.
Main.cshtml
<div id="NameCats">
#Html.Partial("_Temp")
</div>
<div class="row">
<button id="addInfo" class="btn"><img src="~/Content/Images/Add.PNG" /></button>
Add Info
</div>
In my Temp partial view, I have multiple bootstrap input drop down groups.
_Temp.cshtml
<div id="info">
<div class="well">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input id="name" type="text" class="form-control dropdown-text" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="nameList" class="dropdown-menu pull-right">
<li> <a tabindex="-1" href="#"> Test1 </a> </li>
<li> <a tabindex="-1" href="#"> Test2 </a> </li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<input id="cat" type="text" class="form-control dropdown-text" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="catList" class="dropdown-menu pull-right"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
Selecting an item from first drop down should fill in the input for that drop down with the selected value. Here is my javascript to make it work. The problem is when I select item from the drop down that is rendered initially, the click (li a) function works but when I click Add button and then try to repeat the selection for the drop down in this new info section, the click (li a) function is not hit. What am I doing wrong?
$(function () {
$('.dropdown-menu').each(function () {
$(this).on('click', 'li a', function () {
$(this).parents(".input-group").find('.dropdown-text').val($(this).text());
});
});
});
$(function () {
$('#addInfo').click(function (e) {
e.preventDefault();
$('#NameCats').append($("#info").html());
});
});

The issue is your that your newly added elements do not have a click handler associated with them, since the function to add the handler is only run on page load. You have the concepts of event bubbling in place, but on the wrong parent elements and that essentially only keeps an eye on new li a elements and not entire dropdown-menu being added.
Change your first function to the following, which will keep a "watch" on any dropdown-menu added in the #NameCats element.
$(function () {
$('#NameCats').on('click', '.dropdown-menu li a', function () {
$(this).parents(".input-group").find('.dropdown-text').val($(this).text());
});
});
Here is a jsFiddle working example.