Refresh editable table on CancelRowAction

Refresh editable table on CancelRowAction

  

I've been trying to access the Cancel Row Action for a while now but so far unsuccessful
i have been trying to add javascript such as


$(".CancelRowAction").click(function(){...});


SyntaxEditor Code Snippet

window.onload = function() {
    var anchors = document.getElementsByTagName('a');
    for(var i = 0; i < anchors.length; i++) {
        var anchor = anchors[i];
        if(('CancelRowAction').match(anchor.className)) {
            anchor.onclick = function() {
                alert('ho ho ho');
            }
        }
    }
}


how can I Refresh the EditableTable widget when pressing the X or cancel action..

Hello Wally,

1. Your JavaScript will never work, as the HTML element used for cancel the editing/adding is dynamically created on the fly, as needed. This means that your JavaScript will never find anything to bind when being executed by the browser, as at this time, the element simply does not exists.

2. You may get what you wants to do working, if you use a different approach. Basically, the idea would be to attach your handler when the DOM changes (the CancelRowAction is added to the DOM). You can get ideas on how to do this here: https://stackoverflow.com/questions/47378194/fire-a-function-when-innerhtml-of-element-changes?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

Just for curiosity, why do you want to refresh the Editable Table when the user cancels an editing/adding?

Cheers.

Thank you for the help, i'll check the link right away.

I used the EditableTable to display and edit info

but when i click on a row edit it and clik cancel, the info does not refresh, it stay the same and gives the appereance that has been edited (i hope i explain it correctly).

Wally,

Did you manage to solve this?

I'm having the same problem.

i couldn't solved it in the end, since the EditTable i generated on the fly.

i have to use a different approach with other elements and other way to edit the record ): i'm sorry.


Margarida Morais wrote:

Wally,

Did you manage to solve this?

I'm having the same problem.

Hello everyone,

What about adding an event handler to the onClick of the editable table and then calling a function that adds and event handler to the onClick of the CancelRowAction button?

Something like this (using jQuery to improve readability):

function actoncancel() {
  <!-- your code here -->
};
function captureclick() {
  $(".CancelRowAction").on("click", actoncancel)
};
$(".EditableTable").on("click", captureclick);


Wally,

I used the code that João Baptista wrote above.

SyntaxEditor Code Snippet

"function actoncancel() {
    $('#" + MyHiddenBtn.Id +"').click()
};
function captureclick() {
  $('.CancelRowAction').on('click', actoncancel)
};
$('.EditableTable').on('click', captureclick);
"

It works :)

Actually, it's not perfect yet.

If you press a checkbox inside the editable table it does not work.

I'll try to fix it.

Try this Margarida:

function actoncancel() {
  <!-- your code here -->
};
function captureclick() {
  $(".CancelRowAction").off("click", actoncancel);
  $(".CancelRowAction").one("click", actoncancel);
};
$(".EditableTable").on("click", captureclick);

I think the problem with the previous snippet was that it just kept adding event listeners every time you clicked the Editable Table. 


I tested it on a simple Editable Table with checkboxes and it seems to work.
Hopefully it also helps out with your use case.

Cheers