Preventing multiple bindings of an event handler to the same object using JS Prototypes

Question

Preventing multiple bindings of an event handler to the same object using JS Prototypes

When implementing ajax functionality, it's important to reinitialize Javascript event handlers after each ajax call. This is necessary because ajax calls can lead to significant changes on the page, resulting in uninitialized objects.

If you're interested, check out this jsfiddle example: Multiple additions of Javascript event handlers

Although the solution I have seems to be working fine, I want to ensure that it's the right approach for our needs. For instance, the globally defined variable:

    MyCompany.field.bindedOnfocusSelector = MyCompany.field._focusEventHandler.bindAsEventListener(MyCompany.field);

feels somewhat awkward and lacks the ability to pass additional function arguments.

Another suggestion mentioned using the prototype $(smth).on(event), but I've encountered issues trying to implement it, particularly with cross-browser compatibility. In fact, even in this simplified example Trouble with on('focus') in jsFiddle:

javascript ajax prototypejs dom-events

Answer 1

Answer №1

Why not create an ajax responder and add the methods once a request is done

Ajax.Responders.register({
    onComplete: function(transport) {
        MyCompany.field._initTextInputFields();
    }
});

NEW IDEA

Considering your input, how about observing the entire page, specifically the body, to detect if there's been an input event like so:

 $("#body").on("focus", "input[type=text]:not([readonly])", function(event, element) {
    // ....
 });

This method suggests just one observer that remains in place without needing removal, keeping all logic contained within.

Note that Event.on is only supported in prototype 1.7.

LATEST UPDATE

You could simply check for clicks instead, although this may not cover keyboard inputs but it could be a plausible solution.

Updated Fiddle

Answer 2

Why not create an ajax responder and add the methods once a request is done

Ajax.Responders.register({
    onComplete: function(transport) {
        MyCompany.field._initTextInputFields();
    }
});

NEW IDEA

Considering your input, how about observing the entire page, specifically the body, to detect if there's been an input event like so:

 $("#body").on("focus", "input[type=text]:not([readonly])", function(event, element) {
    // ....
 });

This method suggests just one observer that remains in place without needing removal, keeping all logic contained within.

Note that Event.on is only supported in prototype 1.7.

LATEST UPDATE

You could simply check for clicks instead, although this may not cover keyboard inputs but it could be a plausible solution.

Updated Fiddle

Preventing multiple bindings of an event handler to the same object using JS Prototypes

Answer №1

Similar questions

Interval function failing to update information on Jade template

Vue Plugin's array does not exhibit reactivity

What is the optimal method for generating numerous records across various tables using a single API request in a sequelize-node.js-postgres environment?

Is there a way to retrieve the JavaScript Console response code using Python and Selenium's execute_script method?

Having trouble retrieving the elements from the JSON array defined in EJS within the JavaScript script tags

Is there a solution to the Chrome issue "Require user interaction for beforeunload dialogs" that arises while running Cypress tests?

Executing a secondary function only once after a repeated condition has been met

Running a Node Fetch POST call with a GraphQL query

Step-by-step guide on crafting a scrolling marquee with CSS or Javascript

Interaction between Jquery and local server

How can I alter the color of the menu text when scrolling to the top of a webpage?

Troubleshooting the NullInjectorError in Angular - Service Provider Missing?

Ways to adjust the vAxis and hAxis labels to display as whole numbers

Encountered issue with Ajax post request without any additional details provided

Extract the color of an individual character

Tips for effectively transferring data to a modal box that is declared outside of the immediate scope

ASP.NET AJAX MaskedEditExtender is a powerful tool that allows developers

Building a bridge: How to integrate an existing Javascript library into Angular?

Gaining administrative privileges (sudo) to utilize NPM module within Node application

The website is plagued by the presence of unwanted hyperlinks