Develop Reference

dropdown is working in desktop but not in mobile

Dropdown element is working fine on desktop view but not on mobile view. Click and hover events are not working. What should I do, so them will work on mobile view. I am a new learner stuck with this problem, I tried to google it but couldn't find any solution.
<div class='dropdown-table'>
<button class='dropbtn dottedOpenOrders'>︙</button>
<div class='dropdown-content'>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-default btn-edit-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/edit-dropdown.png" /> </span><span>Edit</span></a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-danger btn-close-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/cancel-dropdown.png" /> </span> <span>Cancel </span> </a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-default btn-play-pause-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/pause-dropdown.png" /> </span> <span>Pause/Resume </span> </a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-warning btn-exit-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/exit-dropdown.png" /> </span> <span>Force exit </span> </a>
</div>
</div>

How can you trigger an even when clicking on a bootstrap button without an id?

For a javascript project, I need to be able to interact with three bootstrap buttons.
The code for the buttons goes as follows:
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
I am not allowed to modify this line, so simply adding an id to the button is out of the question.
That being said, how can I add an click listener to these buttons and interact with them?
Thank you for your time.

You can use querySelector, see example below:
var button1 = document.querySelector('[data-id="0"]')
var button2 = document.querySelector('[data-id="1"]')
var button3 = document.querySelector('[data-id="2"]')
button1.addEventListener("click", () => {
console.log("button1");
});
button2.addEventListener("click", () => {
console.log("button2");
});
button3.addEventListener("click", () => {
console.log("button3");
});
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>

They already seem to have ids that you can query for using querySelector along with attribute selectors.
document.querySelector("a[data-id='0']").addEventListener("click", () => {
console.log("You clicked data id 0");
});
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>

Try to use the classname:
var elements = document.getElementsByClassName("btn");
var myFunction = function() {
console.log("Button with data-id", this.getAttribute("data-id"), "clicked");
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunction, false);
}
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>

Simply use data-id as selector.
see example
let elem = document.querySelector('[data-id="0"]');
console.log(elem)
elem.click();
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>

how to set color to button group by focus on one of buttons [duplicate]

This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
I have one button group with 5 button, I need to set color to button group with focus on one of theme, for example if I hover on third button I need change first there will be change color, I try to do it with this button group code :
<div class="btn-group">
<button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i></button>
</div>

I am not really sure what you are asking for, but I have prepared a simple snippet showing you pretty much everything you need so that you can modify it to your needs.
$(document).ready(function(){
$(".btn",".btn-group").hover(function(){
let current_button_index = $(this).index();
$(".btn",".btn-group").removeAttr("style");
$(".btn:not(:eq("+current_button_index+"))", ".btn-group").css("background-color","red");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group">
<button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
<button type="button" class="btn btn-default"><i class="far fa-star"></i>X</button>
</div>

How to get data-id attribute value in Jquery?

HTML CODE
<tbody>
<tr>
<td>0</td>
<td>204093D-P12</td>
<td>80443</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>1</td>
<td>216619D-P18</td>
<td>16009</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>2</td>
<td>21663P0012</td>
<td>13116</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>3</td>
<td>217496D-P078</td>
<td>16032</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr>
</tbody>
And i have to tried to get data-id attribute value from using Jquery in following way
function ShowModal(){
alert($(this).attr("data-id"));
}
but return undefinedhow to get data-id value from jquery? and i have an another doubt data-id value can hold numeric value or string value?

You need to pass the current element context in inline click handler like
<button onClick="ShowModal(this)" data-id="217496D-P078"></button>
Then use the passed element reference to get the data-id. You can also use HTMLElement.dataset property like elem.dataset.id
function ShowModal(elem){
var dataId = $(elem).data("id");
alert(dataId);
}
Additionally, I would recommend you use jquery to bind event handler's instead of ugly inline click handler.

One of the important part of jquery is manipulate the DOM.
DOM = Document Object Model : Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
It has several DOM Manipulation :
Get Content : text(), html(), and val()
Get Attributes : attr()
Now if u have to access a particular attribute on click of button or something else then use this :
so here is my HTML
<p>google.com</p>
<button>Click Here</button>
then u have to access the attributes of anchor tag like this:
$("button").click(function(){
alert($("#test").attr("href")); // output : http://www.google.com
alert($("#test").attr("data-id")); // output : id_12345
});

$(function () {
$(".inputs").click(function (e) {
alert($(this).attr("data-id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn btn-xs btn-flat inputs" value="click" type="button" data-toggle="modal" data-id="217496D-P078" data-target="#myModal"/>

You can use Javascript's dataset or JQuqery data method:
$(document).ready(function() {
$('button').on('click', function() {
console.log(this.dataset.id, $(this).data().id, $(this).data('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
<tr>
<td>
<button type="button" data-id="1">btn #1</button>
<button type="button" data-id="2">btn #2</button>
<br>
</td>
</tr>
<tr>
<td>
<button type="button" data-id="3">btn #1</button>
<button type="button" data-id="4">btn #2</button>
<br>
</td>
</tr>
<tr>
<td>
<button type="button" data-id="5">btn #1</button>
<button type="button" data-id="6">btn# 2</button>
<br>
</td>
</tr>
<tr>
<td>
<button type="button" data-id="7">btn #1</button>
<button type="button" data-id="8">btn #2</button>
<br>
</td>
</tr>
</tbody>

Your code is correct, all need to do is pass this to your function like:
<button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal" type="button" title="Add" onClick="ShowModal(this)"><i class="fa fa-plus" aria-hidden="true"></i></button>

You have to create unique data-id in your code data-id not unique.
data-id="217496D-P078" data-target="#myModal" type="button" title="Add"
data-id="217496D-P078" data-target="#myModal_edit" type="button" title="
data-id="217496D-P078" data-target="#myModal_details" type="button" titl
then
Try this
<button onClick="ShowModal(this)" data-id="217496D-P078"></button>
function ShowModal(elem){
var dataId = $(elem).data("id");
alert(dataId);
}

How to avoid that modal window change CSS on site

As it is usually on any admin page I have 3 buttons next to each other. One for detail, one for edit and one for delete, it looks like:
<a n:href="detail $candidate->id">
<button type="button" class="btn btn-success btn-sm">
<i class="glyphicon glyphicon-search" style="margin-right:0px"></i>
</button>
</a>
<a href="#">
<button type="button" class="btn btn-info btn-sm">
<i class="glyphicon glyphicon-pencil" style="margin-right:0px"></i>
</button>
</a>
<a n:href="delete! $candidate->id">
<button type="button" class="btn btn-danger btn-sm">
<i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
</button>
</a>
After that I decide I need to add "Confirm modal" when user press "DELETE" to avoid missclicks
<a
data-nette-confirm="modal"
data-nette-confirm-title="Confirm"
data-nette-confirm-text="Are you sure you want to delete?"
data-nette-confirm-ok-class="btn-danger"
data-nette-confirm-ok-text="Yes"
data-nette-confirm-cancel-class="btn-success"
data-nette-confirm-cancel-text="No"
class="btn btn-danger"
data-ajax="off" // or class="ajax"
n:href="delete! $candidate->id">
<button type="button" class="btn btn-danger btn-xs">
<i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
</button>
</a>
After this I just get my DELETE button twice that BIG as others, I try to just make it xs but still so much bigger. Is there a way how can I avoid this change?

Try removing:
// or class="ajax"
It overwrites previously defined class="btn btn-danger".