This topic is locked

Guide 44 – Pass values ​​between windows and from the server

11/11/2022 1:20:47 PM
PHPRunner Tips and Tricks
fhumanes author

img alt
This problem was raised by a user and I have made an example that I think may be of interest to other PHPRunner users .

The problem arose with the example of the QR reader , in the example a "wide" camera window is always shown and he wanted it to be optional, that is, if you wanted to capture information through the QR, you would press a button to make this capture and then continue with the input data of the form.

Once the case was resolved, the ability to capture the value of the QR was added, for the system to retrieve information on the server and load the retrieved values ​​in other fields of the form.

Goal

  • Pass information from a “child” popup window to the main “parent” window, directly via JavaScript.
  • Collected a value in a field, access the server, retrieve several values and load the same in the fields of the form.

DEMO : https://fhumanes.com/scannerQR2/

Technical Solution

The example tries to capture Products and in the ADD option, it is where the example has been programmed.

img alt

As test information where data is retrieved are these 2 product codes. You can get a QR with the value you want at this URL: https://fhumanes.com/qr/

img alt

To capture the value of the QR, a button (with 3 states) has been programmed and from it a popup screen is created to capture it. The code that has been used is:

var win = Runner.displayPopup( {
url: "scannerqr_dummy_add.php",
width: 900,
height: 500,
header: 'Read QR of the product',

afterCreate: function(popup) {
window.popup = popup;
}

});
return false;

Very important the statement “ window.popup = popup; “, because it is the one that will give us the possibility of referencing the window, in the new window.

In the ADD page, in the “JavaScript onload event” event I have put:

// ---------------------------------------------------------------------------------
var ctrl_Product = Runner.getControl(pageid, 'productNumber');

window.ctrl_Product = ctrl_Product; // Export other pages

// ---------------------------------------------------------------------------------

var ctrl_amount = Runner.getControl(pageid, 'amount');
var ctrl_text = Runner.getControl(pageid, 'text');

// ---------------------------------------------------------------------------------
ctrl_Product.on('blur', function (e) {
// console.log('The "blur" event has jumped');
getValor(ctrl_Product,ctrl_amount, ctrl_text );
});

// ------------------------------------------------------------------------------------
function getValor(ctrl,f1,f2) {
pvalor = ctrl.getValue();
$.ajax({
type: 'POST',
url: './ajax_get_values.php',
data: {
valor: pvalor
}
}).done(function (msg) {
// console.log("Into of the function");
// console.log(msg);
response_as = JSON.parse(msg);
// console.log(response_as.status);
if (response_as.status == 'OK' )
{
f1.setValue(response_as.amount);
f2.setValue(response_as.text);
}
return ;
}).fail(function (jqXHR, textStatus, errorThrown) {
alert("The following error occured: " + textStatus + " " + errorThrown);
});
}

In this code there are 2 parts:

  • To be able to reference fields of the “parent” form.
  • The statement “ window.ctrl_Product = ctrl_Product; “
  • To retrieve the values ​​of the fields from the server is used;
    . “blur” event, loss of the focus of the form to trigger the capture of information.
    . “ getValor ” function so that using AJAX the values ​​of the fields are retrieved in JSON format.

The PHP code to retrieve the data from the server is the program "ajax_get_values.php" which has this code:

<?php
require_once("include/dbcommon.php"); // DataBase PHPRunner
$data_arr = array(); // Response
if (!isset($_POST['valor'])) { // Control of the call and verification of the existence of the parameter
$data_arr['status'] = 'KO';
$data_arr['msg'] = "Please provide a Valor.";
echo json_encode($data_arr, JSON_UNESCAPED_UNICODE);
die();
}
$valor = $_POST['valor'];
$data_arr['status'] = 'KO';
$rs = DB::Query("SELECT amount, text FROM scannerqr2_product WHERE productNumber = '$valor' ");
while( $data = $rs->fetchAssoc() )
{
$data_arr['status'] = 'OK';
$data_arr['amount'] = $data["amount"];
$data_arr['text'] = $data["text"];
}
echo json_encode($data_arr, JSON_UNESCAPED_UNICODE);
?>

img alt

If you are interested in this topic, more details and the sources of the example in this link: https://fhumanes.com/blog/guias-desarrollo/guia-44-pasar-valores-entre-ventanas-y-del-servidor/