Return datatable of select

Asked

Viewed 50 times

0

I’m using the datatable with ajax, getting among others a column with select, but I don’t know why onchange does not work. Follow the return of ajax:

{"data":
  [[
    1,
    "17020161",
    "Marina Costa Vasconcelos",
    "<select data-id='17020161' id='status_aluno17020161' style='background-color: #00C851; color:white' class='form-control status' ><option style='background-color: #00C851; color:white' value='1' >Presente<\/option>\n<option style='background-color: #ff4444; color:white' value='2'>Falta<\/option><\/select>",
    "",
    "",
    ""
  ],[
    2,
    "12080243",
    "Talita de Souza Menezes",
    "<select data-id='12080243' id='status_aluno12080243' style='background-color: #00C851; color:white' class='form-control status' ><option style='background-color: #00C851; color:white' value='1' >Presente<\/option>\n<option style='background-color: #ff4444; color:white' value='2'>Falta<\/option><\/select>",
    "",
    "",
    ""
  ]]
}

That the function below does not work:

$(document).ready(function() {  
    $('.status').on('change', function() {
        //$(".status").change(function(){
            var valor = this.value;
            var matricula = $(this).data("id");
            alert(matricula);
            alert(valor);

            if (valor == 1) { 
                $("#status_aluno"+matricula).css("background-color", "#00C851"); 
            } 
            if (valor == 2) { 
                    $("#status_aluno"+matricula).css("background-color", "#ff4444");
            }
            if (valor == 3) { 
                    $("#status_aluno"+matricula).css("background-color", "#00C851"); 
            } 
            if (valor == 4) { 
                    $("#status_aluno"+matricula).css("background-color", "#ffbb33"); 
            }
            if (valor == 5) { 
                    $("#status_aluno"+matricula).css("background-color", "#ffbb33"); 
            }
            if (valor == 6) { 
                    $("#status_aluno"+matricula).css("background-color", "#ff4444"); 
            }
        }
    );
});
ajax select

  • I figured it was something like that, it worked, thank you very much

1 answer

0

It doesn’t work because you’re not adding the function to your select, because this javascript runs before it exists in the document.

The way this would work is by using delegated events. You add the event Handler to the parent element, and use a selector to designate when it will fire. It would be something like this:

$(document).on('change', '.status', function() {
   // aqui mantém tudo
}

Here I add the event on document, but it will only fire when the selector '.status' is found, and even works for elements added after attaching the event to document. Another detail, it would be even more interesting you add in <form>, instead of document, where this your <select> will be.

More information

http://api.jquery.com/on/

Browser other questions tagged ajax select

You are not signed in. Login or sign up in order to post.