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.
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 am trying to create a search function with tabbed feature. It is showing currently fine. No error at all.
Problem is when i want to click on any tab it need to show/hide some of the content of other tab.
Whenever i click on any div it is showing the div content but not hiding or showing anything.
<div id="newsearchs" class="row">
<div class="row">
<div class="col-xs-12">
<ul id="myTab" class="nav# nav-tabs test">
<li class="active">People
</li>
<li>Jobs
</li>
<li>Location
</li>
</ul>
</div>
</div>
<div class="col-xs-12">
<div class="input-group input-group-md">
<input type="text" id= "search_value" class="form-control " placeholder="Search for ...">
<input name="search_location" id="search_location" placeholder="Location" class="form-control txt-auto"/>
<div id="people" class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Looking For <span class="caret"></span>
</button>
<ul class="navbar-custom-menu dropdown-menu pull-right">
<li>Student
</li>
<li>Teacher
</li>
<li>Institue
</li>
</ul>
</div>
<div id="jobs" class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Brief format <span class="caret"></span>
</button>
<ul class="navbar-custom-menu dropdown-menu pull-right">
<li>Brief format
</li>
<li>Detailed format
</li>
<li>Citesummary
</li>
<li>LaTeX (EU)
</li>
</ul>
</div>
<div id="locations" class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Brief format <span class="caret"></span>
</button>
<ul class="navbar-custom-menu dropdown-menu pull-right">
<li>Brief format
</li>
<li>Detailed format
</li>
<li>Citesummary
</li>
<li>LaTeX (EU)
</li>
</ul>
</div>
<!-- /btn-group --> <span class="input-group-btn">
<button class="btn btn-default" type="submit"> <span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
Here are the jquery code which not working at the moment.
<script type="text/javascript">
$('#jobs').hide();
$('#locations').hide();
$('#search_location').hide();
$('#myTab a').click(function (e) {
e.preventDefault();
if (!($(this).attr('id') == 'pep')) {
$('#search_location').hide();
$('#search_value').show();
$('#people').show();
$('#jobs').hide();
$('#locations').hide();
}
$(this).tab('show');
})
</script>
<script type="text/javascript">
$('#myTab b').click(function (e) {
e.preventDefault();
if (!($(this).attr('id') == 'job')) {
$('#search_location').hide();
$('#search_value').show();
$('#jobs').show();
$('#people').hide();
$('#locations').hide();
}
$(this).tab('show');
})
</script>
<script type="text/javascript">
$('#myTab c').click(function (e) {
e.preventDefault();
if (!($(this).attr('id') == 'loca')) {
alert('Hi');
$('#search_location').show();
$('#search_value').hide();
$('#locations').show();
$('#jobs').hide();
$('#people').hide();
// }
$(this).tab('show');
})
</script>
According to me $('#myTab c').click(function (e) { is not firing.
Please advise what am i doing wrong.
You have a number of HTML and JS formatting issues.
you have commented out a closing { before the third tab show call, ie. // }, you will need to uncomment this out
you are referring to html elements that dont exist. #myTab b and #myTab c are trying to look for html elements of tags <b> and <c>, but you're trying to attach handlers to the <a> tags, in which case, you can combine a lot of your code
your if statements appear to be looking for when the id is not equal to something, which would mean 2 lots of show/hide's would be getting triggered per tab change, these should be simplified to (ideally a switch statement) handle each tab's click event individually
you have a number of unclosed <div> tags, and a stray # in your class definition of your myTab element.
JSFIDDLE
JS
$(function() {
$('#jobs').hide();
$('#locations').hide();
$('#search_location').hide();
$('#myTab a').click(function(e) {
e.preventDefault();
if (($(this).attr('id') == 'pep')) {
$('#search_location').hide();
$('#search_value').show();
$('#people').show();
$('#jobs').hide();
$('#locations').hide();
}
if (($(this).attr('id') == 'job')) {
$('#search_location').hide();
$('#search_value').show();
$('#jobs').show();
$('#people').hide();
$('#locations').hide();
}
if (($(this).attr('id') == 'loca')) {
$('#search_location').show();
$('#search_value').hide();
$('#locations').show();
$('#jobs').hide();
$('#people').hide();
}
$(this).tab('show');
})
})
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
Updated this question, because my previous code made a conflict with bootstrap
Hi I'm trying to make a hover in each checkbox. What I now have is that the hover occurs in each checkbox. When I click around the checkbox then you see a dropdownlist. But when I click away from the dropdownlist. Then the caret arrow should go away, but unfortunately it doesn't. I have also recorded myself to show you more clearly what I actually want:
Updated the video also, because my updated code displays the checkbox differently in the browser
link: https://www.youtube.com/watch?v=i6-T9wjNZY8&feature=youtu.be
Here is the code that I currently have, which lives in index.blade.php :
#extends('user._layouts.user')
#section('content')
<style>
.dropdown .caret{
display:none;
}
.dropdown:hover .caret, .dropdown.opened .caret{
display:inline-block;
}
</style>
<script>
var resetSel = function(){
};
$(document).ready(function () {
$('dropdown').on('click', function (e) {
e.preventDefault();
$('.dropdown.opened').removeClass('opened');
});
$('.dropdown').click(function(e){
var $this = $(this);
$('.dropdown.opened').removeClass('opened');
if(!$this.hasClass('opened'))
$this.addClass('opened');
//alert($check.attr('checked'));
});
$('.check').click(function(e){
e.stopPropagation();
});
});
</script>
<script>
function toggle(source) {
checkboxes = document.getElementsByClassName('check');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
#include('user._layouts.template_search')
<h1>Offerte overzicht</h1>
{{--link_to_route('user.orders.create', 'Create new Order')--}}
#if (count($orders))
<ul>
<div class="row">
<div class="col-md-1">STATUS</div>
<div class="col-md-3">offerte naam</div>
<div class="col-md-3">klant</div>
<div class="col-md-1">bedrag</div>
<div class="col-md-1">old delete</div>
<div class="col-md-1">Check all
<br>
<div class="btn-group">
<div class="dropdown">
<button id="selDelete" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<input id="check1" type="checkbox" onClick="toggle(this)" class="check">
<span class="caret-hover"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">
<li>Delete</li>
</ul>
</div>
</div>
</div>
</div>
#foreach($orders as $order)
<div class="row">
<div class="col-md-1">
<li>
#if ($order->status=='not submitted')
<div class="statusRed"></div>
#elseif ($order->status=='pending')
<div class="statusOrange"></div>
#else
<div class="statusGreen"></div>
#endif
</li>
</div>
<div class="col-md-3">
<li>
{{--as a third parameter we need to pass in the orderId, because it needs to be fed to
our actual user.orders.edit route. --}}
{{link_to_route('user.orders.edit', $order->order_name, array($order->id))}}
</li>
</div>
<div class="col-md-3">
<li>
{{$order->client['companyName']}}
</li>
</div>
<div class="col-md-1">
<li>
€{{$order->price}}
</li>
</div>
<div class="col-md-1">
<li>
{{Form::open(array('route'=>array('user.orders.destroy',$order->id),
'method'=>'delete','class'=>'destroy'))}}
{{Form::submit('Delete', array('class' => 'btn btn-default'))}}
{{Form::close()}}
</li>
</div>
<div class="col-md-1">
<li>
<!--ik kan blade niet gebruiken, want hij laat me mijn checkbox altijd op checked staan.-->
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">
<input id="check1" name="checkbox[]" type="checkbox" class="check" >
<span class="caret-hover caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">
<li><a href= "{{ route('user.orders.destroy',array( $order->id )) }}" data-method="delete" >Deletey</a></li>
</ul>
</div>
</li>
</div>
</div>
#endforeach
</ul>
#endif
#stop
Gladly I'm waiting for your response. Anyway thanks for your answer.
You have used an id 'selDelete' around multiple items. Consider using a class:
class = selDelete
in place of any tags where you have put:
id = selDelete
And similarly, be sure to switch any references to:
#selDelete
into:
.selDelete
I believe that may solve your problem, check that before anything else, hope that helps :)
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.