I have a table containing next & previous pages. I am able to navigate to next/previous pages using next & previous buttons.
On previous & next page actions on call(controller methods) I am pushing checked ticket ids by pushing in an array $scope.checkedTicketIds
angular.forEach($scope.tickets, function(ticket) {
if(ticket.checked) {
$scope.checkedTicketIds.push(ticket.id);
}
});
HTML code is
<div class="mail-tools tooltip-demo m-t-md">
<div class="btn-group pull-right">
<button ng-click="previousPage()" ng-disabled="previousPageBtnDisabled()" class="btn btn-white btn-sm"><i class="fa fa-arrow-left"></i></button>
<button ng-click="nextPage()" ng-disabled="nextPageBtnDisabled()" class="btn btn-white btn-sm"><i class="fa fa-arrow-right"></i></button>
</div>
<div class="input-group">
<div class="input-group-btn" dropdown>
<button ng-disabled="ticketsChecked()" class="btn btn-white dropdown-toggle pull-left" dropdown-toggle type="button">{{'ACTIONS' | translate}} <span class="caret"></span></button>
<ul class="dropdown-menu pull-left">
<li ng-repeat="(key, value) in actions"><a ng-click="convertAction(key)">{{key | translate}}</a></li>
</ul>
</div>
</div>
</div>
In controller on clicking previous page button calling method
$scope.previousPage = function() {
angular.forEach($scope.tickets, function(ticket) {
if(ticket.checked) {
$scope.checkedTicketIds.push(ticket.id);
}
});
$scope.ticketsUpdatedQueryCriteria.page = --$scope.page;
Tickets.query($scope.ticketsUpdatedQueryCriteria).then(function(tickets) {
$scope.tickets = tickets.data;
$scope.ticketsPageData = tickets.cursor;
});
};
How to pop/remove id on uncheck & I wanted to maintain checked ticket ids for further bulk actions, like change status of one/more tickets. How can I do this?
I implement an example on jsbin, using an independent checked list.
Please, look at:
http://jsbin.com/rudifa/3/
Hope I help you.
Related
good morning:
<html>
<button type="button" class="btn btn-primary">Notifications <span class="badge badge-light">4</span>
</button>
<button type="button" class="btn btn-primary">Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>
</html>
now how I implement these ?
for example like facebook when i click the notification appear a little submenu
anyone can help me ?
thanks
You can get the notifications from the database in your controller, put them in a variable, and pass it to a view.
In the view itself you can do something like this:
// $notificationsCount is the variable with number of notifications you passed to the
view in your controller
<button type="button" class="btn btn-primary">Notifications
<span class="badge badge-light"><?php echo $notificationsCount ?></span>
</button>
If you don't want to refresh the page, you could use ajax or some kind of event.
Example:
$('#someElement').on('click', function () {
//change value of the notification btn
});
I made a "Add new shipment" button that creates a whole div that includes like 4 fields and a 2nd submit button under all that. that 2nd submit button is supposed to post this new div onto the page and add it to db but I am having trouble selecting the fields and selecting the new submit button. I think this is because the page is already loaded from the beginning, so this new div cannot be selected anymore? Here is my HTML that is created from the "Add new shipment" button:
// adds new shipment
const ADD_SHIPMENT_GRAY = function (){
return
<div class="shipment panel panel-success col-xs-2">
<div class="shipmentblocks row">
<div class="idzone btn-block classificationline">
<!-- label ---->
<input type="text" class="customer btn btn-default btn-xs col-xs-12" placeholder="Customer"><strong id="customertext"></strong></button>
<!-- contents -->
<input type="text" class="btn btn-default btn-xs col-xs-12" placeholder="File Number">
<strong class="boldedlabels" id="filenumber"></strong>
<span class="labelcontents"></span>
</button>
<button type="button" class="etd btn btn-default btn-xs col-xs-12" placeholder="ETD" id="etd">
<strong class="boldedlabels"></strong>
<span class="labelcontents" id="etddatepicker">ETD</span>
</button>
<button type="button" class="eta btn btn-default btn-xs col-xs-12" placeholder="ETA" id="eta">
<strong class="boldedlabels"></strong>
<span class="labelcontents" id="etadatepicker">ETA</span>
</button>
<button type="button" class="shipmentsubmission btn btn-default btn-xs col-xs-12">
<strong class="boldedlabels eta"></strong>
<span class="labelcontents" id="submitnewshipment">Submit</span>
</button>
</div>
</div>
</div>;
}
Here is my javascript code that executes the above code:
const SCRIPTS = function (){
$(function(){
const addshipment = $("#addshipment"),
labelsubmission = $(".labelsubmission"),
shipment = $(".shipment"),
shipmentblocks = $(".shipmentblocks"),
idzone = $(".idzone"),
etd = $(".etd"),
addsubmit = $("#addsubmit"),
zzz = $("#zzz"), // div to keep maximum new shipment as 1
submitnewshipment = $("#submitnewshipment"), // button to submit the new shipment
// Add New Shipment
addshipment.click(() => { // in console, indexes closer to 0 (ex: index [0]) = newer
//$(".shipment:first").before(ADD_SHIPMENT_GRAY());
// add new shipment green block
$("#zzz").html(ADD_SHIPMENT_GRAY());
});
})
}
You are creating dynamic data which requires you to use .on in jquery, otherwise it will not find the element.
Also dont repeat id's make it a class instead
$(document).on('click', '.addshipment', function () {
// in console, indexes closer to 0 (ex: index [0]) = newer
//$(".shipment:first").before(ADD_SHIPMENT_GRAY());
// add new shipment green block
$("#zzz").html(ADD_SHIPMENT_GRAY());
});
http://api.jquery.com/on/
I am using Bootstrap/Collapse for these 3 buttons. You can see it live here - those 3 yellow buttons. When I click on the first button and then on the second button, I want to close the first div by clicking the second. Can you help me how can I do it?
here's some supporting code:
<a class="btn btn-primary btn-sm" data-toggle="collapse" href="#price" aria-expanded="false" aria-controls="price">Podle ceny</a>
<a class="btn btn-primary btn-sm" data-toggle="collapse" href="#manufacturers" aria-expanded="false" aria-controls="manufacturers">Podle značky</a>
<a class="btn btn-primary btn-sm" data-toggle="collapse" href="#13" aria-expanded="false" aria-controls="13">Podle velikosti</a>
<ul>
<li data-type="price" data-base-type="price" data-id="price" data-seo-name="price" data-inline-horizontal="0" data-display-live-filter="0" data-display-list-of-items="" class="mfilter-filter-item mfilter-price mfilter-price collapse" id="price">
...
</li>
<li data-type="checkbox" data-base-type="manufacturers" data-id="manufacturers" data-seo-name="manufacturers" data-inline-horizontal="0" data-display-live-filter="0" data-display-list-of-items="" class="mfilter-filter-item mfilter-checkbox mfilter-manufacturers collapse" id="manufacturers">
...
</li>
<li data-type="checkbox" data-base-type="option" data-id="13" data-seo-name="13o-velikost" data-inline-horizontal="0" data-display-live-filter="0" data-display-list-of-items="" class="mfilter-filter-item mfilter-checkbox mfilter-option mfilter-options collapse" id="13">
...
</li>
</ul>
One of the way to achieve the desired output would be by using jquery. I have implemented the similar feature by using script written here. You can run on your system and look for the effect.
`<script>` `src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js</script>`
`<script>
$(document).ready(function(){
$("#button1").click(function(){
$('#button1').html("<p>"+"hello"+"</p>");
})
$("#button2").click(function(){
$('#button2').html("<li>"+"hello"+"</li>");
$('p').hide();
})
$("#button3").click(function(){
$('#button3').html("<li>"+"hello"+"</li>");
$('#button2').find('li').hide();
})
})
</script>`
Attach three button with id button1 ,button2 and button3 inside body tag of html code .
Now to get the exact functionality replace the class name and id to achieve the exact feature.
I am writing a Laravel 5 project with a comment section code below
#foreach($Comment as $Comment)
<div id="comment-{!! $Comment->comments_id !!}" class="comment-wrapper">
<div class="btn btn-lg btn-info btn-xs" class="show">Show</div>
<div class="btn btn-lg btn-success btn-xs" class="hide">Hide</div>
<div class="btn btn-lg btn-warning btn-xs" class="toggle">Toggle</div>
<div class="watch" class="jumbotron alert-info">
<ul class="list-group">
<li class="list-group-item list-group-item-success">{!! $Comment->author !!}</li>
<li class="list-group-item"> {!! $Comment->text !!}</li>
</ul>
#if ($Comment->author == Auth::user()->name)
<p>Delete</p>
#endif
<h6><small>CREATED ON: {!! $Comment->created_at !!}</small></h6>
</div>
</div>
#endforeach
and I have a javascript file which looks like this
$(document).ready(function () {
$('.show').click(function () {
$(this).closest('.comment-parent').find('.watch').show('slow');
});
$('.hide').click(function () {
$(this).closest('.comment-parent').find('.watch').hide('slow');
});
$('.toggle').click(function () {
$(this).closest('.comment-parent').find('.watch').toggle('slow');
});
});
The trouble is the toggle/hide javascript function only works on one set of buttons and hides all of the comments. I want to have the set of buttons that work for each comment individually. I've tried to increment the watch class and buttons div id by adding 1 and incrementing it for each comment but can't get it to work. Any help would be appreciated thanks.
You may try something like this:
$('#show').click(function () {
$(this).next('.watch').show('slow');
});
Try same approach for other methods, so only the next first div with class of watch will be acted and also, you could have wrapped each set in a single parent container using a unique id attribute in addition to a class, for better grouping. For example:
#foreach($Comment as $Comment)
<div id="comment-{{$comment->id}}" class="comment-wrapper">
<div class="btn btn-lg btn-info btn-xs show">Show</div>
<!-- More... -->
<div class="watch" class="jumbotron alert-info">
<!-- More... -->
</div>
</div>
#endforeach
This way, you could have done the jQuery slecting more specifically, for example:
$('#show').click(function () {
$(this).closest('.comment-parent').find('.watch').show('slow');
});
Update (Thanks to haakym for pointing me that): Also, an id must be unique so instead of using id='show' use it as a class and then use:
$('.show').click(function () {
$(this).closest('.comment-parent').find('.watch').show('slow');
});
I have a razor syntax enumdropdownlist for displaying either active/inactive status.
#Html.EnumDropDownListFor(model => model.Status, new { #class = "btn btn-default btn-lg dropdown-toggle" })
I want to use a button group drop down with glyphs like I have below but don't know how to get my model value 'model.Status' to set the value of the button group drop down.
$(document).ready(function() {
$('#item1').on('click', function() {
$('#item0').text('Active');
});
$('#item2').on('click', function() {
$('#item0').text('Not Listed');
});
});
<div class="btn-group">
<button id="item0" type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li id="item1">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Active
</li>
<li id="item2">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Not Listed
</li>
</ul>
</div>
I don't care if I use html or razor, I just want to use the boostrap button drop down with glyphs and I want to be able to set the enumerated view model value active/inactive (Status) when the page loads.
Although the Bootstrap dropdown buttons look similar to a select list, their functionality is vastly different. I wouldn't recommend trying to use a Bootstrap dropdown button as a replacement for a select list if you need to actually post the "selected" item.
If you're just looking for a more stylistic and visually appealing alternative to a traditional select control, take a look at something like Select2, and while the look is pleasant enough out of the box, there's also a project that styles it to fit even better with the rest of Bootstrap.
If you're dead set on using Bootstrap dropdown buttons, you've got a lot of work ahead of you. You'll need to set up some JavaScript that will read the information from the select element and dynamically create the Boostrap dropdown button based on that, while hiding the original select. Then, you'll need to map over all the events such as a click on one of the items in the dropdown so that it selects the same item in the actual select element. You'll also have to account for highlighting the item in the dropdown that corresponds with the selected option in the select list, etc. If you run into specific problems while writing all that code, you can ask additional questions here as necessary, but providing you with all the code you'll need here is far beyond the scope of StackOverflow.
You can try to enumerate through enum values and put them in page, please notice the Html.HiddenFor from the end, we will use it to store the selected Status.
<div class="btn-group">
<button id="item0" type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
#{
var values = Enum.GetValues(typeof(Status));
for(int i=0; i < values.Count; i++)
{
var status = (Status)values[i];
<li id="item#(i+1)" class="select-status" data-status="#values[i]">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>#status.ToString()
</li>
}
}
</ul>
</div>
#Html.HiddenFor(model => model.Status)
After we create the html we have to update the selected Status in Html.HiddenFor to persist when a POST is performed.
$(document).ready(function() {
$('.select-status').click(function(){
$('#Status').val($(this).data('status')); // update the status in hidden input
});
#for(int i=0; i < values.Count; i++)
{
<text>
$('#item#(i+1)').on('click', function() {
$('#item0').text('#status.ToString()');
});
</text>
}
});
HTML snippet example:
$(document).ready(function() {
$('.select-status').click(function(){
$('#Status').val($(this).data('status')); // update the status in hidden input
});
$('#item1').on('click', function() {
$('#item0').text('Active');
});
$('#item2').on('click', function() {
$('#item0').text('Not Listed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="btn-group">
<button id="item0" type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li id="item1" class="select-status" data-status="1">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Active
</li>
<li id="item2" class="select-status" data-status="2">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Not Listed
</li>
</ul>
</div>
<br />
Visible Status just for test
<input type="text" id="Status" value="1" />
Note: The code may have some errors but the logic/flow is the same.
In .cshtml file
<script>
myModelStatus = '#Model.Status';
</script>
#Html.EnumDropDownListFor(model => model.Status, new { #class = "btn btn-default btn-lg dropdown-toggle" })
more html here...
In your js file
$(document).ready(function() {
var status = myModelStatus;
$('#item1').on('click', function() {
$('#item0').text('Active');
});
$('#item2').on('click', function() {
$('#item0').text('Not Listed');
});
});
You are listening for click events on the li element rather than on the anchor tag
You should stop event propagation by using event.preventDefault() method.