Ajax show information depending on an option select

0
  

teacher.php

<?php
  include('php/conexion.php');

  if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $grupo = $_POST['grupo'];
    $getNotas = mysqli_query($con,"SELECT * FROM notas WHERE grupo='$grupo'") or die ('error al obtener datos de grupos');
  }

  $login=1;
  $getNotas="";

  $getDocente = mysqli_query($con,"SELECT * FROM docentes WHERE ID='$login'") or die ('error al obtener datos de alumno');
  $getGrupo = mysqli_query($con,"SELECT * FROM grupos WHERE docente='$login'") or die ('error al obtener datos de grupos');
?>

<!DOCTYPE html> .....

//Donde se muestra la lista de grupos.
<div class="container" id="evaluacion" style="display:none;">
    <div class="tipo-apilados" style="width:300px; height:140px; border-radius:3px;">
      <label class="aviso_usuario">Para iniciar la evaluación selecciona los siguientes datos:</label>
      <label class="info_texto">Seleccion un grupo</label>
      <select name="grupos" class="editText" id="grupo_evaluar">
         <option selected value="0">Mis grupos</option>
    <?php
    $row=mysqli_fetch_array($getGrupo,MYSQLI_ASSOC);
      echo "<option value='".$row['ID']."'>".$row['nombre']."</option>";
    ?>
      </select>
      <button  id="d_evaluacion" type="button" name="button" class="botonGuardar">Iniciar evaluación</button>
    </div>

<!--Tabla de notas de alumnos-->
    <?php
    if (!empty($grupo)){
          //Creamos tabla
          $row_cnt = mysqli_num_rows($getNotas);
          echo "
          <div class='tipo-apilados' style='width:700px; height:auto; border-radius:3px; display:none;' id='info_evaluacion'>
            <label class='aviso_usuario'>Modificar calificación de los estudiantes</label>
            <label style='padding:3px; border-radius:3px; color:#555; background-color:#EEE; font-size:13px;'>".$row_cnt." Alumnos registrados</label>

            <input type='text' name='' value='' placeholder='Buscar alumno por nombre' class='editText'>
            <table style='width:100%; margin-top:5px;'>
              <tr>
                <th style='width:150px;'>Alumno</th>
                <th style='width:10px; font-size:12px; background-color:#FFF;'>Final</th>
                <th style='width:20px; font-size:12px; background-color:#FFF;'>Unidad 1</th>
                <th style='width:20px; font-size:12px; background-color:#FFF;'>Unidad 2</th>
                <th style='width:20px; font-size:12px; background-color:#FFF;'>Unidad 3</th>
                <th style='width:20px; font-size:12px; background-color:#FFF;'>Unidad 4</th>
                <th style='width:20px; font-size:12px; background-color:#FFF;'>Opciones</th>
              </tr>
              ";
              while($row = mysqli_fetch_array($getNotas,MYSQLI_ASSOC))
               {
                echo "
                <tr>
                  <td>".$row['alumno']."</td>
                  <td>".$row['promedio']."</td>
                  <td>".$row['unidad_1']."</td>
                  <td>".$row['unidad_2']."</td>
                  <td>".$row['unidad_3']."</td>
                  <td>".$row['unidad_4']."</td>
                  <td><button type='button' name='button' class='botonNormal' style='padding:2px; font-size:12px; width:90%;'>Editar</button></td>
                </tr>
                </table>
                ";
              }
        }
     ?>
  

Jquery by pressing the button

    $(document).ready(function(){
  $("#d_evaluacion").click(function(){
    $seleccion = $('#grupo_evaluar option:selected').html();
    if ($seleccion == "Mis grupos") {
          $("#mensaje_error").fadeIn();
          $("#mensaje_error").html("Debe seleccionar un grupo a evaluar");
          $("#mensaje_error").delay(1000).fadeOut();
        } else {
        $("#info_evaluacion").slideDown();
        $.ajax({url:'/ingles/teacher.php',method:'post',data:{"grupo":"1"}});
      }
  });

});

It does not show me anything, that is to say, apparently when sending the information by ajax, you can see that I send a "1" is the code of a group, the teacher.php does not have anything.

    
asked by DoubleM 26.11.2017 в 11:57
source

1 answer

0

Review the points indicated here and try.

If you give an error, please comment what type of error you are giving.

Before proceeding to what I indicate, verify that you have your subject organized as indicated in the NOTE , at the end of the answer. If you have doubts about what I say, comment ...

If it is clear to you what I say in the note, then proceed:

  • Add the jQuery library in the <head> section of the HTML if you do not have it:

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript">
    
  • In the HTML add a div element to see the response obtained from the server:

    <div id="result"></div>     
    
  • Add the methods that handle the responses of the Ajax request (done, fail).

    $(function() {
    
        $("#d_evaluacion").click(function(){
    
            /*Aquí el código jQuery que quieras*/
            /*Me centraré en la petición Ajax*/
            var request = $.ajax({
                url: 'index.php',
                method: 'post',
                data: {"grupo":"1"},
                dataType: "html"
            });
    
            request.done(function(response) {
                console.log(response);
                $("#result").html(response);            
            });
    
            request.fail(function(jqXHR, textStatus) {
                alert("Hubo un error: " + textStatus);
            });
    
        });
    });
    
  • NOTE: The question is not clearly stated how the files are. For it to work:

    • a. The code indicated in this response must be in the file that makes the call to Ajax. In that file is where the button with id = d_evaluacion is, which when pressed invokes the Ajax call.

    • b. The PHP code that brings the data from the server must be in a file called index.php in the same folder of the file indicated in (a) . And it must return HTML text with the response from the server.

    I put this note because you do not indicate in the question that you have things organized that way.

        
    answered by 27.11.2017 в 00:47