I have this bootstrap dropdown for set delete/publish/unpublish data in action form:
<div class="col-sm-7">
<ul class="list-unstyled topControl">
<li id="bulkAction">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-action="3">Delete
</li>
<li data-action="1">Publish
</li>
<li data-action="0">Unpublish
</li>
</ul>
</div>
</li>
</ul>
</div>
in form I have this html:
<tr>
<td>
<input type="checkbox" name="id[]" class="itemCheckBox" value="6" />
</td>
<td>2323</td>
<td>Project</td>
<td>09-19-2014</td>
<td> Published
</td>
<td> <a class="btn btn-info btn-xs" href="" title="Edit post"><i class="icon-edit"></i></a>
<a class="btn btn-danger btn-xs confirmationDelete" href="" title="Delete post"><i class="icon-trash"></i></a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="id[]" class="itemCheckBox" value="5" />
</td>
<td>2323</td>
<td>Project</td>
<td>09-19-2014</td>
<td> Published
</td>
<td> <a class="btn btn-info btn-xs" href="" title="Edit post"><i class="icon-edit"></i></a>
<a class="btn btn-danger btn-xs confirmationDelete" href="" title="Delete post"><i class="icon-trash"></i></a>
</td>
</tr>
now I need to choose article in checkbox(one rows or multiple rows) than when click in dropdown menu (example delete) my form handle this and delete rows from database using PHP like this:
if ($_POST['action'] == "delete")
{
$selected = $_POST['id'];
if (count($_POST['id']) !== 0)
{
foreach($selected as $uid)
{
SQL::DELETE("DELETE FROM " . NEWS_ARTICLES . " WHERE id = ?", $uid);
}
echo "<div class=\"success\">" . $langmsg['editnews'][17] . "</div>";
}
}
how do can I create this?!
You can add another field in the label li for example data-selected="false"
and when you clicked on the li change the status data-selected="true".
Then for retrieving the fields $('li[data-selected=true]'), and for get the values apply a each inside $('li[data-selected=true]').
Related
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>
A part of source code on a specific site looks like this:
.
.
.
<div class="list-group-item">
<strong>item 1</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove"
data-id="5e98a2dc5e0aye57597b181b">
Unsubscribe
</a>
</div>
<div class="list-group-item">
<strong>item 2</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove"
data-id="5e58ac128edaey3f2935d94b">
Unsubscribe
</a>
</div>
.
.
.
How do I grab each data-id value?
I tried
$('.list-group-item').each(function(){
var text = ($(this).text());
console.log(text);
});
But it returns item 1(2), description and Unsubscribe text.
I also tried
$('.btn btn-default btn-xs pull-right listing-sub-remove').each(function(){
var text2 = ($(this).text());
console.log(text2);
});
But this doesn't work at all.
What command should I use to grab data-id values successfully?
You could do it like this:
$(document).ready(function() {
$(".btn.btn-default.btn-xs.pull-right.listing-sub-remove").each(function() {
console.log($(this).data("id"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group-item">
<strong>item 1</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e98a2dc5e0aye57597b181b">
Unsubscribe
</a>
</div>
<div class="list-group-item">
<strong>item 2</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e58ac128edaey3f2935d94b">
Unsubscribe
</a>
</div>
Is this what you're looking for?
// We gather ALL elements with '.list-group-item' class
var elements = $(".list-group-item");
// We iterate over each element in the array of elements
$.each(elements, function(index, element) {
// We create a variable that takes the child link anchor [a tag], and grabs the data-id attribute from it
var dataId = $(element).find("a")[0].dataset.id;
// If the variable is not undefined, it will console log the result
if (dataId) { console.log(dataId); };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group-item">
<strong>item 1</strong> description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e98a2dc5e0aye57597b181b">
Unsubscribe
</a>
</div>
<div class="list-group-item">
<strong>item 2</strong> description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e58ac128edaey3f2935d94b">
Unsubscribe
</a>
</div>
.
How can I use ng-model inside ng-repeat loop in AngularJS ?
Database is mySQL and also I am doing this because I want to edit on same row where data display.
I think this detail is ok to understand
<tbody ng-repeat="x in names">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" name="x.fname" ng-model="x.fname_m" value="{{x.fname}}" disabled /> </div>
</div>
</td>
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" value="{{x.email}}" disabled /> </div>
</div>
</td>
<td>
<button class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#followUps1"><i class="fa fa-calendar"></i> </button>
<a class="btn btn-xs btn-warning btn-collapse" data-toggle="collapse" data-target="#oppTasks1"> <i class="fa fa-star"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewDetail1"> <i class="fa fa-eye"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewComment1"> <i class="fa fa-comments"></i> </a>
<button ng-click="updateData(x.id, x.fname, x.lname, x.email, x.phone, x.country, x.skype_id, x.lead_source, x.lead_status, x.lead_priority)" class="btn btn-edit btn-primary btn-xs"><i class="fa fa-pencil"></i>
</button>
<button class="btn btn-update btn-success btn-xs"><i class="fa fa-floppy-o"></i>
</button>
</td>
</tr>
</tbody>
I would suggest this:
<tbody ng-repeat="x in names track by $index">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control"
name="x.fname" ng-model="x.fname_m[$index]"
value="{{x.fname}}" disabled /> </div>
</div>
</td>
//... rest of your code
Use the 'track by $index' on your repeat, and then you access the model via model[$index]. I would probably suggest, if you don't have a populated model, to also set the model to null at the start of your controller:
$onInit() {
this.fname_m = {};
}
<div ng-repeat="item in items">
<input ng-model="item.valueobject">
</div>
or binds
<div ng-repeat="item in items">
{{ item.valueobjects }}
</div>
I want to delete the criteria list item on clicking the delete button. Right now only the filter is getting refreshed. The tables are not being deleted. Suggestions to get through this.
HTML
<ul class="list-unstyled">
<li style="display: inline-block" ng-repeat="crtia in newCriteria" >
<table>
<tr>
<td>
<select class="input-sm" ng-model="crtia.name" ng-options="searchopt for searchopt in searchcriteria " ng-click="searchy.check()"></select>
</td>
<td>
<input class="input-sm " ng-model="crtia.value" placeholder="{{crtia.name}}" ng-change="newList()" ng-click="searchy.check()" />
</td>
<td>
<button type="button" class="btn btn-danger btn-xs" aria-label="Left Align" ng-click="removeCriteria($index)">
<span class="glyphicon glyphicon-remove" aria-hidden="true" ></span>
</button>
</td>
</tr>
</table>
</li>
</ul>
JS
$scope.removeCriteria=function($index){
$scope.searchy.check();
alert($index);
$scope.newCriteria.splice($index,1);
$scope.newList(); //Refreshes the filter
}
Try this
HTML
<button type="button" class="btn btn-danger btn-xs" aria-label="Left Align" data-ng-click="removeCriteria(crtia)">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
JS:
$scope.removeCriteria = function (sourceToRemove) {
$scope.searchy.check();
var index = $scope.newCriteria.indexOf(sourceToRemove);
$scope.newCriteria.splice(index, 1);
$scope.newList(); //Refreshes the filter
}
Update Plunker
I created a custom template for the AngularStrap Select directive but I am unable to type inside of the textbox that I have added to the template for some reason. I would like to use this textbox to filter the list items.
Custom HTML Template (/dist/select.html)
The only thing that I added here from the default template was another <li> element that includes the textbox. Said another way, I basically copy & pasted the default template and added the <li> and <input> elements.
<ul tabindex="-1" class="select dropdown-menu" ng-show="$isVisible()" role="select">
<li>
<input type="text" class="form-control input-sm" ng-model="iconFilter" />
</li>
<li ng-if="$showAllNoneButtons">
<div class="btn-group" style="margin-bottom: 5px; margin-left: 5px">
<button class="btn btn-default btn-xs" ng-click="$selectAll()">All</button>
<button class="btn btn-default btn-xs" ng-click="$selectNone()">None</button>
</div>
</li>
<li role="presentation" ng-repeat="match in $matches" ng-class="{active: $isActive($index)}">
<a style="cursor: default;" role="menuitem" tabindex="-1" ng-click="$select($index, $event)">
<i class="{{$iconCheckmark}} pull-right" ng-if="$isMultiple && $isActive($index)"></i>
<span ng-bind="match.label"></span>
</a>
</li>
</ul>
HTML
This is the actual HTML that includes the call to the bs-select directive.
<button ng-if="path() === '/contacts/people'"
type="button"
class="btn btn-default btn-sm"
ng-model="selectedIcon"
data-html="1"
data-multiple="1"
data-template="/dist/select.html"
ng-options="icon.value as icon.label for icon in getIcons()"
bs-select>
Action <span class="caret"></span>
</button>