client side event

PHPMaker General Discussion (PHPMaker)
1

Hi,

I am using the following code for “Client side event”.
I am using it for master detail and my master has 10 records.
Now when I change the record nr 1 then the record nr 10 is also changed too.

I am usig v2024.

{ // keys = event types, values = handler functions
       "change": function(e) {
        var $row = $(this).fields(); // Get an object of all fields, each property is a jQuery object of the input element(s) of a field
        
        // Convert to number and validate 'gewichtung' is between 0 and 1
        var gewichtung = parseFloat($row["gewichtung"].val()) || 0;
        if (gewichtung < 0 || gewichtung > 1) {
            alert("Gewichtung must be between 0 and 1."); // Alert, or handle the error as necessary
            $row["score"].val('').prop('readonly', true); // Clear the score field or handle as necessary
            return; // Exit the function if the 'gewichtung' is not within the range
        }
        
        // Convert to number and validate 'points' is between 0 and 100
        var points = parseFloat($row["points"].val()) || 0;
        if (points < 0 || points > 100) {
            alert("Points must be between 0 and 100."); // Alert, or handle the error as necessary
            $row["score"].val('').prop('readonly', true); // Clear the score field or handle as necessary
            return; // Exit the function if the 'points' are not within the range
        }
        
        // If both 'gewichtung' and 'points' are valid, proceed with the calculation
        var st = gewichtung * points; // Calculate
        st = st.toFixed(2); // Format the score to have two digits after the decimal point
        $row["score"].val(st).prop('readonly', true).css('text-align', 'right'); // Set the result to the 'score' field and make it read-only
        }
    }

mpol_ch

2

Note that the client side event applies to each row. You better use let instead of var, otherwise $row is global. However, even if it is global, the other rows should not affected. Where did you add above code?You should debug by:

  1. Disable compress project .js,
  2. Add a break point in your code in your browser, see Debug JavaScript,
  3. Enter something in your input to trigger the change, at the break point, View the current call stack.

If your “change” listener is fired more than once, check the call stack and try to find out why.

3

Hi,
the code ist entered into:
Edit Tag / Cleint side eventsmpol_ch

4

arbei wrote:

You should debug by:

  1. Disable > compress project .js> ,
  2. Add a break point in your code in your browser, see > Debug JavaScript> ,
  3. Enter something in your input to trigger the change, at the break point, > View the current call stack> .

If your “change” listener is fired more than once, check the call stack and try to find out why.

5

Hi,

I switched to “Startup Scripts” instead of Client side event.
Now, it is also updating the rows 11, 12, etc when I changed row 1 but at least the calculation are correct.

$("input[data-field='x_gewichtung'],input[data-field='x_points']").change(function() { // Field1 has multiple inputs in Grid-Add/Edit so they should be selected by data-field attribute
let gewichtung = $(this).fields("gewichtung").value(); // Set value to FieldA in the same row
let points= $(this).fields("points").value(); // Set value to FieldA in the same row
   
  // Check if gewichtung is between 0 and 1
   if (gewichtung < 0 || gewichtung > 1) {
 // Show an alert if gewichtung is out of range
  alert("Gewichtung must be between 0 and 1 for example 0.4. The entered value is " + gewichtung + ".");
  $(this).fields("score").value("check").prop('readonly', true).css('text-align', 'right');
  return; // Exit the function to prevent further execution
  }

 // Check if points is between 0 and 100
if (points < 0 || points > 100) {
// Show an alert if points is out of range
alert("Points must be between 0 and 100. The entered value is " + points + ".");
$(this).fields("score").value("check").prop('readonly', true).css('text-align', 'right');
return; // Exit the function to prevent further execution
}

 let rs= $(this).fields("gewichtung").value() * $(this).fields("points").value();
    $(this).fields("score").value(rs.toFixed(2)).prop('readonly', true).css('text-align', 'right');
});

mpol_ch

6

Don’t avoid debugging JavaScript in browser, better familiarize with it, otherwise you can only guess. Using client side event and Startup Script are exactly the same.