Welcome to the nuBuilder Forums!

Join our community by registering and logging in.
As a member, you'll get access to exclusive forums, resources, and content available only to registered users.

Assign a value to a variable field of an HTML object within a subform

Questions related to customising nuBuilder Forte with JavaScript or PHP.
Post Reply
cuadradoja
Posts: 30
Joined: Thu Sep 01, 2022 3:42 am
Has thanked: 1 time

Assign a value to a variable field of an HTML object within a subform

Unread post by cuadradoja »

Hello,

I have an HTML object in a subform to display a gauge chart. Within the subform, I also have a field called ind_rango, where any value can be entered to be displayed with the image. I can do this process in a normal form without any problems, but when I try to do it within a subform, it doesn't work. The question I have about this is how I should express the variable: var ir so that the value entered can be displayed in the HTML object. The code I use is the following:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>Indicador</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        
        var ir = parseFloat(nuSubformRowObject(event.target.id, 'ind_rango').val());
        
        google.charts.load('current', {
            'packages': ['gauge']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Label', 'Value'],
                ['%', ri]
            ]);
            
            var options = {
                width: 400,
                height: 200,
                max: 120,
                redFrom: 0,
                redTo: $r1,
                yellowFrom: $r1,
                yellowTo: 70,
                greenFrom: 70,
                greenTo: 100,
                blueFrom: 100,
                blueTo: 120,
                yellowColor: "#FFFF93",
                redColor: "#FF3300",
                greenColor: "#99FF33",
                minorTicks: 5,
                titleTextStyle: {
                    fontSize: 4
                }
            };
            var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>
<body>
    <h1>"% decrease"</h1>
    <style>
        h1 {
            font-size: 12px;
        }
    </style>
    <div id="chart_div" style="width: 400px; height: 200px;"></div>
</body>
</html>
Top
kev1n
nuBuilder Team
Posts: 4449
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 75 times
Been thanked: 489 times
Contact:
Contact kev1n

Re: Assign a value to a variable field of an HTML object within a subform

Unread post by kev1n »

Hello,

You declared a variable as ir, but you're using ri instead.
Top
cuadradoja
Posts: 30
Joined: Thu Sep 01, 2022 3:42 am
Has thanked: 1 time

Re: Assign a value to a variable field of an HTML object within a subform

Unread post by cuadradoja »

Hello again kev1n...

That's true, I adjusted it, but it still doesn't show the value I specified. In fact, it doesn't display any image through the object. :?
Top
kev1n
nuBuilder Team
Posts: 4449
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 75 times
Been thanked: 489 times
Contact:
Contact kev1n

Re: Assign a value to a variable field of an HTML object within a subform

Unread post by kev1n »

Could you please share the working code you're using on the main form?
Top
cuadradoja
Posts: 30
Joined: Thu Sep 01, 2022 3:42 am
Has thanked: 1 time

Re: Assign a value to a variable field of an HTML object within a subform

Unread post by cuadradoja »

Of course, here it is:

Code: Select all

// ** DESACTIVA ENCABEZADO DEL SUBFORMULARIO
function nuEncabezado(id) {
    const scrollDiv = $('#' + id + 'scrollDiv');
    scrollDiv.css({
        top: 0, height: $('#' + id).css('height')});
}

nuEncabezado('ind');


// ** COLOCA NUMERO CONSECUTIVO EN EL SUBFORMULARIO
function autoNum() {
    var a = nuSubformObject('ind').rows.length - 1;
    var i = '#ind' + nuPad3(nuSubformObject('ind').rows.length - 2) + 'ind_num';
    $(i).val(a).addClass('nuEdited');
}


// ** DESACTIVA LOS CAMPOS DE PLUS Y RANGO DEL SUBFORMULARIO
function nuRang() {
    var s = $('#' + event.target.id).attr('data-nu-prefix');
    var r = "ind_rango";
    var p = "ind_plus";
    var r1 = $('#' + s + r).nuEnable();
    var p1 = $('#' + s + p).nuEnable();
}


