Develop Reference

How to user .trigger() inside .dblclick() in jquery

I am trying to perform a trigger click of the button on the double click of the list element.
I have 2 elements. One is a button and the second is a UL list element.
Here is the HTML button and List code.
<button type="button" class="btn btn-primary" data-toggle="modal" id="show_comment_modal" data-target="#showCommentModal"> Show Comment </button>
<ul>
<li id="category_list_1">Coffee</li>
<li id="category_list_2">Tea</li>
<li id="category_list_3">Milk</li>
</ul>
Here is the Jquery code:
$( "#category_list_1" ).dblclick(function() {
$( "#show_comment_modal" ).trigger( "click" );
});
I did not get any error in console.
Did this even possible?

$('#show_comment_modal').click(function() {
alert('button click');
});
$('.category').dblclick(function() {
$('#show_comment_modal').click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary" id="show_comment_modal"> Show Comment </button>
<ul>
<li class="category" id="category_list_1">Coffee</li>
<li class="category" id="category_list_2">Tea</li>
<li class="category" id="category_list_3">Milk</li>
</ul>
Here you have a code snippet with an example

Jquery get only the selected item in Bootstrap

There are bit similar questions like this in which the answers are right. This question is regarding, to get only the selected item not the entire array.
<div class="btn-group">
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="change_regions">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
If I use something like below I get many attributes which I don't need.
$(".dropdown-menu li a").click(function() {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});

It work alright, updates text of .btn as expected:
$(".dropdown-menu li a").click(function() {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
https://jsfiddle.net/itsrikin/vseam36j/2/
In your example you dont need to use .val() though, .text() would give you right value.

How to hide a menu when an item is clicked or hide the menu when someone clicks away

So i want to hide my bootstrap menu on the event when an item is clicked. This is my menu code
<div class="container visible-xs" id="top">
<div class="header-bottom navbar-fixed-top">
<div class="top-nav">
<span class="menu"><img src="images/pic copy.png" alt="toggle"> BESSIT4REAL</span>
<ul id="ul">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Contact</li>
</ul>
</div>
<div class="social-icons">
<ul class="social">
<li><a href="#" ><i> </i> </a></li>
<li></i></li>
<li></i></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<br class="visible-xs">
</div>
and this is my javascript code
<script>
$("span.menu").click(function(){
$(".top-nav ul").slideToggle(500, function(){
$("#ul li a").click(function() {
$(".ul").hide();
});
});
$('')
});
</script>
Basically i need to hide the entire "<ul>" element when the <li> item is clicked,
Currently when someone click on home or about, the menu stays on the screen and does not disappear.

Use the following Jquery Code:
<script>
$(".top-nav li").click(function(){
$(".top-nav ul").slideToggle(500, function(){
$(this).hide();
});
});
</script>

you have an error.. your ul has an ID not a class, so you should us '#' in your jquery.
And to hide your ul you can use either hide() or fadeOut(0)..
$("#ul li a").click(function() {
$("#ul").fadeOut(0);
});
or
$("#ul li a").click(function() {
$(this).fadeOut(0);
});

$(".ul").hide();
references all elements with a class of "ul" You probably want (in your code example) the id referece
$("#ul").hide();
Or if you want all the <ul> elements then give them both the same class (like "hideableUL") then you could go like:
$(".hideableUL").hide();

I did this and it helped.
$("span.menu").click(function(){
$(".top-nav #ul").slideToggle(500, function(){
$("#ul li a").click(function() {
$(".top-nav #ul").hide();
});
});
$('')
});

How to show and hide div elements based on the selection of bootstrap dropdown in jQuery

I have the following example
http://jsfiddle.net/ahmedcom/5qu20yu6/
and it is working fine ,
now how can change
<select>
<option>orderby</option>
<option id="select1">__1</option>
<option id="select2">__2</option>
<option id="select3">__3</option>
</select>
to
<div class="dropdown">
<button type="button" class="catby btn btn-sm dropdown-toggle" data-toggle="dropdown">
<i class="ion-android-apps"></i>order by<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>__1</li>
<li>__2</li>
<li>__3</li>
</ul>
</div>
What are the modifications that will be in JavaScript ?

This is Actually What you want.I made slight modification in javascript.
DEMO: http://jsfiddle.net/5qu20yu6/8/
<div class="btn-group">
<a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">Select a Items <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Item- I</li>
<li>Item II</li>
<li>Item III</li>
</ul>
</div>
<p class="menu">Options:</p>
$(".dropdown-menu li a").click(function(){
var selText = $(this).attr('data-value');
$(this).parents('.btn-group').siblings('.menu').html(selText)
});

$('.dropdown-menu a').on('click', function(e){
e.preventDefault();
$('button.dropdown-toggle').html($(this).text() + ' <span class="caret"></span>');
$(".box").hide();
$('.'+$(this).attr('id')).show();
});

This can get you started.
$(document).ready(function(){
$('.dropdown-menu li a').click(function() {
var boxClass = '.'+$(this).attr("id");
$(".box").not(boxClass).hide();
$(boxClass).show();
})
});

The main modification here is we need to bind click event on '.dropdown-menu li'. Please check my link:
$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
var $target = $( event.currentTarget );
if($target.attr("id")=="select1"){
$(".box").not(".select1").hide();
$(".select1").show();
}
else if($target.attr("id")=="select2"){
$(".box").not(".select2").hide();
$(".select2").show();
}
else if($target.attr("id")=="select3"){
$(".box").not(".select3").hide();
$(".select3").show();
}
else{
$(".box").hide();
}
return true;
});
http://jsfiddle.net/3m6fbgbq/

Here is the JsFiddle Demo:
Description: At the of the code add this source file:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
And use this jQuery function, which will select the clicked anchor tag and then find the box div by equating the class name. And then show it.
$(document).ready(function(){
$(".dropdown-menu li a").on("click",function(){
var iddiv = $(this).attr("id") ;
$(".box").hide();
$("."+iddiv).show();
});
});

how to change text in a button without change other tags

how to change text in a button without change other tags ?
my button :
<button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
All Items
<span class="caret"></span>
</button>
my dropdown-menu :
<ul class="dropdown-menu">
<li><a id="AllItems" href="#">AllItems</a></li>
<li><a id="Countries" href="#">Countries</a></li>
<li><a id="Ships" href="#">Ships</a></li>
</ul>
I've tried the following But the span tag has been removed:
$('.dropdown-menu li a').click(function () {
var item = $(this).text();
$('button[id=ItemForSearch]').text(item);
});
I need to just change the text.But I have no idea!!

You need to replace only the first text node in the button, that is the problem here. When you use .text() or .html() it replaces the entire contents of the button.
Try
$('.dropdown-menu li a').click(function () {
$('#ItemForSearch').contents().eq(0).replaceWith($(this).text());
});
Demo: Fiddle