What could be causing the count button to malfunction on my Oracle APEX form?

Question

What could be causing the count button to malfunction on my Oracle APEX form?

I am working on creating 2 buttons that can adjust the quantity of products on an orderline, either increasing or decreasing it.

https://i.sstatic.net/kFOkP.png

My goal is to have the plus and minus buttons modify the quantity value when clicked.

I attempted to implement JavaScript in the global functions and added the JavaScript through a dynamic action on the buttons, but unfortunately, it did not yield the desired outcome.

Below is the link to my page in the editor: https://i.sstatic.net/HD8iU.png and here is the global function page: https://i.sstatic.net/7xc2c.png

javascript oracle-apex

Answer 1

Answer №1

By utilizing the apex javascript APIs, you can achieve this task in a much more declarative manner. There is no need for event listeners (the dynamic action will handle those for you) or manually setting values. This method will result in a more maintainable code base. The only code required is demonstrated in the example below (for a single button - creating the button to subtract should be straightforward)

To implement this, create a dynamic action that triggers on a button click with a true action of type "execute javascript code" and include the following code:

let num;
if (apex.item( "P11_AMOUNT" ).isEmpty()) {
  num = 0;
} else {
  num = parseInt(apex.item( "P11_AMOUNT" ).getValue());
}  
apex.item( "P11_AMOUNT" ).setValue(num + 1);

The code snippet provided above is for the "increment" button.

Answer 2

By utilizing the apex javascript APIs, you can achieve this task in a much more declarative manner. There is no need for event listeners (the dynamic action will handle those for you) or manually setting values. This method will result in a more maintainable code base. The only code required is demonstrated in the example below (for a single button - creating the button to subtract should be straightforward)

To implement this, create a dynamic action that triggers on a button click with a true action of type "execute javascript code" and include the following code:

let num;
if (apex.item( "P11_AMOUNT" ).isEmpty()) {
  num = 0;
} else {
  num = parseInt(apex.item( "P11_AMOUNT" ).getValue());
}  
apex.item( "P11_AMOUNT" ).setValue(num + 1);

The code snippet provided above is for the "increment" button.

Answer 3

Answer №2

To make the variable a variable and not a string literal, simply remove the single quotes around it:

let P11_AMOUNT = 0;

add.addEventListener('click', function(){
    P11_AMOUNT += 1;
    int.innerHTML = P11_AMOUNT;
});

remove.addEventListener('click', function(){
    P11_AMOUNT -= 1;
    int.innerHTML = P11_AMOUNT;
});

Answer 4

To make the variable a variable and not a string literal, simply remove the single quotes around it:

let P11_AMOUNT = 0;

add.addEventListener('click', function(){
    P11_AMOUNT += 1;
    int.innerHTML = P11_AMOUNT;
});

remove.addEventListener('click', function(){
    P11_AMOUNT -= 1;
    int.innerHTML = P11_AMOUNT;
});

What could be causing the count button to malfunction on my Oracle APEX form?

Answer №1

Answer №2

Similar questions

What is the reason for the checkboxes in vuejs not being rendered with the checked attribute set

The initial loading of jQuery DataTables shows duplicate entries

How can the WordPress Gutenberg Popover be positioned to follow the cursor?

Several SVG Components failing to function properly or displaying differently than anticipated

A guide on incorporating router links within a list component in a React project

What could be the reason behind the improper display of JavaScript for ID overlay2?

Building a Modular Socket.io System using Express 4

The Symfony API failed to generate a response

What is the best way to access a particular property of an object?

Jasmine secretly observes the behavior of Angular services

How come the behavior of Array.prototype.push() results in creating an endlessly nested array when used on itself?

Encountering an error with NextJs & Strapi when utilizing the getStaticPaths functionality

A guide on integrating Pug templating engine with ReactJS

Typescript error: The property 'set' is not found on type '{}'

"Having trouble getting the onChange function to work with Material-UI's Select

Using AngularJS to pass a parameter to a directive's template

Issue with adding events using .on() to dynamically added items in datatables when using ajax based fnDraw()

The ion-datetime in Ionic 4 ensures that the floating label always remains visible, even when the input

The comparison between local variables and data can result in a significant drop in performance

Discovering the technique to dynamically load various content using jQuery in a div based on its