toogle does not work in while () PHP

Question

toogle does not work in while () PHP

Navigation

#1 by (0 votes)

1

Colleagues.

I have a system to register the student's absence, it was done individually, that is, I selected a particular student and used that toogle:

Functionalcode

<divclass="form-group">
    <label for="NomeEscola">O aluno faltou?</label>
    <div class="input-group">
        <div id="radioBtn" class="btn-group">
            <a class="btn btn-primary btn-sm active" data-toggle="presenca" data-title="N" style="border: 1px solid #000">Não</a>
            <a class="btn btn-danger btn-sm notActive" data-toggle="presenca" data-title="S" style="border: 1px solid #000">Sim</a>
        </div>
        <input type="hidden" name="Faltou" id="presenca">
    </div>
    </div>

<script type="text/javascript">
$('#radioBtn a').on('click', function(){
  var sel = $(this).data('title');
  var tog = $(this).data('toggle');
  $('#'+tog).prop('value', sel);

  $('a[data-toggle="'+tog+'"]').not('[data-title="'+sel+'"]').removeClass('active').addClass('notActive');
  $('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
</script>

Individually it works, but the structure has changed. The school now selects a class and listing the students in that class, looks like this:

TheproblemisthatwhenwelistallstudentswithinthePHPloop,tooglestopsworking.Seethecodebelow:

$c=0;while($jmListar=mysqli_fetch_object($sqlListar)){$listar.="<tr>";
         $listar .= "<td>".$jmListar->NomeCompleto."</td>";
         $listar .= "<td>Matemática</td>";
         $listar .= "<td>
         <div id=\"radioBtn\" class=\"btn-group\">
           <a class=\"btn btn-primary btn-sm active\" data-toggle=\"presenca[".$c."]\" data-title=\"N\" style=\"border: 1px solid #000\">Não</a>
           <a class=\"btn btn-danger btn-sm notActive\" data-toggle=\"presenca[".$c."]\" data-title=\"S\" style=\"border: 1px solid #000\">Sim</a>
         </div>
         <input type=\"hidden\" name=\"Faltou\" id=\"presenca\">
         </td>";
         $listar .= "</tr>";
    $c++;
 }

JQUERY

<script type="text/javascript">
$('#radioBtn a').on('click', function(){
  var sel = $(this).data('title');
  var tog = $(this).data('toggle');
  $('#'+tog).prop('value', sel);

  $('a[data-toggle="'+tog+'"]').not('[data-title="'+sel+'"]').removeClass('active').addClass('notActive');
  $('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
</script>

php jquery

asked by anonymous 24.06.2017 / 21:59

1 answer

The Map (google maps API - javascript) stops working when I add a function in the script! JavaScript DOM Parser incompatible with document?

score 0 · Accepted Answer

I managed to resolve. I put JQuery inside the PHP method, but out of the loop. I do not know if it would be the correct way, but by eqto it is more functional. I'll put the complete code:

CSS

/* CSS REQUIRED */
.state-icon {
    left: -5px;
}
.list-group-item-primary {
    color: rgb(255, 255, 255);
    background-color: rgb(66, 139, 202);
}

/* DEMO ONLY - REMOVES UNWANTED MARGIN */
.well .list-group {
    margin-bottom: 0px;
}

#radioBtn .notActive{
    color: #3276b1;
    background-color: #fff;
}

PHP / Jquery

public function listarUsuarios(){

$sqlListar = mysqli_query(.....);

    $listar = "<table class='table table-striped'>
                 <thead>
                  <tr>
                   <th>Aluno</th>
                   <th>Matéria</th>
                   <th>Falta</th>
                   </thead>
                   <tbody>";
      $c = 1;
      while($jmListar = mysqli_fetch_object($sqlListar)){
             $listar .= "<tr>";
             $listar .= "<td><i class=\"fa fa-caret-right\" aria-hidden=\"true\"></i> ".$jmListar->NomeCompleto."</td>";
             $listar .= "<td>".$jmListar->Materia."</td>";
             $listar .= "<td>
             <div id=\"radioBtn\" class=\"btn-group\">
               <a class=\"btn btn-primary btn-sm active\" data-toggle=\"presenca$c\" data-title=\"N\" style=\"border: 1px solid #000\">Não</a>
               <a class=\"btn btn-danger btn-sm notActive\" data-toggle=\"presenca$c\" data-title=\"S\" style=\"border: 1px solid #000\">Sim</a>
             </div>
             <input type=\"hidden\" name=\"Faltou\" id=\"presenca$c\">
             </td>";
             $listar .= "</tr>";
        $c++;
      }
      $listar .= "<script type=\"text/javascript\">
                    $('#radioBtn a').on('click', function(){
                      var sel = $(this).data('title');
                      var tog = $(this).data('toggle');
                      $('#'+tog).prop('value', sel);

                      $('a[data-toggle=\"'+tog+'\"]').not('[data-title=\"'+sel+'\"]').removeClass('active').addClass('notActive');
                      $('a[data-toggle=\"'+tog+'\"][data-title=\"'+sel+'\"]').removeClass('notActive').addClass('active');
                    })
                    </script>";
      return $listar;
}