quisiera saber si alguien me puede orientar en lo siguiente: se trata de un formulario para solicitudes de etiquetas, bueno la idea es que conforme el usuario va solicitando, se va llenando una tabla con javaScript, al tiempo, se alimenta la tabla de la base de datos a travez de ajax, (con ayuda de ésta comunidad llegué hasta ahí); ahora no logro hacer que se borre una fila en caso de que el usuario quiera cancelar alguna de las solicitudes; a continuación muestro el codigo q tengo:
<!DOCTYPE html>
<html>
<head>
<title>Solicitudes</title>
<link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
function guardar() {
var _planta = document.getElementById("pl_1").value;
var _solicitante = document.getElementById("solicitante_1").value;
var _codPT = document.getElementById("codigoP_1").value;
var _descPT = document.getElementById("descripcion_1").value;
var _lote = document.getElementById("lote_1").value;
var _ff = document.getElementById("ffab_1").value;
var _fv = document.getElementById("fv_1").value;
var _vida = document.getElementById("vidaUtil_1").value;
var _codE = document.getElementById("codigoE_1").value;
var _descE = document.getElementById("descripcionE_1").value;
var _cant = document.getElementById("cant_1").value;
var datos = {
"planta" : _planta,
"codigoUsu" : _solicitante,
"cod_PT" : _codPT,
'desc_PT' : _descPT,
'lote' : _lote,
'ffab' : _ff,
'fven' : _fv,
'vida_util' : _vida,
'cod_etq' : _codE,
'desc_etq' : _descE,
'cantidad' : _cant
};
$.ajax({
data: datos,
url: 'guardarSolicitud.php',
type: 'post',
success: function (response) {
if(response==1)
alert('Solicitud exitosa.')
else
alert('Por favor intente de nuevo.')
}
});
var i = 1;
//--------------------------------------------FILAS-----------------------------------------------------------------
//contador para asignar id al boton que borrara la fila
var fila = '<tr class="solid" id="row' + i + '"><td>' + _planta + '</td><td>' + _solicitante + '</td><td>' + _codPT + '</td><td>' + _descPT + '</td><td>' + _lote + '</td><td>' + _ff + '</td><td>' + _fv + '</td><td>' + _vida + '</td><td>' + _codE + '</td><td>' + _descE + '</td><td>' + _cant + '</td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">Borrar</button></td></tr>';
i++;
var btn = document.createElement("TR");
btn.innerHTML=fila;
document.getElementById("mytable").appendChild(btn);
document.getElementById("pl_1").value ="";
document.getElementById("solicitante_1").value = "";
document.getElementById("codigoP_1").value ="";
document.getElementById("descripcion_1").value = "";
document.getElementById("lote_1").value = "";
document.getElementById("ffab_1").value ="";
document.getElementById("fv_1").value = "";
document.getElementById("vidaUtil_1").value = "";
document.getElementById("codigoE_1").value = "";
document.getElementById("descripcionE_1").value ="";
document.getElementById("cant_1").value = "";
document.getElementById("codigoP_1").focus();
};
$(document).on('click', '.btn_remove', function borrar(e) {
e.preventDefault();
id = jQuery(this).parent().attr("row");
$.ajax({
data: id,
url: 'borrarSol.php',
type: 'post',
success: function (response) {
jQuery(this).parent().remove();
if(response==1)
alert('registro borrado.')
else
alert('no borra.')
}
});
});
</script>
</head>
<body>
<div class="container">
<form id="form" method="post" >
<div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
<label>Planta:</label>
<select id="pl_1" class='planta' required name="planta">
<option value="0">- Select -</option>
<?php
$sql_plantas = "SELECT * FROM plantas";
$pl_data = mysqli_query($con,$sql_plantas);
while($row = mysqli_fetch_assoc($pl_data) ){
$id_pl = $row['id_pl'];
$nombre_pl = $row['nombre_pl'];
echo "<option value='".$id_pl."' >".$nombre_pl."</option>";
}
?>
</select>
</div>
<div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
<label>Solicitante:</label>
<input type='text' class="solicitante" id='solicitante_1' name="codigoUsu">
</div>
<div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
<label>Codigo PT:</label>
<input type='text' class='codigoP' id='codigoP_1' placeholder='Enter código' name="cod_PT">
</div>
<div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
<label>Descripción PT:</label>
<input type='text' class="descripcion" id='descripcion_1' name="desc_PT" >
</div>
<div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
<label>Lote:</label>
<input type='text' class="lote" id='lote_1' name="lote">
</div>
<div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
<label>Fecha de fabricación:</label>
<input type='date' class='ffab' id='ffab_1' onchange="calcularFV()" name="ffab">
</div>
<div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
<label>Fecha de vencimiento:</label>
<input type='text' class="fv" id='fv_1' name="fven" >
</div>
<div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
<label>Vida Util:</label>
<input type='number' class="vidaUtil" id='vidaUtil_1' onchange="calcularFV()" name="vida_util">
</div>
<div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
<label>Código de etiqueta:</label>
<input type='text' class='codigoE' id='codigoE_1' placeholder='Enter código' name="cod_etq">
</div>
<div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
<label>Descripción de etiqueta:</label>
<input type='text' class="descripcionE" id='descripcionE_1' name="desc_etq">
</div>
<div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
<label>Cantidad:</label>
<input type='text' class="cant" id='cant_1' name="cantidad">
</div>
<button type="button" id="btn_guardar" name="btn_guardar" onclick="guardar()">Guardar</button><br><br>
</form>
<div id="adicionados">
<table id="mytable" border="1">
<tr>
<th>Planta</th>
<th>Solicitante</th>
<th>Codigo PT</th>
<th>Descripción PT</th>
<th>Lote</th>
<th>Fecha de fabricación</th>
<th>Fecha de vencimiento</th>
<th>Vida Util</th>
<th>Código de etiqueta</th>
<th>Descripción de etiqueta</th>
<th>Cantidad</th>
<th>Cancelar</th>
</tr>
</table>
</div>
</div>
</body>
</html>
no me muestra error por consola pero estoy casi segura que la falla está en esta linea:
id = jQuery(this).parent().attr("row");
la verdad es que no se como captar la fila que debe borrar y supongo que no está enviando nada al archivo php que debe ejecutar la instrucción de borrar.Sin embargo dejo también el codigo php x si me equivoco, pues soy aprendiz.
<?php
include "config.php";
if(isset($_POST['id'])) {
$idE = $_POST['id'];
$query = "DELETE FROM solicitudes WHERE id_solicitud = $idE";
$result = mysqli_query($con, $query);
if ($result){
echo "1";
}else {
echo "0";
}
}
?>
Agradezco mucho cualquier colaboración
id = jQuery(this).parent().attr("row");
por esto:id = $(this).parent().attr("row");
y haz unconsole.log(id);
revisa la consola de Javascript y dinos si está capturando el id o no. O pon unalert("ID:" + id);
var $mRow = $(this).closest("tr"); // La fila donde está el botón var $mTds = $mRow.find("td"); // Todos los <td> de la fila
Y luego el ID lo buscas según el índice de la celda, si es la primeravar id=$mTds[0].text();
donde[0]
indicaría la 1ª celda de la fila.