1

Estoy desarrollando un proyecto basado en MVC que lista los eventos almacenados en una base de datos. La tabla que muestra estos se genera con un foreach haciendo uso de la librería knockout. Necesito obtener el valor de la celda con el nombre del evento de cada fila para poder obtener de otra tabla de la base de datos la explicación sobre el tipo de evento. Esta información se debe mostrar cuando haces click en el botón de información que hay en cada fila.

El html es el siguiente:

    <tbody data-bind="foreach: events">
                <tr class="rowEvent">
                    <td><span id="spanNameEvent" data-bind="text: $data.NameEvent"></span></td>
                    <td><span data-bind="text: $data.Protocol"></span></td>
                    <td><span data-bind="text: $data.IP"></span></td>
                    <td><span data-bind="text: $data.Port"></span></td>
                    <td><span data-bind="text: $data.AccountID"></span></td>
                    <td><span data-bind="text: $data.SessionID"></span></td>
                    <td><span data-bind="text: $data.DateEvent"></span></td>
                    <td><span data-bind="text: $data.SecurityImpact"></span></td>
                    <td>
                        <input type="checkbox" data-bind="checkedValue: $data.Resolved" />
                    </td>
                    <td>
                        <button type="button" class="btn btn-xs btn-warning" onclick="GetInformation()" data-toggle="modal" data-target="#infoModal"><span class="glyphicon glyphicon-info-sign"></span></button>
                    </td>
                </tr>
            </tbody>

A la función "GetInformation()" que se ejecuta cuando se pincha en el botón le debería pasar como parámetro el "data.NameEvent" de la fila correspondiente a ese botón. ¿Alguna idea?

Dejo también la función para que quede más claro lo que quiero hacer:

function GetInformation(eventName) {
var eventName;
$.ajax({
    data: { EventName: eventName },
    url: '../Home/GetInformation',
    type: 'GET',
    dataType: 'text',
    success: function (result) {
        document.getElementById('modaltitle').innerHTML = eventName;
        document.getElementById('modaltext').innerHTML = result;
    }
});
}

Un saludo y gracias.

2 respuestas 2

1

Primero, este fragmento de código:

function GetInformation(eventName) {
    var eventName;
    $.ajax({
        data: { EventName: eventName },
        url: '../Home/GetInformation',
        type: 'GET',
        dataType: 'text',
        success: function (result) {
            document.getElementById('modaltitle').innerHTML = eventName;
            document.getElementById('modaltext').innerHTML = result;
        }
    });
}

Nunca va a funcionar porque estás redefiniendo eventName. Tienes que quitar esa declaración de variable.

Segundo, si en vez de ocupar el listener nativo onclick utilizar el click-binding de Knockout, la documentación dice:

When calling your handler, Knockout will supply the current model value as the first parameter.

De manera que si en vez de hacer:

<button type="button" onclick="GetInformation()">

usas

<button data-bind="click: GetInformation">

Ese handler recibirá el objeto $data que en este caso representa un event a tu función, y ésta quedaría:

function GetInformation(event) {

    var eventName = event.NameEvent();

    $.ajax({
        data: { EventName: eventName },
        url: '../Home/GetInformation',
        type: 'GET',
        dataType: 'text',
        success: function (result) {
            document.getElementById('modaltitle').innerHTML = eventName;
            document.getElementById('modaltext').innerHTML = result;
        }
    });
}

Nótese que estoy usando var eventName = event.NameEvent(); en vez de var eventName = event.NameEvent; porque me parece (hace 4 años que no uso Knockout) que lo que recibes sigue siendo un ViewModel, y por tanto tienes que usar el getter en vez de acceder a la propiedad directamente.

1
  • Muchas gracias, funciona perfecto. Había mirado ya lo de hacerlo por "click-binding de Knockout" pero no sabía cómo llevarlo a mi caso. Gracias
    – Ace
    Commented el 29 nov. 2017 a las 11:20
1

Como se tardó en responder a mi pregunta ya había conseguido hacerlo de otra manera. Lo pongo por si a alguien le sirve:

function GetInformation(cual) {
//Find raw
var $d = $(cual).parent("td");

var row = $d.parent().parent().children().index($d.parent());
//

alert(document.getElementsByClassName("myprefix")[row].innerHTML)
var eventName = document.getElementsByClassName("myprefix")[row].innerHTML;
$.ajax({
    data: { EventName: eventName },
    url: '../Home/GetInformation',
    type: 'GET',
    dataType: 'text',
    success: function (result) {
        document.getElementById('modaltitle').innerHTML = eventName;
        document.getElementById('modaltext').innerHTML = result;
    }
});
}
  • Html:

    <tbody data-bind="foreach: events">
                <tr class="rowEvent">
                    <td><span data-bind="text: $data.NameEvent, attr: {'class': 'myprefix'}"></span></td>
                    <td><span data-bind="text: $data.Protocol"></span></td>
                    <td><span data-bind="text: $data.IP"></span></td>
                    <td><span data-bind="text: $data.Port"></span></td>
                    <td><span data-bind="text: $data.AccountID"></span></td>
                    <td><span data-bind="text: $data.SessionID"></span></td>
                    <td><span data-bind="text: $data.DateEvent"></span></td>
                    <td><span data-bind="text: $data.SecurityImpact"></span></td>
                    <td>
                        <input type="checkbox" data-bind="checkedValue: $data.Resolved" />
                    </td>
                    <td>
                        <button type="button" class="btn btn-xs btn-warning" onclick="GetInformation(this)" data-toggle="modal" data-target="#infoModal"><span class="glyphicon glyphicon-info-sign"></span></button>                                                              
                    </td>
                </tr>
            </tbody>
    
1
  • Si funciona, entonces es válido. JS se aprende a punta de workarounds y parches más que de el estudio riguroso de patrones de diseño y lectura de documentación. Es el espíritu del desarrollador JS
    – ffflabs
    Commented el 29 nov. 2017 a las 11:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.