How to automatically handle javascript function call and wrap/decorate it

Question

Hello I have problem with existing javascript code.

The background is that some of JSP Tags automatically include JS function, and then some of html elements need to run this functions. But the point is that there a lot of html elements that need to use included JS function, and there will be very hard to modify each separate element to configure which function it should run.

Lets consider simple example: we have JSP Tag that generate table

<table id="automaticallyGeretatedId">
<tr>
<td></td>
</tr>
</table>

and this include some JS function

function removeItemFromTable(){
    //modify automaticallyGeretatedId
}
function addItemToTable(){
    //modify table, add values and so on..
}

then we have some html external buttons or/and div-s that have method with constant name "clearData" but the JS is a part of HTML page sometimes in this way (embedded in Html)

<script>
function clearData(){/*some code*/}
</script>

and sometimes in included file as

function clearData(){ //some code
}

So my question is: is other way than modify each simple clearData in code, to ensure that each time when clearData function will be run, the function removeItemFromTable() will be also run?

I mean can I search for clearData function and append after it call to removeItemFromTable function? And where should be this operation done, what is the best way to do this?

Lets suppose that each time when clearData() function appear the function removeItemFromTable() also will be included.

Why not register your various handlers somewhere and call them from one place, like clearData in this case? Eventing might also be appropriate unless you have a lot of strictly-sequential operations. — Dave Newton
– Dave Newton, Commented Aug 26, 2014 at 10:31
@Dave Newton can You give me more detail about Your way of thinking? — Mazeryt
– Mazeryt, Commented Aug 27, 2014 at 18:31
Nutshell: Instead of just defining removeItemFromTable, define it, and add it to a list of functions clearData will run. — Dave Newton
– Dave Newton, Commented Aug 27, 2014 at 18:36

Community · Accepted Answer · 2017-05-23 12:23:43Z

1

Finally I decided to use described at this link technique:

Adding code to a javascript function programmatically

I set up at document ready to search function clearData()

$( document ).ready(function() {
    decorateClearData();
});

and code in function decorateClearData();

function decorateClearData() {
    clearData = (function() {
    var cached_function = someFunction;

    return function() {
        cached_function.apply(this, arguments); // use .apply() to call it

        // and my new code:
        removeItemFromTable();
    };
}());
}

This works because clearData is global function, and maybe this is not pragmatic way but I didn't have other ideas.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Aug 27, 2014 at 18:30

Mazeryt

9251 gold badge19 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rafaelcastrocouto Over a year ago

i think most ppl would go for o more "event driven" solution, but this is a good info to know. thx 4 sharing

Collectives™ on Stack Overflow

How to automatically handle javascript function call and wrap/decorate it

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related