Ajax Events vs Events on change

I have a situation where I need to do some processing when a field value is change (Ajax events on_blur, on_click or on_change)

I also need a related field to be reload with the new information (EVENTS on change)

The problem is that the EVENTS on change is executed before the Ajax events is process completely.

Result the value is change internally but is not showing the right information on screen.

CHATPGPT says:

In Scriptcase, the sequence in which events are executed can sometimes lead to situations where the expected outcome is not displayed correctly. To handle this situation, you’ll need to ensure that the AJAX event completes its processing before the dependent field is updated. Here is a step-by-step approach to solving this issue:

Define the AJAX Event:
    Create an AJAX event (e.g., onBlur, onClick, or onChange) on the primary field. This event will handle the processing and update the value.

Trigger Field Update After AJAX Event:
    Ensure that the dependent field is only updated after the AJAX event completes. This may require an additional step to manually trigger the update.

Step-by-Step Solution

Create AJAX Event:
    Go to the field for which you need to create the AJAX event.
    Select the desired event (onBlur, onClick, or onChange).
    Write the PHP code to process the value and perform the necessary operations.

php

// Example of an onChange event for field1
{field2} = my_processing_function({field1});

Reload Dependent Field:

Use a macro to reload the dependent field after the AJAX event processing is complete.
This can be done by using the sc_ajax_javascript() macro to call a JavaScript function that reloads the dependent field.

php

// At the end of the onChange event
sc_ajax_javascript(‘reloadField2’);

JavaScript Function to Reload Field:

Create a JavaScript function in the form to reload the dependent field.
This function can be added to the form's JavaScript methods.

javascript

function reloadField2() {
    sc_field_display('field2', 'on');
    sc_ajax_refresh();
}

Full Example

PHP Code for AJAX Event (onChange for field1):

php

// Field1 onChange event
{field2} = my_processing_function({field1});
sc_ajax_javascript(‘reloadField2’);

JavaScript Function in Form:

javascript

<script>
function reloadField2() {
    // Optionally, you can hide and show the field to force a refresh
    sc_field_display('field2', 'off');
    sc_field_display('field2', 'on');

    // Or simply refresh the whole form if the field is not being updated
    sc_ajax_refresh();
}
</script>

Form Settings:
    Ensure that the form's JavaScript methods are enabled and the script is correctly placed in the form's header or footer.

By following these steps, you ensure that the dependent field (field2) is reloaded only after the AJAX event for the primary field (field1) has completed its processing. This approach helps to synchronize the field values and ensure that the correct information is displayed on the screen.

1 Like

Thank you, I will look at it

Hi, I try the solution and it doesn’t work directly

Turning off and on the field does nothing used like that
sc_field_display('field2', 'off'); sc_field_display('field2', 'on');
And sc_ajax_refresh is not applicable because I am using 9 pages and many blocks

But I use the base of the post to find a working solution

  • Turn ON Events on Change and choose the field that need to be refresh

  • In the Ajax events (onBlur, onClick, or onChange) first turn off the field that need to be refresh

  • Process the data

  • Sleep(2), whitout it it doesn’t always work

  • Turn back on the field that need to be refresh

      sc_field_display('Field', 'off');
    
      process the data here
    
      sleep(2);
    
      sc_field_display('Field', 'on');
    

It work most of the time, but it’s not perfect

It need to be fix in Scriptcase, so the Events on Change is process after the Ajax Events

1 Like

resolved with sc_ajax_javascript(‘javascript_method’, param1); (inside ajax event after update the value of the field)
In javascript_method:
document.getElementById(‘id_sc_field_<your_field_name>’).value = param1;

In my case Field is a Double Select, I cannot use this solution

Thanks