We Keep Coding

How do I programmatically remove a custom action button in a Tabulator table?

I created a Tabulator table which has a custom action button to execute an action and then updates the row on which the button was clicked. This it does successfully.
What I want to do is to also dynamically remove the row's link/buttonthat was clicked - only for the row whose button was clicked - as soon as the row data is updated. I've tried to resolve this for hours and checked the tabulator documentation, and I still don't know how I can go about doing this.
Your help is much appreciated.
The code is as follows:
var tableData =[
{
"id":30,
"position":201,
"category":"onel",
"name":"One Thing",
"completed_at":null,
"created_by_email":"",
"completed_by":""
},
{
"id":31,
"position":202,
"category":"onel",
"name":"Two things",
"completed_at":null,
"created_by_email":"",
"completed_by":""
},
{
"id":32,
"position":203,
"category":"onel",
"name":"Three things",
"completed_at":null,
"created_by_email":"",
"completed_by":""
},
{
"id":33,
"position":204,
"category":"onel",
"name":"Four things",
"completed_at":null,
"created_by_email":"",
"completed_by":""
},
{
"id":34,
"position":205,
"category":"onel",
"name":"Five things",
"completed_at":null,
"created_by_email":"",
"completed_by":""
}
];
var actButton = (cell, params, onRendered) => {
var myId = cell.getRow().getData().id;
clickFunction = (p_id) => {
cell.getTable().updateData(
[
{ id: p_id
, completed_at: '2021-12-31 13:59:00'
, completed_by: 'Womble'
, completed_by_email: 'wimbledon#common.org.uk'
}
]
// <--- here, I want to remove this row's action button as defined below
);
};
/**
* This renders the buttons at initialisation but doesn't respond to dynamic in-situ data-changes
*/
if ( null == cell.getRow().getData().completed_at ) {
return "<a href='javascript: clickFunction(" + myId + ")' data-toggle='tooltip' title='Execute'><i class='fas fa-camera' style='color:#9691ce;'></i></a>";
} else {
return "";
}
};
var myTable = new Tabulator(
"#divTable",
{
data: tableData,
columns: [
{title:"Position", field:"position"},
{title:"Category", field:"category"},
{title:"Name", field:"name"},
{title:"Completed", field:"completed_at", formatter:"datetime", formatterParams:{inputFormat:"YYYY_MM_DD HH:mm:ss", outputFormat:"DD/MM/YYYY HH:mm:ss", invalidPlaceholder:""} },
{title:"By", field:"completed_by", sorter:"string"},
{title:"Email", field:"completed_by_email", sorter:"string"},
{title:"Action", field:"id", sortable:false, formatter:actButton},
],
layout: "fitColumns",
pagination: "local",
paginationSize: "15",
tooltips:true,
tooltipsHeader:true,
reactiveData:true, //turn on data reactivity
}
);

I was looking to the Tabulator component object model for the solution, when it was best answered by the DOM.
Assumptions:
the action button column is assigned the field 'id' - this doesn't affect the dynamic table's layout or interaction
Using a fragment of the above code as a starting point, the solution would be:
var actButton = (cell, params, onRendered) => {
var myId = cell.getRow().getData().id;
clickFunction = (p_id) => {
cell.getTable().updateData(
[
{ id: p_id
, completed_at: '2021-12-31 13:59:00'
, completed_by: 'Womble'
, completed_by_email: 'wimbledon#common.org.uk'
}
]
).then (
() => {
/**
* Remove the action button
*/
[...document.querySelectorAll("div.tabulator-cell")]
.filter(item => item.getAttribute('title')==p_eventId)[0]
.childNodes[0].remove();
}
);
};
/**
* This renders the buttons at initialisation but doesn't respond to dynamic in-situ data-changes
*/
if ( null == cell.getRow().getData().completed_at ) {
return "<a href='javascript: clickFunction(" + myId + ")' data-toggle='tooltip' title='Execute'><i class='fas fa-camera' style='color:#9691ce;'></i></a>";
} else {
return "";
}
};

toaster.clear('*') does not work inside a jQuery function

I'm using Angular toaster messages. I use toaster.clear('*') to clear a toaster message and show the next toaster message. This works fine in my other situations.
However here it does not work. I clear the previous toaster message and change the text of the toaster, but the message changes only when I hover over it.
$("#pageColorPallette").change(function() {
if ($scope.questionNumber == 1) {
selectedcoler = $("#pageColorPallette").spectrum("get");
selectedhexacoler = selectedcoler.toHexString();
toaster.clear('*');
var content = document.getElementById("editableTextArea");
content.style.backgroundColor = selectedhexacoler;
if (selectedhexacoler == '#ffffff') {
if ($scope.attempts < 3) {
$scope.addMarksGeneric($scope.activityThreeMarks, 10);
}
toaster.clear('*');
toaster.pop({
type: 'info',
title: 'step 2',
body: ' body of step two message',
toasterId: 2
});
$scope.questionNumber = $scope.questionNumber + 1;
} else {
$scope.deductMarksGeneric($scope.activityThreeMarks, 5);
toaster.pop({
type: 'error',
title: 'try again',
body: 'please try again.',
toasterId: 2
});
}
} else {
$scope.deductMarksGeneric($scope.activityThreeMarks, 5);
toaster.pop({
type: 'error',
title: 'try again',
body: ' Please continue according to the steps.',
toasterId: 2
});
}
});

