Auto-Fill asynchronously by custom API action and client script not working

PHPMaker General Discussion (PHPMaker)
1

Hi, i’ve a lookup field with Allow sort/search and Text input for search that should fill two custom field in add page (it’s not necessary to save those value in the DB).
Thi is my code:
Api_action

$app->get('/getInfoImpianto/{codice}', function ($request, $response, $args) {
    $codiceCommessa = $args["codice"] ?? null;
    if ($codice !== null) {
        $response = $response->withJson(ExecuteRow("SELECT Agente,  ManutContr FROM ViewListImp WHERE Impianto = '" . AdjustSql($codice)."'"));
        }
    return $response; 
});

Add/copy → StartupScript

$("#x_codice").change(function() {
    $.get(ew.getApiUrl(["getInfoImpianto", $(this).val()]), function(res) {
        if (res) {
            $("#x_c_commerciale").val(res.Agente);
            $("#x_c_manutentore").val(res.ManutContr);

        }
    });
});

Now, the SQL is correct and x_codice should be correct (the field name for the lookup is codice so #x_codice should be correct.
I dont get why it’s not working. But looks like $(“#x_codice”).change(function()don’t trigger the function, because in Browser → Console → Network i don’t see any Api call to my function.
Any idea how to solve this? thanks!

2

Double check your code.

This part:
if ($codice !== null) {should be:
if ($codiceCommessa !== null) {

3

Sorry, i wrote in the forum wrong, the original code is:

$app->get('/getInfoImpianto/{codice}', function ($request, $response, $args) {
    $codice= $args["codice"] ?? null;
    if ($codice !== null) {
        $response = $response->withJson(ExecuteRow("SELECT Agente,  ManutContr FROM ViewListImp WHERE Impianto = '" . AdjustSql($codice)."'"));
        }
    return $response; 
});

But it’s not working. It seems that the code is not activated for the change of x_code.

4

You should check the id of the input element, see Inspect HTML element.

5

this is the inspection of the select part in my code:

<select id="x_codice" name="x_codice" class="form-select ew-select select2-hidden-accessible" data-select2-id="fnote_impiantiadd_x_codice" data-table="note_impianti" data-field="x_codice" data-value-separator=", " data-placeholder="Impianto" tabindex="-1" aria-hidden="true">
            <option value="100000020" data-select2-id="select2-data-111-gsae">TEST</option></select>

$(“#x_codice”) should be correct, am i right?i’ve added:

console.log("Evento change generato");

to check if $(“#x_codice”).change(function() is activated, but it’s not working.

6

Double check this input element’s id, make sure it is valid.

#x_c_commerciale
#x_c_manutentore
7

Ok, I’ve found a strange behavior. If the add modal dialog is disabled, the script is working. I receive ‘Event change generated’ in my console log and all the data in my ‘Inspect → network’ and the fields are filled.
But when i enable again the modal dialog nothing is working anymore, no more ‘Event change generated’ in my console log and no data in my ‘Inspect → network’.

8

You should check if it uses Modal dialog, then make sure you have already included the modal’s id, too.

9

what do you mean with modal’s id?

10

Ok, now it’s working.
have to add .modal to every $(“#…”).
Now my code is:

$(".modal #x_codice").on("change", function() {
    console.log("Evento change generato");
    var codice = $(this).val();
    $.get(ew.getApiUrl(["getInfoImpianto", codice]), function(res) {
        if (res) {
            $(".modal #x_c_commerciale").val(res.Agente);
            $(".modal #x_c_manutentore").val(res.ManutContr);
        }
    });
});
$(".modal #x_c_commerciale").prop("disabled", true);
$(".modal #x_c_manutentore").prop("disabled", true);
11

Each modal dialog should have the id selector. For example, one of the id that used by the generated web application is ew-modal-dialog.You may check from the generated views/layout.php file:

<!-- modal dialog -->
<div id="ew-modal-dialog" class="modal" ...
12

Thank you very much for your kind help.the code works in this way too:

$("#ew-modal-dialog #x_codice").on("change", function() {
    console.log("Evento change generato");
    var codice = $(this).val();
    $.get(ew.getApiUrl(["getInfoImpianto", codice]), function(res) {
        if (res) {
            $("#ew-modal-dialog #x_c_commerciale").val(res.Agente);
            $("#ew-modal-dialog #x_c_manutentore").val(res.ManutContr);
        }
    });
});
$("#ew-modal-dialog #x_c_commerciale").prop("disabled", true);
$("#ew-modal-dialog #x_c_manutentore").prop("disabled", true);

Thanks again for your help!!