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

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

Related

Jquery doesn't react to Jquery created text

What I'm trying to do is add elements to a list at the press of a button, but then be able to delete any item, again, at the press of a button. Here is a minimal working example of what I mean:
$('.delete-item').click(function() {
$(this).parent().text("DELETED")
})
$('button').click(function() {
$('ul').append(`<li>Appended item <a class="delete-item" href="#">Delete item</a></li>`)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>List item 1 <a class="delete-item" href="#">Delete item</a></li>
<li>List item 2 <a class="delete-item" href="#">Delete item</a></li>
</ul>
<button type="button">Add item</button>
Here, you can add items to the unordered list and "delete" already existing items, now, what happens is that you can delete the premade items just fine, but if you try to delete an appended item, for whatever reason, you simply can't. How is this fixed? Thanks!
$('.delete-item').click(...) attaches the event listener to existing items only. Use event delegation like so:
$("ul").on("click", ".delete-item", function() {
$(this).parent().text("DELETED")
});
With event delegation you attach the event listener to an ancestor that already exists in the DOM (here the <ul> element) and watch for the event on the descendants whether they already exist or added dynamically.
Demo:
$("ul").on("click", ".delete-item", function() {
$(this).parent().text("DELETED")
});
$("button").click(function() {
$("ul").append(`<li>Appended item <a class="delete-item" href="#">Delete item</a></li>`)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>List item 1 <a class="delete-item" href="#">Delete item</a></li>
<li>List item 2 <a class="delete-item" href="#">Delete item</a></li>
</ul>
<button type="button">Add item</button>

How can i click this button and li with CasperJS

I want to click this button and choose what i want the date selection.
My Document:
<div class="input-group-btn open">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">選取
<span class="caret"></span>
</button>
<ul id="mnuShowingDate" class="dropdown-menu pull-right">
<li>2017/07/29 (週六)</li>
<li>2017/07/30 (週日)
</li><li>2017/07/31 (週一)</li>
<li>2017/08/01 (週二)</li>
<li>2017/08/02 (週三)</li>
<li>2017/08/03 (週四)
</li>
</ul>
</div>
I only know use the click function like this:
casper.then(function () {
this.click('button.btn.btn-danger.dropdown-toggle');
});
It works , but i want to click the second li which is 2017/07/30 now.
How can i select it ? Any ideas? Thanks in advance.

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')...

Get selected item value from Bootstrap DropDown with specific ID

I am "creating" my own "ComboBox" using Bootstrap 3 and JavaScript. Here is the JSFiddle for what I have so far:
HTML:
<div class="input-group">
<input type="TextBox" ID="datebox" Class="form-control"></input>
<div class="input-group-btn">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
JavaScript:
$(document).on('click', '.dropdown-menu li a', function() {
$('#datebox').val($(this).html());
});
This approach works great untill I want to repeat this "ComboBox" several times on the page. The issue is with the JQuery function looking for ANY/ALL '.dropdown-menu li a'.
How can I change my JQuery to look only for UL with ID demolist and get its selected value?
I have tried the following without success:
I tried '#demolist .dropdown-menu li a' but that will not fire the function:
$(document).on('click', '#demolist .dropdown-menu li a', function() {
$('#datebox').val($(this).html());
});
I tried calling the Click of #demolist but #datebox gets the HTML of ALL list item of #demolist and not the selected innerHTML of item:
$('#demolist').on('click', function(){
$('#datebox').val($(this).html());
});
UPDATE:
The working solutions are:
$('#demolist li a').on('click', function(){
$('#datebox').val($(this).html());
});
OR
$('#demolist li').on('click', function(){
$('#datebox').val($(this).text());
});
$('#demolist li').on('click', function(){
$('#datebox').val($(this).text());
});
http://jsfiddle.net/kcpma/18/
Design code using Bootstrap
<div class="dropdown-menu" id="demolist">
<a class="dropdown-item" h ref="#">Cricket</a>
<a class="dropdown-item" href="#">UFC</a>
<a class="dropdown-item" href="#">Football</a>
<a class="dropdown-item" href="#">Basketball</a>
</div>
jquery Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demolist a').on('click', function () {
var txt= ($(this).text());
alert("Your Favourite Sports is "+txt);
});
});
</script>
The selector would be #demolist.dropdown-menu li a note no space between id and class.
However i would suggest a more generic approach:
<div class="input-group">
<input type="TextBox" Class="form-control datebox"></input>
<div class="input-group-btn">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
$(document).on('click', '.dropdown-menu li a', function() {
$(this).parent().parent().parent().find('.datebox').val($(this).html());
});
by using a class rather than id, and using parent().find(), you can have as many of these on a page as you like, with no duplicated js
Did you just try
$('#datebox li a').on('click', function(){
//$('#datebox').val($(this).text());
alert($(this).text());
});
It works for me :)
You might want to modify your jQuery code a bit to '#demolist li a' so it specifically selects the text that is in the link rather than the text that is in the li element. That would allow you to have a sub-menu without causing issues. Also since your are specifically selecting the a tag you can access it with $(this).text();.
$('#datebox li a').on('click', function(){
//$('#datebox').val($(this).text());
alert($(this).text());
});
Works GReat.
Category Question
Apple
Banana
Cherry
<input type="text" name="cat_q" id="cat_q">
$(document).ready(function(){
$("#btn_cat div a").click(function(){
alert($(this).text());
});
});
Try this code
<input type="TextBox" ID="yearBox" border="0" disabled>
$('#yearSelected li').on('click', function(){
$('#yearBox').val($(this).text());
});
<i class="fas fa-calendar-alt"></i> <span>Academic Years</span> <i class="fas fa-chevron-down"></i>
<ul class="dropdown-menu">
<li>
<ul class="menu" id="yearSelected">
<li>2014-2015</li>
<li>2015-2016</li>
<li>2016-2017</li>
<li>2017-2018</li>
</ul>
</li>
</ul>
its work for me

Categories

Resources