Change checkbox when running javascript

Question

Change checkbox when running javascript

Navigation

#1 by (1 votes)

0

Hi, I am developing a project based on MVC that uses Knockout. In this, the events in a database are listed in a table. There is a field in the events that indicates if this is solved or not, and for that I use a checkbox. When in the view a change is made in the checkbox I had to force it with a "return true" in the javascript function so that the "tick" that comes out is changed (if it was marked that is removed and vice versa).

The problem is that since I have made a change confirmation modality before making the change in the DB, if it is affirmative it works fine, but if the confirmation is rejected the checkbox tick changes the same (for the return true).

I do not know how to make the change of the tick in the checkbox depends on whether it is confirmed in the modal or not.

I leave the html that creates the table:

            <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>
<!-- ----------------------------------------- -->

The .js that makes the request to make the change to the 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;
}

The function that helps the ajax request to be made only when the change has been confirmed:

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

javascript mvc checkbox

asked by Ace 04.12.2017 в 21:18

source

1 answer

c # deserialize xml within a class function search by string

score 1 · Accepted Answer

You can do the following:

in the footer of your modal add the function confirmation() in both buttons passing as parameter a booleano depending on the confirmation:

<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>

In your function comfirmation() you get the booleano and put it in a decision:

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;
       }
   }
}