I'm working with angular datatables, and I have to states : #/app/configurations/formations and #/app/configurations/filieres, so when I switch between these two states I have some issues related to presentation as following :
the first time when I access #/app/configurations/formations this is how it looks :
but when I access some other state for example : #/app/configurations/filieres my datatable doesn't expand in the whole page :
and this behavior remains for all my datatables in my application, so I have always to refresh the page to make the datatable expand in the whole page.
this is how I build all my datatables :
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource("http://localhost:8080/diplomes")
.withPaginationType('full_numbers')
.withBootstrap()
// Active Responsive plugin
.withOption('responsive', false)
.withOption('initComplete', function(settings) {
// Recompiling so we can bind Angular directive to the DT
$compile(angular.element('#' + settings.sTableId).contents())($scope);
});
vm.dtColumns = [
DTColumnBuilder.newColumn('codeDiplome').withTitle('ID Diplome'),
DTColumnBuilder.newColumn('nom').withTitle('NOM Diplome'),
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
.renderWith(function(data, type, full, meta) {
if (true) {
return '<button class="btn btn-bl btn-success btn-ef btn-ef-5 btn-ef-5b mb-10" ng-click="openEditModal('+data.codeDiplome+')"><i class="fa fa-edit"></i> <span>'+$scope.update+'</span></button> '
+ '<button class="btn btn-danger btn-ef btn-ef-5 btn-ef-5b mb-10" ng-click="openDeleteModal('+data.codeDiplome+')"><i class="fa fa-trash"></i> <span>'+$scope.delete+'</span></button>';
} else {
return '';
}
})
];
The solution was to add special class to the datatable for example dt-responsive and then we assign a style to this class width: 100%!important
Related
I have got the following DataTable with data and web bootstrap links displayed via the appropriate columns as shown below:
$(document).ready(function() {
$('#example').DataTable({
destroy: true,
"ajax":{
"url":"http://localhost:3000/tasks/list",
"dataSrc": ""
},
"columns":[
{"data":"title", "title":"Τίτλος"},
{"data":"description", "title":"Περιγραφή"},
{ "data": "ID",
"title": "Επισκόπηση",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<a class="btn btn-success btn-sm viewlink" role="button" data-toggle="modal" data-target="#viewModal" href="/tasks/todo/' + data + '">' + '<i class="fas fa-eye"></i>' + '</a>';
}
return data;
}
} ],
length: 20,
});
$('.viewlink').on("click", function(e){
console.log("Hello!!!");
});
});
Unfortunately when i press the bootstrap link button, i do not get any response via console.log.
Any idea that would be convenient to me!
Regards
You must use a delegated event handler, i.e
$('#example').on('click', '.viewlink', function(e) {
//
})
Reason: At the time your handler is declared no .viewLink's are present in DOM.
I have a situation where I want to disable the button for a few seconds when clicked. Here is the code for button:
<button uib-popover="Create TO" popover-trigger="mouseenter" data-ng-click="createTransportOrder(item.confirmed_price_id)" data-ng-disabled="item.transport_order_id || !item.confirmed_price_id" class="btn btn-info btn-xs">
<i class="fa fa-truck"></i>
</button>
And here is the createTransportOrder method:
$scope.createTransportOrder = function (priceResponseId) {
var priceResponseIds = [priceResponseId];
PriceRequestsModel.createTransportOrdersByIds(priceResponseIds).then(
function (response) {
$scope.messages = response.messages;
updateSelectedPriceRequests();
getPriceRequests();
},
function (response) {
$scope.messages = response.messages;
}
)
};
I have tried a couple of things but in vain. How can I do this?
You can add setTimeout at the end of createTransportOrder
this.button.nativeElement.disabled = true;
setTimeout(function(){
this.button.nativeElement.disabled = false;
},5000);
Add #mybutton to your button <button (click)="yourclick()" #mybutton>Your button</button>
add variable #ViewChild('mybutton') button; to your component
Stackbliz demo code: https://stackblitz.com/edit/angular-disable-5second
With angular 1.4 you can change to
Set an id to your button as <button id="mybutton">
Add these code to below of click function.
document.getElementById('mybutton').disabled = true;
setTimeout(function(){
document.getElementById('mybutton').disabled = false;
},5000);
I have an arraylist which is used to display a leave request workflow. If a vacation leave request is currently saved as a draft, the request is added to my draft list, however if it's been submitted from a modal form to be approved it would need to be removed from the draft list and added to the approval list. My question is the list are external to my form and my form has does not know the index of the list. When I update my request from draft to approve, how do I remove it from the draft list and add it to the approved list without knowing the index.
The first thought that came to mind was to create a unique attribute with the objects database pk like so data-approval="7"and select it with some sort of jquery function and remove the item from the list, but from what I read, that isn't the angular way to do things. So without knowing the index how would I remove an item from my list in angularjs?
Example of loop.
<ul>
<li ng-repeat="e in pendingApprovals" data-approval="{{e.id}}">
<div class="alert alert-info">
<h5>{{e.title}}</h5>
<div>
{{e.type}}
</div>
{{e.start | date:'MM/dd/yyyy - hh:mm a'}}
{{e.end | date:'MM/dd/yyyy - hh:mm a'}}
<a ng-click="rejectClick(e.id)" class="btn btn-danger btn-xs btn-block">
<i class="fa fa-thumbs-down fa-1"></i>
Reject
</a>
<a ng-click="approveClick($index, e.id)" class="btn btn-success btn-xs btn-block">
<i class="fa fa-thumbs-up fa-1"></i>
Approve
</a>
</div>
</li>
</ul>
JS
modalInstance.result.then(function(formData) {
$http.post('./calendar/save.json', formData).then(
function(response) {
if(formData.update) {
$scope.refresh();
console.log('refresh')
angular.element(elem[0].querySelector('[data-unsubmitted="' + response.data.id + '"]')).remove();
} else {
$scope.events.push(response.data);
$scope.pendingApprovals.push(response.data);
}
}, function(response) {
console.log('failure ' + response)
// called asynchronously if an error
// occurs
// or server returns response with an
// error status.
});
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
It appears as if filters as #ste2425 was in fact the solution.
modalInstance.result.then(function(formData) {
$http.post('./calendar/save.json', formData).then(
function(response) {
if(formData.update) {
$scope.refresh();
var items = $scope.pendingApprovals;
var item = $filter('filter')(items, {id: response.data.id}, true)[0];
var index = items.indexOf(item);
$scope.pendingApprovals.splice(index,1);
} else {
$scope.events.push(response.data);
$scope.pendingApprovals.push(response.data);
}
}, function(response) {
console.log('failure ' + response)
// called asynchronously if an error
// occurs
// or server returns response with an
// error status.
});
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
I also found help from this SO question how to get index position of an array item in controller passing a value in angularjs
I have multi page form that has a back button built in. I want to change state when chapterID reaches 0.
$state.go executes but then redirects back to gn.newChapter state
HTML:
<a ui-sref="gn.newChapter({chapterID: id})" class="btn btn-primary" ng-click="goBack()">Go Back</a>
Controller:
$scope.goBack = function() {
if (newChapterService.getChapterState() === 0) {
$state.go('gn.createGNForm');
}
else {
$scope.id = newChapterService.goBackChapter();
}
};
<a class="btn btn-primary" ng-click="goBack()">Go Back</a>
$scope.goBack = function() {
if (newChapterService.getChapterState() === 0) {
$state.go('gn.createGNForm');
}
else {
$scope.id = newChapterService.goBackChapter();
$state.go('gn.newChapter({chapterID: $scope.id})'); // I don't know your predefined paths. so just suggesting this as an answer. This line might be different according to your need.
}
};
I am using the latest twitter typeahead using custom templates using AngularJS.
I am able to get the desired output but I have a button in the custom templates that appears when we enter anything in the dropdown.
Here is the plunker : http://plnkr.co/edit/u5zkXhry0bCu6u5r0WuP?p=preview
Now when I click on the Add button the event is not getting fired. I think the event is not getting registered in the $scope. How can I do this over here ?
$('#prependedInput').typeahead({
hint: true,
highlighter: function (x) { return x; },
minLength: 3,
},
{
name: 'members',
displayKey: 'value',
source: getUserSearchData,
templates: {
suggestion: Handlebars.compile('{{member}}')
}
});
Handlebars.registerHelper('member', function (items) {
var item = this;
var items = '<li><a><div class="row"><img style="height: 40px; float:left" src=' + getAvatarUrl(item) + ' /><span style="padding: 0.5em; float:left;"> ' + getDisplayName(item) + '</span><button class="btn btn-sm pull-right" ng-click="confirmAddDialog(' + item.id + ')">Add</button></div></a></li>';
return new Handlebars.SafeString(items)
});
I do have one function to fire a modal popup.
$scope.confirmAddDialog = function (userId) {
flashSvc.add('we are hit...');
};
How can I register the event using template.