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

Get selected text from bootstrap dropdown

I have a bootstrap dropdown, and I want to keep the text of what is selected. I have tried most of the ways tried here, Get Value From html drop down menu in jquery , but there was never really an answer given, so I am still stuck.
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Table
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li>Att1</li>
<li>Att2</li>
<li>Att3</li>
</ul>
</div>
I have a js function that looks as follows
$("#tableMenu").click(function(){
var selText = $("#tableMenu").text();
document.getElementById("tableButton").innerHTML=selText;
});
but as explained in the above link, $("#tableMenu").text(); returns everything in the dropdown as a string, not just the one wanted. How do I get the text just from the one selected.

You need to attach the click() handler to the a element within the ul that gets toggled. You can then retrieve the text() of that element and set it to the related button. Try this:
$("#tableMenu a").on('click', function(e) {
e.preventDefault(); // cancel the link behaviour
var selText = $(this).text();
$("#tableButton").text(selText);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableDiv" class="dropdown">
<button id="tableButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Table
<span class="caret"></span>
</button>
<ul id="tableMenu" class="dropdown-menu">
<li>Att1</li>
<li>Att2</li>
<li>Att3</li>
</ul>
</div>

Have you tried using an actual HTML drop down box and not an unordered list?
<select name="tableMenu" id="tableMenu" class="dropdown-menu">
<option value="Att1">Att1</option>
<option value="Att2">Att2</option>
<option value="Att3">Att3</option>
</select>
You should then be able to use:
var selText= document.getElementById("tableMenu").value;

Bind the click event to li and using this get the selected text and assign to the tab button text
$("#tableMenu li").click(function () {
var selText = $(this).text();
document.getElementById("tableButton").innerHTML = selText; // $("#tableButton").text(selText); //Using Jquery
});

Here's a vanillaJS way:
Given the following bootstrap 4 dropdown snippet:
<div class="dropdown-menu" id="select-color-dropdown" aria-labelledby="select-color">
<a class="dropdown-item" href="#">Red</a>
<a class="dropdown-item" href="#">Orange</a>
<a class="dropdown-item" href="#">Green</a>
<a class="dropdown-item" href="#">Gray</a>
</div>
One could write an event listener:
/* find web elements */
const colorSelectors = document.querySelector("#select-color-dropdown");
/* define event listeners */
const loadEventListeners = () => {
colorSelectors.addEventListener("click", (e) => {
e.preventDefault();
console.log(e.target.innerText);
});
}
/* Load all event listeners */
loadEventListeners();
which would print the selected option on every select (Red, Green...)

Bootstrap dropdown on hover not working, what am I doing wrong?

I am trying to open a dropdown on hover in Bootstrap but somehow it's not working. I suspect that my jQuery code is wrong but I can't figure out what?
Here is my HTML:
<a href="#" id="dropdown-filter" data-target="#" data-toggle="dropdown">
<button type="button" class="btn btn-primary">Filters</button>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<div class="results-filter">
Content goes here
</div>
</li>
</ul>
and my jQuery:
jQuery('#dropdown-filter').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut();
});
It works when I click on top, but not when I hover.

jQuery(this).find('.dropdown-menu') won't work here as .dropdown-menu is not a child of <a>-#dropdown-filter.
.find() searches for children.
Use jQuery(this).next('.dropdown-menu')...

how to get id of next element jquery?

here the html code, and i want to get the id of next element from clicked element a with class coba or to get id of element table class coba2.
<div class="dropdown">
<label>Kategori</label>
<button class="btn btn-default dropdown-toggle" type="button" id="jenis_kues" data-toggle="dropdown">Tambah Pertanyaan
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="jenis_kues">
<li role="presentation">
<a class="coba" id="teks" role="menuitem" tabindex="-1" href="#" onclick="tambah_kues_teks()">Teks</a>
</li>
</ul>
</div>
<table class="coba2" id="kues_teks-'+i+'">
</table></div>
and i've tried using this script
var a = $('.coba').next('.coba2'); alert(a.attr('id'));
but it show me undefined, anyone know how?

You need to travel up the DOM tree, until you are on the same level as .coba2:
var id = $('.coba').closest('.dropdown').next('.coba2').attr('id');
alert( id );

you should use
var a = $('.coba').parents('.dropdown').next('.coba2'); alert(a.attr('id'));

Update dropdown button text (without destroying <span>)?

Been working with this dropdown:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
company
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>google</li>
<li>apple</li>
<li>microsoft</li>
<li>facebook</li>
<li>adobe</li>
<li class="divider"></li>
<li>other</li>
</ul>
</div>
When someone clicks one of the options, I want to update the "company" text to the selected option. I was able to do this using $('#company').text('update goes here'); however using this destroys the placed next to the dropdown text. Any guidance on this one? Thanks!

Just wrap your text in a span :
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span id="cie">company</span>
<span class="caret"></span>
</button>
Then update the text of the span:
$('#cie').html('your text');

you should .append the value and not .text like this:
$('#company').append(new value);
or you can append it to the span
$('#company span').append(new value);

Add this to your JavaScript code:
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
See this fiddle.

If you are using jquery, you should be able to use the .html() to assign the value of the text of the button.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span id="company-name">company</span><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>google</li>
<li>apple</li>
<li>microsoft</li>
<li>facebook</li>
<li>adobe</li>
<li class="divider"></li>
<li>other</li>
</ul>
</div>
Added an ID to the button, and then reference it using jquery:
$("#company-name").html("company-name-here");
with company name selected as the parameter.

In case you cannot wrap the text with an element,
Demo
function getChildText(node) {
var text = "";
for (var child = node.firstChild; !! child; child = child.nextSibling) {
if (child.nodeType === 3) {
text += child.nodeValue;
}
}
return text;
}
$(".btn-primary").click(function () {
$(this).html($(this).html().replace(getChildText(this).trim(), "New Value"));
});