// ** COLOCA LOS VALORES Y COLORES DE LOS CAMPOS DEPENDIENDO DEL NIVEL SELECCIONADO
function nuNivel() {
    // Declaración de variables comunes para ambos niveles
    var s = $('#' + event.target.id).attr('data-nu-prefix');
    var n = "ind_nivel";
    var p = "ind_plus";
    var r = "ind_rango";
    var ri = "ind_ri";
    var rf = "ind_rf";
    var yi = "ind_yi";
    var yf = "ind_yf";
    var gi = "ind_gi";
    var gf = "ind_gf";
    var wi = "ind_wi";
    var wf = "ind_wf";

    var n2 = $('#' + s + n).val();
    var p2 = $('#' + s + p);
    var r2 = $('#' + s + r).val();

    // Las siguientes variables se obtienen de los elementos del DOM y se asignan a variables con nombres más claros.
    var riElement = $('#' + s + ri);
    var rfElement = $('#' + s + rf);
    var yiElement = $('#' + s + yi);
    var yfElement = $('#' + s + yf);
    var giElement = $('#' + s + gi);
    var gfElement = $('#' + s + gf);
    var wiElement = $('#' + s + wi);
    var wfElement = $('#' + s + wf);

    // Lógica para manejar los casos 'Ascendente' y 'Descendente'
    if (n2 === 'Ascendente') {
        if (!p2.is(":checked")) {
            // Lógica para el caso 'Ascendente' sin 'plus'
            wiElement.nuDisable();
            wfElement.nuDisable();
            riElement.val('0').nuDisable().change().css({'background-color': '#FF4B4B'}); //Color Rojo
            rfElement.css({'background-color': '#FF4B4B'}); //Color Rojo
            yiElement.nuDisable().css({'background-color': '#FFFF93'}); //Color Amarillo
            yfElement.css({'background-color': '#FFFF93'}); //Color Amarillo
            giElement.nuDisable().css({'background-color': '#99FF33'}); //Color Verde
            gfElement.val(r2).nuDisable().change().css({'background-color': '#99FF33'}); //Color Verde
        } else {
            // Lógica para el caso 'Ascendente' con 'plus'
            wiElement.nuDisable();
            wfElement.val(r2).change().nuDisable();
            riElement.val('0').change().nuDisable().css({'background-color': '#FF4B4B'}); //Color Rojo
            rfElement.css({'background-color': '#FF4B4B'}); //Color Rojo
            yiElement.nuDisable().css({'background-color': '#FFFF93'}); //Color Amarillo
            yfElement.css({'background-color': '#FFFF93'}); //Color Amarillo
            giElement.nuDisable().css({'background-color': '#99FF33'}); //Color Verde
            gfElement.css({'background-color': '#99FF33'}); //Color Verde
        }
    } else if (n2 === 'Descendente') {
        if (!p2.is(":checked")) {
            // Lógica para el caso 'Descendente' sin 'plus'
            riElement.nuDisable().css({'background-color': 'white'}); //Color Blanco
            rfElement.nuDisable().css({'background-color': 'white'}); //Color Blanco
            yiElement.val('0').change().nuDisable().css({'background-color': '#99FF33'}); //Color Verde
            yfElement.css({'background-color': '#99FF33'}); //Color Verde
            giElement.nuDisable().css({'background-color': '#FFFF93'}); //Color Amarillo
            gfElement.css({'background-color': '#FFFF93'}); //Color Amarillo
            wiElement.nuDisable().css({'background-color': '#FF4B4B'}); //Color Rojo
            wfElement.val(r2).change().nuDisable().css({'background-color': '#FF4B4B'}); //Color Rojo
        } else {
            // Lógica para el caso 'Descendente' con 'plus'
            riElement.val('0').change().nuDisable().css({'background-color': 'white'}); //Color Blanco
            rfElement.css({'background-color': 'white'}); //Color Blanco
            yiElement.nuDisable().css({'background-color': '#99FF33'}); //Color Verde
            yfElement.css({'background-color': '#99FF33'}); //Color Verde
            giElement.nuDisable().css({'background-color': '#FFFF93'}); //Color Amarillo
            gfElement.css({'background-color': '#FFFF93'}); //Color Amarillo
            wiElement.nuDisable().css({'background-color': '#FF4B4B'}); //Color Rojo
            wfElement.val(r2).change().nuDisable().css({'background-color': '#FF4B4B'}); //Color Rojo
        }
    }
}
Top
Post Reply

Return to “Custom Code”