0

hola tengo un problema el cual me tiene ocupado desde hace tiempo y no he podido resolver. resulta que estoy llamando contenido de mis tablas(mysql) por medio de ajax para no recargar la pagina. todo perfecto hasta este punto. el problema es que no se como pasarle una variable a esa consulta generada con ajax para que el contenido de mi tabla se muestre dependiendo el valor de la variable.

vamos por parte para que se entienda Mi pagina contiene una sección de proyectos, y al seleccionar un proyecto me envía a otra pagina donde se muestra todo los contenidos de ese mismo proyecto. lo que yo pretendo es pasar a la consulta que me muestra el contenido de mis tablas el id del proyecto en cuestión.

lo que tengo echo es que me muestra el contenido de todos los proyectos y yo solo quiero, el de el proyecto que se elije.

empezare con la pagina principal: index.php

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!---JQUERY--->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

</head>
<body>
    <!--- el siguiente formulario es invisible y es el encargado de
     contener el id de mi proyecto el cual se ejecuta automáticamente
      cuando carga la pagina por primera vez y se envía el valor de el
       input a la pagina encargada de la consulta de la tabla--->
<script>
window.onload = function(){
  document.getElementById('envIdPro').click();
}


</script>
<form id="formVarProyecto">
<input id="enviandoIdPro" type="number" value="<?php echo $idProyectos?>" style="visibility: hidden;width:0px;height:0px;">
<input type="submit" id="envIdPro" style="visibility: hidden;width:0px;height:0px;">
</form>



<!---//////////////la tabla que muestra los materiales de ese proyecto////////////////--->

<table id="tablaMaterialesProyecto" class="tablaInsumos">
          <thead>
            <tr>
            <th title="Nombre Material" style="visibility: hidden;width:0px;">id</th>
              <th title="Nombre Material">MATERIAL</th>
              <th title="Marca Material">MARCA</th>
              <th title="Modelo de el Material">MODELO</th>
              <th title="Unidad de Medida de el Material">MEDIDA</th>
              <th title="Cantidad de Material Asignada al proyecto">CANTIDAD</th>
              <th title="Valor de El material Por Unidad de medida">VALOR</th>
              <th title="Valor Total Por Cantidad de Materiales">TOTAL</th>
              <th title="Valor Total Por Cantidad de Materiales">ACCIONES</th>

            </tr>
          </thead>
          <tbody id="tasks"><!---el contenido lo paso por ajax a traves del id de el tbody--->
          </tbody>
        </table>



<script src="app.js"></script><!---este es el archivo ajax que ejecuta todo sin recargar la pagina-->

</body>
</html>

ahora el archivo ajax llamado app.js

    $(document).ready(function() {     //función que se ejecuta automáticamente junto con idex
     enviaVariable(); //envío el formulario apenas se cargue la pagina con el id
    fetchTasks();//ejecutando esta función se cargar la tabla apenas cargue index.php//
// llenar tabla materiales
  function fetchTasks() { 

    /*se guarda todo en una función para cuando agreguemos algo se recargue al pulsar el botón de guardar*/
    $.ajax({
      url: 'tablaMateriales.php',
      type: 'GET',
      success: function(response) {
        const tasks = JSON.parse(response);
        let template = '';
        tasks.forEach(task => {
          template += `
                  <tr taskId="${task.IDM}">

                  <td style="visibility: hidden;width:0px;">${task.IDM}</td>
                  <td>${task.Material}</td>
                  <td>${task.Marca}</td>
                  <td>${task.Modelo}</td>
                  <td>${task.Medida}</td>
                  <td>${task.Unidades}</td>
                  <td>${task.Valor}</td>
                  <td>${task.Total}</td>
                  <td>
                  <button title="Eliminar" class="Eliminar-Materiales btn btn-danger btn-sm">
                  <i class="fa fa-trash"></i>
                  </button>


    </td>


                      </tr>
                    `
            });
            $('#tasks').html(template);
          }
        });
      }

      //función encargada de enviar formulario automáticamente al cargar la pagina
      function enviaVariable(){
$('#formVarProyecto').submit(function(e){
  const postData5 = {

      idPro : $('#enviandoIdPro').val(),

  }
  $.post('tablaMateriales.php', postData5, function(response){

});
    e.preventDefault();
});
}
    });

ahora el archivo donde se ejecuta la consulta llamado tablaMateriales.php vuelvo a decir que me funciona el de cargar la tabla pero cuando le paso la condición where y el id de mi proyecto no la carga... el problema es que no me funciona mi manera de enviar la variable que contiene el id del proyecto

    <?php

  include '../conexionDB/db.php';

  $idProyecto = $_POST['idPro'];  /*aquí recibo la variable enviada por el formulario */

  $query = "SELECT * from vista_materiales_consumidos WHERE idProyecto =$idProyecto";
  $result = mysqli_query($conexion, $query);
  if(!$result) {
    die('Query Failed'. mysqli_error($conexion));
  }

  $json = array();
  while($row = mysqli_fetch_array($result)) {
    $json[] = array(
      'IDM' => $row['IDM'],
      'Material' => $row['Material'],
      'Marca' => $row['Marca'],
      'Modelo' => $row['Modelo'],
      'Medida' => $row['Medida'],
      'Unidades' => $row['Unidades'],
      'Valor' => $row['Valor'],
      'Total' => $row['Total']
    );
  }
  $jsonstring = json_encode($json);
  echo $jsonstring;
