I'm new to jquery, and one of my first tasks was to make a dynamic table. I managed to create a button that deletes the table row on click and it worked perfectly, the problem is, when i added a confirmation box for the user, and assigned the function to remove the tr to it, it stopped working.
i've tried several things inside the button function, but it seems like either way the button only closes the alert box and the tr remains untouched.
//This works just fine, it deletes the selected tr without any issue
but it needs a confirmation from the user
$(document).on('click','.delete', function(){
$(this).parents('tr').remove();
}
//This is my code for the confirmation box including the shown function in the action for the button
$(document).on('click','.delete', function(){
$.alert({
useBootstrap:false,
columnClass: 'small',
title: 'Are you sure you want to delete the task?',
content: 'This action is irreversible',
type: 'red',
typeAnimated:true,
icon:'fas fa-exclamation-triangle',
typeAnimated: true,
buttons: {
Delete: {
text: 'Delete',
btnClass: 'btn-red',
action: function(){
$(this).parents('tr').remove();
$.alert({
title:'Task deleted',
icon:'fas fa-exclamation-triangle',
type:'red',
content:'',
useBootstrap:false
});
}
},
close: function () {
}
}
});
});
To sum it up, i understand how to delete the tr with .remove(), but i don't understand why it doesn't work inside the alert function. Thank you for your time.
When you register the click event, you are registering it to an element or elements with the class of .delete. Therefore, inside the click handler function, this refers to the element that was clicked.
When you are inside the .alert function of jquery-confirm, this refers to a different element (probably the button in the dialog, depending on how jquery-confirm is implemented), so the parent of that element is not the tr that you are looking for.
Try assigning $(this) to a variable before you make the call to $.alert, like this:
$(document).on('click','.delete', function(){
var buttonClicked = $(this); //assign to a variable here
$.alert({
useBootstrap:false,
columnClass: 'small',
title: 'Are you sure you want to delete the task?',
content: 'This action is irreversible',
type: 'red',
typeAnimated:true,
icon:'fas fa-exclamation-triangle',
typeAnimated: true,
buttons: {
Delete: {
text: 'Delete',
btnClass: 'btn-red',
action: function(){
buttonClicked.parents('tr').remove(); //reference that variable here
$.alert({
title:'Task deleted',
icon:'fas fa-exclamation-triangle',
type:'red',
content:'',
useBootstrap:false
});
}
},
close: function () {
}
}
});
});
Related
I am generating rows dynamically for a table using ASP.NET Core Razor Pages and each row has a Delete button without button ID.
example of generated HTML for a row:
<button onclick="return DeleteRowConfirm(event);" data-ajax="true" data-ajax-method="GET" data-ajax-begin="AjaxOnBegin" data-ajax-complete="AjaxOnComplete" data-ajax-failure="failed" data-ajax-update="#div_BusyIndicator" href="/ApproveNumber/a10b0c7a?handler=DeleteRow">Delete Row</button>
on button click I am using bootbox.js to confirm using this code:
function DeleteRowConfirm(e) {
e.preventDefault();
bootbox.confirm({
message: "Delete Row?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
if (result === false) {
}
else {
//$(this).trigger(e.type); //Doe not working
}
}
});
}
I would like to execute the "Button Click" if the user press "Yes".
I have tried $(this).trigger(e.type); but it does not working.
I solved the problem with the help of #mousetail and "Pooma" from this link https://stackoverflow.com/a/48018708
I have replaced button element to element and for onclick I have set event.preventDefault(); event.stopImmediatePropagation(); DeleteRowConfirm(event);
at DeleteRowConfirm function when callback is true I have removed the onclick from the element so it does not loop with bootbox popup and than trigger the click event.
$(e.target).removeAttr('onclick');
$(e.target).trigger(e.type);
The documentation says:
Show a simple prompt popup, which has an input, OK button, and Cancel
button. Resolves the promise with the value of the input if the user
presses OK, and with undefined if the user presses Cancel.
I was doing:
$ionicPopup.prompt({
//options
}).then(function (userinput) {
//get userinput and send to server
});
I need to add a third button, but can't get the text of the input, how can I resolve the promise on the onTap event of the button to get the input?
$ionicPopup.prompt({
title: '¿Are you sure?',
inputType: 'text',
buttons: [
{ text: 'Cancel'
//close popup and do nothing
},
{
text: 'NO',
type: 'button-assertive',
onTap: function(e) {
//send to server response NO
}
},
{
text: 'YES',
type: 'button-energized',
onTap: function(e) {
//get user input and send to server
}
}]
See this demo i made with your code: http://play.ionic.io/app/ac79490c8914
prompt() is not meant to add more than two buttons,show() is used to make complex pop ups, Please see show() method in same documentation. As written in documentation, i am quoting:
Show a complex popup. This is the master show function
for all popups.
A complex popup has a buttons array, with each button having a text
and type field, in addition to an onTap function.
Your code will be like:
$scope.showPop = function(){
$scope.data = {};
var myPopup = $ionicPopup.show({
template: '<input type="text" ng-model="data.myData">',
title: '¿Are you sure?',
scope: $scope,
buttons: [
{ text: 'Cancel'
//close popup and do nothing
},
{
text: 'NO',
type: 'button-assertive',
onTap: function(e) {
return null;
}
},
{
text: 'YES',
type: 'button-energized',
onTap: function(e) {
return $scope.data.myData;
}
}]
});
myPopup.then(function(userinput) {
if(userinput){
console.log('returned data'+ userinput)
}
});
}
Simple thing about above code is that you have bind input with $scope (<input type="text" ng-model="data.myData">) so you can access it in any manner.
The following snippet allows me to perform stuff in a callback function for the buttons that are clicked. However, how can I get a callback function, or a similar workaround such that I can perform some code when a user clicks on the 'X' button/dismisses the dialog?
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess:{
label: "Ok",
callback: callback
}
}
});
callback(){//stuff that happens when they click Ok.}
I do not want to disable/hide the close button with
closeButton: false,
There is onEscape function for this.
bootbox.dialog({
message: 'the msg',
title: "Title",
onEscape: function() {
// you can do anything here you want when the user dismisses dialog
}
});
You can use a variable to check if the modal was hidden after a click on OK or x button / escape key
var status = false;
$('.btn').on('click', function () {
bootbox.dialog({
title: "Woah this acts like an alert",
message: "Cool info for you. You MUST click Ok.",
buttons: {
sucess: {
label: "Ok",
callback: function () {
status = true;
}
}
},
onEscape: function () {
$('.bootbox.modal').modal('hide');
}
});
});
$(document).on("hidden.bs.modal", ".bootbox.modal", function (e) {
callback();
});
function callback() {
if (!status) {
onClose();
} else {
onOK();
status = false;
}
}
function onClose() {
$('p.alert span').removeClass().addClass('text-danger').text("Dismissed");
}
function onOK() {
$('p.alert span').removeClass().addClass('text-success').text("Sucess");
}
Fiddle demo
Some people might see this as a bit of a hack-around. Although it suits me fine as all I wanted to acknowledge as a developer that someone accepted the message, which triggered the next event.
Using Bootbox.js' native confirm() method which does supply a callback action. I added an additional class as an option to the confirm button (which must be supplied on a confirm() call) with the hidden classname (E.g. Bootstap has a helper class for display:none called hidden.
This hides the confirm button, thus the Modal appears as a normal Alert box.
bootbox.confirm({
message: "Some Button Text",
buttons: {
"cancel": {
label: "<i class='fa fa-check'></i> OK - I understand",
className: "btn btn-primary"
},
//Hide the required confirm button.
"confirm": { label: "", className: "hidden" }
},
callback: function(){
//Begin Callback
alert( "Finished" );
}
});
JsFiddle Example
I'm able to get the dialog to appear when I click "Reject Request", but the dialog won't close and I see an error in the console when I click Cancel or OK. "Uncaught TypeError: Cannot read property 'apply' of undefined"
HTML:
<button id="btn-reject" class="btn btn-danger" type="submit" style="float: right;">Reject Request</button>
<div id='reject-dialog' title='Confirmation Required'>Reject Request?</div>
JQuery:
<script type="text/javascript">
$(document).ready(function () {
$("#reject-dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": {
text: "OK",
id: "confirm-reject"
},
"Cancel": {
text: "Cancel",
id: "cancel-reject"
}
}
});
$("#btn-reject").click(function (e) {
e.preventDefault();
$("#reject-dialog").dialog('open');
});
$('#cancel-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
$('#confirm-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('reject');
});
}); //dom
</script>
JQuery versions:
you are binding to buttons that don't exist yet on document.ready.
instead you can tell the dialog what callback to trigger while creating the buttons.
Update:
according to the Jquery-ui documentation, dialog buttons options are accepted in one of the two following formats:
1) Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.
2) Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.
i updated the code to reflect that.
code
<script type="text/javascript">
$(document).ready(function () {
var dialogDiv = $("#reject-dialog");
dialogDiv.dialog({
autoOpen: false,
modal: true,
buttons: [
{
text: "OK",
id: "confirm-reject",
click: function() {
dialogDiv.dialog("close");
console.log('confirm');
}
},
{
text: "Cancel",
id: "cancel-reject",
click: function(){
dialogDiv.dialog("close");
console.log('reject');
}
}
]
});
$("#btn-reject").click(function (e) {
e.preventDefault();
dialogDiv.dialog('open');
});
}); //dom
</script>
You need to use .on()'s event delegation since the buttons don't exist when the code is executed.
For example, change:
$('#cancel-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
to:
$(document).on('click','#cancel-reject', function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
jsFiddle example
Ideally you want to bind to an element that already exists on the page that's closer than document for better performance.
You need to inform a click function, even you need to bind a click handler after the create the dialog. I think this happens because Jquery tries to execute the attribute click through apply native js function and, if you don't define it, js try to execute apply in a undefined.
So, I suggest that you define an empty function (or jQuery.noop):
"Confirm": {
text: "OK",
id: "confirm-reject",
click: function(){} // or jQuery.noop()
}
I have a field that I'm outputting text into after doing an nl2br(). I've made the field editable by users. However, I don't want users to see the <br>s when they click edit.
This is my function:
$(this).editable({
type: 'textarea',
submit: 'Save',
cancel: 'Cancel',
editClass: 'editable',
onEdit: function(content) {
$(this).html($(this).text());
},
...
});
$(this).html($(this).text()) doesn't work. By the time the onEdit fires, the text inside the tag is gone. Any ideas? I can paste more code if needed, but I didn't think it was necessary.
If I do a $(this).val('whatever'); instead, nothing gets replaced.
Got it! jQuery.editable adds a textarea inside the parent tag and removes the previously existent text.
This works:
text = $(this).text();
$(this).editable({
type: 'textarea',
submit: 'Save',
cancel: 'Cancel',
editClass: 'editable',
onEdit: function(content) {
$(this).find('textarea.editable').val(text);
},
...
});