0

Buenas, estoy desarrollando un proyecto basado en MVC que hace uso de Knockout. En este se listan en una tabla los eventos que hay en una base de datos. Hay un campo en los eventos que indica si este está resuelto o no, y para ello uso un checkbox. Cuando en la vista se hace un cambio en el checkbox he tenido que forzar con un "return true" en la función javascript para que el "tick" que sale dentro se cambie (si estaba marcado que se quite y al revés).

El problema es que como tengo hecho que se cree un modal de confirmación del cambio antes de realizar el cambio en la DB, si este es afirmativo funciona bien, pero si se rechaza la confirmación el tick del checkbox cambia igual (por el return true).

No sé cómo hacer para que el cambio del tick en el checkbox dependa de si se confirma en el modal o no.

Dejo el html que crea la tabla:

            <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>
        </table>
    </div>

        <!-- 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" onclick="Confirmation()" data-dismiss="modal">Yes</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>
<!-- ----------------------------------------- -->

El .js que realiza la petición para que se haga el cambio a la DB:

var confirm = false;
var resolved;
var id;

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();
}    
return true;
}

La función que ayuda a que la petición ajax se haga sólo cuando se haya confirmado el cambio:

function Confirmation() {
confirm = true;
ChangeCheckValue(null);
}
2
  • No es claro lo que quiere lograr, usted quiere que si cancelan la confirmación, el check no quede seleccioando?
    – Michael
    Commented el 4 dic. 2017 a las 21:27
  • Que si estaba marcado antes de la confirmación siga marcado, que no tenga efecto haber pulsado. Y que si no estaba marcado que siga sin marcarse.
    – Ace
    Commented el 5 dic. 2017 a las 13:56

1 respuesta 1

1

Puede hacer lo siguiente:

en el footer de su modal agregue la function confirmation() en ambos botones pasando como parámetro un booleano dependiendo la confirmación:

<div class="modal-footer">
   <button type="button" 
           class="btn btn-default" 
           onclick="Confirmation(true)" <!--confirmación positiva-->
           data-dismiss="modal">
        Yes
   </button>
   <button type="button" 
           class="btn btn-default"
           onclick="Confirmation(false)" <!--confirmación negativa-->
           data-dismiss="modal">
        No
   </button>
</div>

En su function comfirmation() obtiene el booleano y lo pone en una decisión:

function Confirmation(respuesta) {
   // si es verdadero cambia los valores en la DB
   if(respuesta){
     ChangeCheckValue(null);
   }
   // si es falso deja el input check como estaba
   else{
       //obtiene el checkbox;
       var inputCheck = document.getElementById("checkbox");
       //obtiene el valor checked del checbox
       var estado = inputCheck.checked; //esto retorna un booleano

       //como el check cambio, entonces se revierte
       //si esta seleccionado se quita el check
       // si no esta seleccionado se pone check
       if (estado){
         inputCheck.checked = false;
       }
       else{
         inputCheck.checked = true;
       }
   }
}

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.