0

Buenas, estoy desarrollando un proyecto MVC que lista los eventos de una base de datos. Uno de los campos de los eventos es un checkbox y he conseguido que mediante ajax que cuando se hace "click" en él se cambie ese valor en la BD. Ahora quiero ir más allá y antes de cambiar el valor quiero mediante un modal pedir la aceptación o no del cambio, para que este sólo se produzca cuando se pulsa "Yes". El problema es que el cambio se produce antes de que acepte el cambio en el modal.

Dejo el html:

<tbody data-bind="foreach: events">
                <tr class="rowEvent">
                    <td><span 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, click: ChangeCheckValue" data-toggle="modal" data-target="#confirmModal"/>
                    </td>
                </tr>
            </tbody>

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Confirm</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to apply the change?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"  data-dismiss="modal">Yes</button>
                <button type="button" class="btn btn-default"  data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>
<!-- ----------------------------------------- -->

Este sería el javascript que tengo:

function ChangeCheckValue(event) {

var resolved = event.Resolved();
var id = event.Id();

        $.ajax({
            data: { Resolved: resolved, Id: id },
            url: '../Home/ChangeCheckValue',
            type: 'GET',
            dataType: 'text',
            success: function () {                    
            }
        });     
}

Ya he intentado que se ejecute la función "ChangeCheckValue()" en el atributo "onclick" del bottom de Yes, pero como está hecho con Knockout no sé cómo pasarle el event para obtener el valor del checkbox y su id.

Gracias, un saludo.

2 respuestas 2

0

Puedes realizarle un event.preventDefault() al inicio de la función para que no actué por método convencional y tome las funciones que le des.

1
  • No entiendo qué arreglo con eso.
    – Ace
    Commented el 1 dic. 2017 a las 10:24
0

Lo he solucionado al final de una manera poco ortodoxa.

            <tbody data-bind="foreach: events">
                <tr class="rowEvent">
                    <td><span 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, click: ChangeCheckValue" data-toggle="modal" data-target="#confirmModal" />
                    </td>
                    <td>
                        <button type="button" class="btn btn-xs btn-warning" data-bind="click: GetInformation" data-toggle="modal" data-target="#infoModal"><span class="glyphicon glyphicon-info-sign"></span></button>
                    </td>
                </tr>
            </tbody>



function Confirmation() {
confirm = true;
ChangeCheckValue(null);
}

function ChangeCheckValue(evento) {

if (confirm == true) {  //Comprueba si se ha confirmado o no el cambio. Hasta que no se haya confirmado no se realiza la acción
    $.ajax({
        data: { Resolved: resolved, Id: id },
        url: '../Home/ChangeCheckValue',
        type: 'GET',
        dataType: 'text',
        success: function () {
            confirm = false;
        }
    });
}
else {
    resolved = evento.Resolved();
    id = evento.Id();
}    
}

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.