Ionic popup alert not closing properly

The first alert verifies whether the entered password corresponds to the user's password
If it does, then opens another alert where the user change the password if he has entered the same password in both fields
And finally, the third alert will open if it has successfully changed the password
The problem occurs if I click Cancel in the second alert or after confirming the third alert
After that, I'm not able to click on anything inside the app until I unload and restart the same application
So I guess the problem occurs because the alert is not closed properly
Here is my code:
$scope.changePass = function () {
$scope.newitem = {}
var myPopup = $ionicPopup.alert({
template: '<input type="password" placeholder="password" ng-model="newitem.password">',
title: 'Insert your password',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Confirm</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.newitem.password) {
console.log("preventing default");
e.preventDefault();
} else {
if($scope.newitem.password == $scope.user.password) {
$scope.new = {}
var newPass = $ionicPopup.alert({
template: '<input type="password" placeholder="password" ng-model="new.newpass"><br><input type="password" placeholder="Repeat password" ng-model="new.repeatpass">',
title: 'Insert your new password',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Confirm</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.new.newpass) {
console.log("preventing default");
e.preventDefault();
} else {
if (!$scope.new.repeatpass) {
$scope.new.newpass = "";
console.log("preventing default");
e.preventDefault();
} else {
if ($scope.new.newpass == $scope.new.repeatpass) {
$scope.user.password = $scope.new.newpass;
var uri = "http://someLink" + $window.localStorage.id;
$http({
method: 'PUT',
url: uri,
headers: {"Content-Type": "application/json;charset=UTF-8"},
data: $scope.user
}).success(function() {
var succesResponse = $ionicPopup.alert({
title: 'Ok',
template: "Password has changed"
});
succesResponse;
e.preventDefault();
});
}
else {
$scope.new.newpass = "";
$scope.new.repeatpass = "";
e.preventDefault();
}
}
}
}
}
]
});
}
else {
$scope.newitem.password = "";
e.preventDefault();
}
}
}
}
]
});
}

I found the answer to my question
Namely, the solution is to close the first alert before I open the second alert
But before I open second alert, it is necessary to have a timeout to close the first alert properly
myPopup.close();
$timeout(function() {
$scope.new = {}
var newPass = $ionicPopup.alert({...});
}, 500);

Can I send data from Ionic JS Popup?

I try build android and in some page I'll make edit from popup. Example if i click input it will show popup and on popup be found input text. After input some text and click OK data from input text will be sent to server. But I don't know how to make it.
This my HTML
<input class = "button" ng-click = "showPopup()">Add Popup Show />
And This my JS
$scope.showPrompt = function() {
var promptPopup = $ionicPopup.prompt({
title: 'Title',
template: 'Template text',
inputType: 'text',
inputPlaceholder: 'Placeholder'
});
promptPopup.then(function(res) {
console.log(res);
});
};
Can anybody help me to solve my problem ? Thanks

I had used ionicPopup show (hope it helps you) :
$scope.updateQ = function() {
var alertpop = $ionicPopup.show({
title: 'Quantity',
templateUrl: 'popup-template.html',
scope: $scope,
buttons: [{
text: '<p class="popup-p">Ok</p>',
type: 'button-positive',
onTap: function(e) {
//window.localStorage.setItem("tmpqty",$scope.product.quantity);
return $scope.product.quantity;
}
}, {
text: '<p class="popup-p">Cancel</p>',
type: 'popup-close',
onTap: function(e) {
//alert($scope.product.quantity);
//return 'cancel button'
$state.go('app.productdetail', { product_id: $scope.product_id }, { reload: false })
}
}]
});
alertpop.then(function(res) {
var tmp_qty = res;
var pid = $scope.product_id;
var url = "" + base_url + "?callback=JSON_CALLBACK&store=1&service=updatevproducts&productid=" + pid + "&qty=" + tmp_qty + "";
$http.jsonp(url)
.then(function(response) {
var stat = response.data;
if (stat.status == "success") {
var successPop = $ionicPopup.alert({
template: 'Inventory of Product Id : ' + pid + ' updated successfully !'
});
$state.go('app.stocks');
} else {
$state.go('app.productdetail', { product_id: $scope.product_id }, { reload: false });
}
});
});
};

Pressing enter to submit in Ionic Popup with AngularJs

I have a popup in ionic and have one textfield and one button in it. I want to press enter and want button to work and close the popup. Im wondering how to perform this action within this popup below.
var myPopup = $ionicPopup.show({
template: '<input type = "text" ng-model = "data.model"><br> '
, title: 'Name'
, scope: $scope
, buttons: [
{
text: 'Cancel'
}, {
text: '<b>Search</b>'
, type: 'button-positive'
, onTap: function (e) {
$ionicLoading.show();
$http.get(HTTPService.getHttpText() + 'Persons/' + $scope.data.model).then(function (resp) {
console.log('Success', resp);
$ionicLoading.hide();
}, function (err) {
$ionicLoading.hide();
console.error('ERR', err);
// err.status will contain the status code
})
}
}
]
});

I would suggest you to use a <form> and to set your button type="submit":
<form ng-submit="submitPopup()">
<button type="submit">Close</button>
</form>
In the submitPopup function, do whatever you want and close the modal:
$scope.submitPopup = function() {
$http.get( ... );
myPopup.close();
}

Probably you have filter the button event.
if(e.name="") -->
is $http.get working?