?>

espero alguien me ayude me tiene preocupado este tema

4
  • Utiliza data jQuery ajax() W3Schools
    – Jose
    el 27 feb. 2020 a las 18:54
  • 2
    Tu tipo en el ajax es GET y en el PHP estás utilizando $_POST, Debería ser $_GET
    – Bicho
    el 27 feb. 2020 a las 19:03
  • checa también el nombre de tus variables, los inputs
    – Cesarin
    el 27 feb. 2020 a las 19:05
  • estan bien los nombres recuerden que mensione que estoy enviando por ajax el 27 feb. 2020 a las 19:27

3 respuestas 3

1

Sea GET, no le estas pasando la variable idPro en tu consulta a ajax, hay varias formas, esta es la mas facil;

<form id="formVarProyecto">
    <input id="enviandoIdPro" type="number" value="<?php echo $idProyectos?>" style="visibility: hidden;width:0px;height:0px;">
    <input type="submit" id="envIdPro" style="visibility: hidden;width:0px;height:0px;">
</form>


$.ajax({
    url: 'tablaMateriales.php',
    type: 'GET'| 'POST',
    data: {idPro : $('#enviandoIdPro').val()}
    success: function(response) {
      //response
    }
});

o

$.get(`tablaMateriales.php?idPro=${$('#enviandoIdPro').val()}`, function(response){console.log(response)});


$idProyecto = $_POST['idPro'] | $_GET['idPro'];

| => or puede tomas el primero o segundo

si tienes mas de un parametro a cargar podrias usar

$("form").serialize() | new FormData(document.getElemtById("idform"))

1
1

con respecto a tu problema te comento que trabajar el dinamismo en un sistema web es algo complicado. La forma mas fácil de hacerlo es utilizando un framework que te permita realizar estas operaciones mas fácilmente. Te propongo unos para que los revises cuando tengas interés Ejm: Vue.js, React.js Para hacerlo sin esto, debes manipular eventos, el evento click por ejemplo. Lo pues capturar con una función javascript que te permita enviar como parametro el ID o clave primaria del elemento que estas dando click.

Ejemplo:

<button onclick="myFunction(parametro)">Click me</button>

En la variable parametro iría el ID de tu tabla.

Espero haber podido ayudarte.

Saludos,

1
  • muchas gracias no tenia idea de las otras maneras que me acabas de mencionar. soy recién egresado y mis conocimientos son muy básico. te agradezco mucho lo que me recomiendas utilizar. averiguare sobre esos framework el 27 feb. 2020 a las 21:17
0

Creo que tu problema es el siguiente en tablaMateriales.php esperar recibir un valor con esta linea:

$idProyecto = $_POST['idPro'];

pero en el form del index

<form id="formVarProyecto">
<input id="enviandoIdPro" type="number" value="<?php echo $idProyectos?>" style="visibility: hidden;width:0px;height:0px;">
<input type="submit" id="envIdPro" style="visibility: hidden;width:0px;height:0px;">
</form>

No tienes ningún id o name que se llame 'idPro'

una forma de hacer esto es poner un input oculto:

<input type="hidden" class="form-control" id="idPro" name="idPro" value="<?=$idProyectos?>">

Este input toma el valor que trae "$idProyectos" , cuando haces el submit, el POST toma el valor que tenga y lo cachas en donde lo vas utilizar..

Aquí solo comprueba que estas enviando el valor que ocupas..

4
  • mira fijate en este script <script> window.onload = function(){ document.getElementById('envIdPro').click(); } </script> pues es el encargado de autoclickear el boton al recargar la pagina,,, y cuando se autoclikea el trabajo de enviar el contenido de el input lo hace esta funcion function enviaVariable(){ $('#formVarProyecto').submit(function(e){ const postData5 = { idPro : $('#enviandoIdPro').val(), } $.post('tablaMateriales.php', postData5, function(response){ }); e.preventDefault(); }); } que es hay donde esta el idPro el 27 feb. 2020 a las 19:16
  • Una disculpa no habia visto esas lineas que mencionas, otro detalle que ya te habían mencionado haces una peticion GET $.ajax({ url: 'tablaMateriales.php', y por el otro lado esperas un POST quizás podría ser por ahí el asunto
    – Cesarin
    el 27 feb. 2020 a las 19:34
  • muchas gracias por dedicar tu tiempo. are lo que ya me han dicho de cambiar a GET. les comento pronto mis resultados el 27 feb. 2020 a las 20:09
  • @AlvaroMartinezRiquelme de nada. Puedes utilizar GET o POST lo unico que tienes que cuidar es que sea en ambas partes, donde envias y donde recibes.
    – Cesarin
    el 27 feb. 2020 a las 20:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.