JavaScript: Prototype event listener failing to trigger

Question

JavaScript: Prototype event listener failing to trigger

I have a Magento test store with an onepagecheckout extension that utilizes a onepagecheckout.js file. I am trying to add 'click' event observers to the payment radio buttons, but nothing happens when they are clicked.

The observers are being added to individual input elements using a javascript function:


addObservers: function () {
  $$('input[name="payment[method]"]').each(function (el) {
    el.observe('click', function () {
      checkout.update({
        'review': 1,
        'payment-changed': 1
      });
    });
  });
}

The elements being looped through in the code match the ids and names of the input elements:


el = input#p_method_bankpayment.radio
el = input#p_method_paypal_express.radio
el = input#p_method_cashondelivery.radio
el = input#p_method_phoenix_cashondelivery.radio

The update function is supposed to fetch new content via AJAX when the page is loaded, but it doesn't seem to be executed as there is no network activity visible when the events should be triggered.

You can view the installation here: (Add items to cart, proceed to checkout, but stop before finalizing)

I'm wondering why the observers are not functioning properly. Other installations with this extension are working fine. Any insights?

javascript magento prototype

Answer 1

Answer №1

Your input elements are currently hidden from view with the following style attribute:

style="display:none;"

This means that users cannot click on them. If you remove the display:none property using developer tools and then try to click the radio button, an alert saying 'Click' will appear.

Instead of relying on the click event, consider using a change event like this:

addObservers: function () {
   $$('input[name="payment[method]"]').each(function (el) {
    el.observe('change', function () {
      checkout.update({
        'review': 1,
        'payment-changed': 1
      });
    });
  });
}

Update: Upon further investigation, it seems that a change event may not be sufficient in this case because there are onclick attributes attached to each radiobutton. These onclick attributes do not trigger the onchange event. To work around this issue, you can manually trigger the onclick event using something like this:

onclick="payment.switchMethod('phoenix_cashondelivery')"

You can simulate this event by adding the following code:

$$('input[name="payment[method]"]').each(function (el) {
  el.observe('change', function () {
    $(this).simulate('click');
    checkout.update({
      'review': 1,
      'payment-changed': 1
    });
  });
});

Answer 2

Your input elements are currently hidden from view with the following style attribute:

style="display:none;"

This means that users cannot click on them. If you remove the display:none property using developer tools and then try to click the radio button, an alert saying 'Click' will appear.

Instead of relying on the click event, consider using a change event like this:

addObservers: function () {
   $$('input[name="payment[method]"]').each(function (el) {
    el.observe('change', function () {
      checkout.update({
        'review': 1,
        'payment-changed': 1
      });
    });
  });
}

Update: Upon further investigation, it seems that a change event may not be sufficient in this case because there are onclick attributes attached to each radiobutton. These onclick attributes do not trigger the onchange event. To work around this issue, you can manually trigger the onclick event using something like this:

onclick="payment.switchMethod('phoenix_cashondelivery')"

You can simulate this event by adding the following code:

$$('input[name="payment[method]"]').each(function (el) {
  el.observe('change', function () {
    $(this).simulate('click');
    checkout.update({
      'review': 1,
      'payment-changed': 1
    });
  });
});

JavaScript: Prototype event listener failing to trigger

Answer №1

Similar questions

The functionality of a JQuery post within a PHP loop is not functioning optimally

Tips for getting a plugin to function properly when the page is refreshed in Nuxt app

Pop-Up Buttons Generated in Real-Time

Ways to add the class "active" to the initial element in a Vue.js for loop

Split panel vertically with a draggable divider allowing you to customize the height of each section

Angular push introduces a new operator that leads to a MongoError being triggered

What could be the reason for Jest flagging CSS as untested instead of identifying untested functions?

Display a dropdown menu when the value of another dropdown is changed using .NET 2.0

Is it possible to load the response from the $.post function, which contains GIF content, into a JavaScript Image object

Binding data to an MVC grid component

Transfer a JSON object to a Java Class without relying on a servlet

Utilizing the fetch() method in Vuex to obtain a restful API

Achieve a new line break when the user hits the "Enter" key using HTML and JavaScript

Selenium error: Element is unclickable ... Another element is blocking the click, but go ahead and click

Combining multiple events into one function using jQuery

js specific to a button

Show a popover within a parent div that has limited visible space due to its hidden overflow

A guide on dynamically filling a dropdown menu based on the selection made in another dropdown using PHP and JSON data

Create a custom loading spinner for a jQuery AJAX request

Capture XHR requests and alter the response body