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>

Show a button if there is data in SQL and hide otherwise

I am new and practising. So, I am sure I am not doing this the best way possible.
I am trying to get the product data to show if there is data, but if there isn't any data, I want the button to be hidden. In the DB, only about 40% actually have product data.
foreach ($part->results as $index=>$row){
echo ' Add to Cart
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Info
</button>
<div class="dropdown-menu">
<a class="btn btn-info " href="./media/products/product_data/'.$row["product_data"].'" target="_blank"class="btn btn-info"> Details </a>
</div>'

Use CSS and classes to show / hide elements on the page.
In the css:
.hidden {
display: none;
}
Then you can echo this via php:
foreach ($part->results as $index=>$row){
$hidden = empty($row["product_data"]) ? ' hidden' : ''; //determine if hidden needs to be added or not
echo ' Add to Cart
<div class="btn-group">
<button type="button' . $hidden . '" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Info
</button>
<div class="dropdown-menu">
<a class="btn btn-info " href="./media/products/product_data/'.$row["product_data"].'" target="_blank"class="btn btn-info"> Details </a>
</div>'
...

You're probably looking for the empty() function. I cleaned your code a bit, but it would look something like this:
<?php foreach ($part->results as $index=>$row) : ?>
Add to Cart
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Info</button>
</div>
<?php if (!empty($row["product_data"])): ?>
<div class="dropdown-menu">
<a class="btn btn-info " href="./media/products/product_data/>
<?= $row["product_data"]; ?>" target="_blank"class="btn btn-info">Details</a>
</div>;
<?php endif; ?>
<?php endforeach; ?>
This would not output the <div class="dropdown-menu"> section for any that were missing product-data. You could move the if-condition somewhere else to omit other output.
If you want to skip the whole row, use continue in your existing code:
foreach ($part->results as $index=>$row){
// this will skip the loop whenever product-data is missing
if(empty($row["product_data"]))
continue;
echo ' Add to Cart
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Info
</button>
</div>
<div class="dropdown-menu">
<a class="btn btn-info " href="./media/products/product_data/'.$row["product_data"].'" target="_blank"class="btn btn-info"> Details </a>
</div>'
?>
If you still want output and then hide it with CSS, #JackofSpades has the right answer.

Get nearest element on button click

I have an html page something like this:
<div class="list-group-item" style="border-left: none; border-right: none;">
<img src="./img/desktop.png" height="25" width="25">
<a class="a-file">testcase.txt</a>
<button class="btn btn-default btn-sm btn-current" style="float: right;">
<span class="glyphicon glyphicon-ok-circle span-current"></span>
</button>
<button class="btn btn-default btn-sm btn-star" style="float: right;">
<span class="glyphicon glyphicon-star-empty span-star"></span>
</button>
</div>
I want to get the filename which is present in <a> when user clicks one of the button. I tried in doing like this but its not working:
$(document).on('click','.btn-current',function(){
var file = $('.btn-current').closest('.a-file').text();
alert(file);
});

.closest() only searches for the parent so you can go to the parent list-group-item and then you can find the child using .children(). It is better to use id to search in DOM as it is indexed and search is faster.
$(document).on('click', '.btn-current', function() {
var file = $('.btn-current').closest('.list-group-item').children('.a-file').text();
console.log(file);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item" style="border-left: none; border-right: none;">
<img src="./img/desktop.png" height="25" width="25">
<a class="a-file">testcase.txt</a>
<button class="btn btn-default btn-sm btn-current" style="float: right;"><span class="glyphicon glyphicon-ok-circle span-current">btn-current</span></button>
<button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>

closest is a bit of a misnomer; it finds the nearest direct ancestor that matches the given selector.
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
It looks like you want to select the previous element instead:
$(document).on('click', '.btn-current', function() {
var file = $('.btn-current')[0].previousElementSibling.textContent;
console.log(file);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item" style="border-left: none; border-right: none;">
<img src="./img/desktop.png" height="25" width="25">
<a class="a-file">testcase.txt</a>
<button class="btn btn-default btn-sm btn-current" style="float: right;"><span class="glyphicon glyphicon-ok-circle span-current">btn-current</span></button>
<button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>
Or if there might be other elements in between, then use .find:
$(document).on('click', '.btn-current', function() {
var file = $('.btn-current').parent().find('.a-file').text();
console.log(file);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item" style="border-left: none; border-right: none;">
<img src="./img/desktop.png" height="25" width="25">
<a class="a-file">testcase.txt</a>
<button class="btn btn-default btn-sm btn-current" style="float: right;"><span class="glyphicon glyphicon-ok-circle span-current">btn-current</span></button>
<button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>

You can find previous element with prev() function of jquery.
$(document).on('click','.btn-current',function(){
var file = $(this).prev('.a-file').text();
alert(file);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item" style="border-left: none; border-right: none;">
<img src="./img/desktop.png" height="25" width="25">
<a class="a-file">testcase.txt</a>
<button class="btn btn-default btn-sm btn-current" style="float: right;">
<span class="glyphicon glyphicon-ok-circle span-current"></span>Click</button>
<button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>

If you have multiple .btn-current, you need to use this as selector. You might want to use prev instead of closest if the element is the previous clicked elements.
$(document).on('click', '.btn-current', function() {
var file = $(this).prev('.a-file').text();
console.log(file);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="a-file">testcase1.txt</a>
<button class="btn btn-default btn-sm btn-current"><span class="glyphicon glyphicon-ok-circle span-current"></span> Btn 1</button>
<br />
<a class="a-file">testcase2.txt</a>
<button class="btn btn-default btn-sm btn-current"><span class="glyphicon glyphicon-ok-circle span-current"></span> Btn 2</button>
<button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>

You can also use siblings method to find all siblings of selected element. You can also use selector expression to find particular sibling e.g siblings('some selector expression').
$(document).on('click', '.btn-current', function() {
var file = $('.btn-current').siblings('.a-file').text();
console.log(file);
});

$(document).on('click', '.btn-current', function() {
var file = $('.btn-current').siblings('.a-file').text();
alert(file);
});

Angular UI Tree: remove callback not firing

I'm using https://github.com/angular-ui-tree/angular-ui-tree module.
I have api that sending me array of slides, which are array of groups, which are array of graphs. So I want to draw it as a tree and add node remove confirmation and api call on removed. I wrote this code to test callbacks
var app = angular.module("app", ['ui.tree']);
app.controller("DashboardCtrl", function ($scope, $http, $timeout) {
$scope.loadData = function() {
$http.get('http://127.0.0.1:5000/list')
.then(function successCallback(data) {
$scope.data = data.data;
}, function errorCallback(response) {
});
}
$scope.remove = function (node) {
console.log("remove " + node);
};
$scope.removeNode = function (node) {
console.log("removeNode " + node);
};
$scope.removed = function (node) {
console.log("removed " + node);
};
$scope.edit = function (node) {
console.log("edit " + node);
};
$scope.newSubItem = function(node) {
console.log(node)
};
$scope.loadData();
}
)
Here is my html code:
<body ng-controller="DashboardCtrl">
<div class="container">
<div ui-tree class="angular-ui-tree" data-drag-enabled="false" data-empty-placeholder-enabled="false">
<ol ui-tree-nodes="treeNodesOptions" ng-model="data" class="ng-pristine ng-untouched ng-valid angular-ui-tree-nodes">
<li ng-repeat="slide in data" ui-tree-node class="angular-ui-tree-node" collapsed="true">
<div ui-tree-handle class="tree-node tree-node-content">
<a class="btn btn-success btn-xs" ng-if="slide.groups && slide.groups.length > 0" data-nodrag ng-click="toggle(this)">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed }"></span>
</a>
{{slide.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeNode(this)">
<span class="glyphicon glyphicon-remove"></span>
</a>
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="edit(this)">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<ol ui-tree-nodes="" ng-model="slide.groups" ng-class="{hidden: collapsed}">
<li ng-repeat="group in slide.groups" ui-tree-node collapsed="true">
<div ui-tree-handle class="tree-node tree-node-content">
<a class="btn btn-success btn-xs" ng-if="slide.groups && slide.groups.length > 0" data-nodrag ng-click="toggle(this)">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed }"></span>
</a>
{{group.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeNode(this)">
<span class="glyphicon glyphicon-remove"></span>
</a>
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="edit(this)">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<ol ui-tree-nodes="" ng-model="group.items" ng-class="{hidden: collapsed}">
<li ng-repeat="item in group.items" ui-tree-node collapsed="true">
<div ui-tree-handle class="tree-node tree-node-content">
{{item.title}}
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeNode(this)">
<span class="glyphicon glyphicon-remove"></span>
</a>
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="edit(this)">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</div>
</ol>
</li>
</ol>
</li>
</ol>
</div>
</div>
</body>
$scope.newSubItem firing with no problem, but any of remove functions not firing. Also I tried to write remove(this) instead of removeNode(this) in html. Nodes are removing fine in both cases but functions not calling.

#Abhishek Verma
try to modify:
$scope.removeNode = function (node) {
console.log("removeNode " + node);
};
to:
$scope.removeNode = function (scope) {
scope.remove();
};
The function is not firing because you're not calling it, the function parameter is actually the node scope so you can access the remove function from there.
And you should not use:
ui-tree-nodes="treeNodesOptions"
but:
ui-tree-nodes=""
because you are not defining $scope.treeNodesOptions
cf. Angular UI Tree collapse / remove

In this case I think you just need to put the href attribute in # to your link. It was useful to me once:

i want to change text of first div id="Comment_1" using jquery?

<div id="Comment_1" class="panel-body">Back when I was in high school
<div>Ajay(725) <span class="sl-date">7/28/2016 2:48:37 PM</span>
</div>
<div class="panel-footer">
<a class="btnDisapproveComment btn btn-outline m-r-10 btn-danger" action="Disapprove" iid="1" href="javascript:void(0)">Disapprove</a>
<a class="btnEditComment btn btn-outline m-r-10 btn-warning" iid="1" href="javascript:void(0)">Edit</a>
<a class="btnFlagComment btn btn-outline m-r-10 btn-default " iid="1" href="javascript:void(0)">Flag it</a>
<a class="btnAllActionComment btn btn-outline m-r-10 btn-info" action="Feature" iid="1" href="javascript:void(0)">Feature it</a>
</div>
</div>

Use NodechildNodes property which will return all the child nodes including TextNodes
var elem = document.getElementById('Comment_1');
elem.childNodes[0].textContent = "Your Text"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Comment_1" class="panel-body">Back when I was in high school
<div>Ajay(725) <span class="sl-date">7/28/2016 2:48:37 PM</span>
</div>
<div class="panel-footer">
<a class="btnDisapproveComment btn btn-outline m-r-10 btn-danger" action="Disapprove" iid="1" href="javascript:void(0)">Disapprove</a>
<a class="btnEditComment btn btn-outline m-r-10 btn-warning" iid="1" href="javascript:void(0)">Edit</a>
<a class="btnFlagComment btn btn-outline m-r-10 btn-default " iid="1" href="javascript:void(0)">Flag it</a>
<a class="btnAllActionComment btn btn-outline m-r-10 btn-info" action="Feature" iid="1" href="javascript:void(0)">Feature it</a>
</div>
</div>

You can do the following if you want to change the text in that div
$('#Comment_1').text('I am to lazy to search the www for a simple tutorial on appending a text to a div');

I assumed you want to change "Back when I was in high school" only.
If so add span for the same, like., <span class="span-text-to-replace">Back when I was in high school</span>
Then,
$(".span-text-to-replace").text("My new text");
In case you don't want to add any span/div, you could do this,
document.getElementById("Comment_1").childNodes[0].textContent = "My new text"
The above line changes the content.
Hope I answered your question!