Hola Tengo un problema con load. Estoy haciendo un crud con Ajax y php
Tengo un menu contextual para eliminar una elemento de una fila, todo funciona muy bien el problema es cuando elimino una fila y vuelvo a solicitar el menu contextual ya no me sale, pero si recargo la pagina si me sale. Estoy utilizando Ajax, entonces de logica no quiero refrescar la pagina a cada rato.
CODIGO PHP
<?php
include("conexion.php");
$conexion =new MySQLi($host,$user,$pw,$bd)or die("Problema con el host");
$resultado = mysqli_query($conexion,"SELECT * FROM productos"); //Consulta select para seleccionar datos
while ($fila = mysqli_fetch_array($resultado)) //Recorro todos los proyectos y los asigno a la variable $fila
{//En la parte de abajo Al frente de la variable fila coloco unos corchetes asi []
// Dentro de esos corchetes especifico el nombre que quiero que coloque
//Esto depende del nombre de la fila en la Base de datos
//En mi base de datos tengo id, nombreproyecto y nombreintegrantes.
//En las lineas siguientes comparo el numero id de distribuidor para despues traer el nombre y colocarlo
//Antes salia el numero id y se colocaba en la tabla, pero no sabia que distribuidor o lugar era solo aparecia
//un numero, por eso es que comparo el id busco en la tabla y traigo el nombre
$result = mysqli_query($conexion,"SELECT marca FROM distribuidor WHERE id_distribuidor='$fila[id_distribuidor]'");
$row = mysqli_fetch_assoc($result);//Como es un array toca con este metodo"mysqli_fetch_assoc($result)" para almacenar la Variable
$distribuidor=$row['marca'];//Guardo la Variable del array a otra, para que no me salga error STRING algo...
$resulta = mysqli_query($conexion,"SELECT nombre_ubicacion FROM lugar WHERE id_lugar='$fila[id_lugar]'");
$row = mysqli_fetch_assoc($resulta);
$lugar=$row['nombre_ubicacion'];
echo "<tr class='pro'>";
echo "<td>$fila[id_productos]</td>
<td>$fila[detalle]</td>
<td>$fila[precio_entrada]</td>
<td>$fila[precio_salida]</td>
<td>$fila[cantidad]</td>
<td>$fila[iva]</td>
<td>$fila[fecha_ingreso]</td>
<td>$fila[fecha_vencimiento]</td>
<td>$lugar</td>
<td>$fila[estado]</td>
<td>$distribuidor</td>";
echo "<tr>";
}
?>
CODIGO HTML
<div class="col-md-12 tablaproductos">
<table> <!-- Tabla para mostrar los Productos -->
<tr> <!-- Columna de titulos -->
<th width="60px"><b>Id</b></th><!-- Filas con titulos -->
<th width="300px"><b>Nombre</b></th>
<th width="300px"><b>Precio Entrada</b></th>
<th width="300px"><b>Precio salida</b></th>
<th width="300px"><b>Cantidad</b></th>
<th width="300px"><b>Iva</b></th>
<th width="300px"><b>Fecha Ingreso</b></th>
<th width="300px"><b>Fecha Vencimiento</b></th>
<th width="300px"><b>Lugar</b></th>
<th width="300px"><b>Estado</b></th>
<th width="300px"><b>Distribuidor</b></th>
</tr>
<tbody class="tablaproductosinfo">
<?php
include("traerproducto.php"); // Traigo la tabla. OJO no sirve el btn elimnar
?>
</tbody>
</table>
</div>
CODIGO JAVASCRIPT
$(".tablaproductosinfo tr").on("contextmenu", function(e){ //Cuando haga click derecho sobre la tablaproductos,
id= $(this).find('td').eq(0).html(); // Asi captura un array de los elementos de selecciono en td en la posicion 0
nombre= $(this).find('td').eq(1).html(); // Asi captura un array de los elementos de selecciono en td en la posicion 1
pentrada = $(this).find('td').eq(2).html();//Precio entrada
psalida= $(this).find('td').eq(3).html();//Precio salida
cantidad = $(this).find('td').eq(4).html();
iva = $(this).find('td').eq(5).html();
fingreso= $(this).find('td').eq(6).html();//Fecha Ingreso
fvencimineto = $(this).find('td').eq(7).html();//Fecha vencimientos
lugar = $(this).find('td').eq(8).html();
estado= $(this).find('td').eq(9).html();
distribuidor = $(this).find('td').eq(10).html();
// alert("Esto que es "+ id);
// alert("SOLICITO.....x: "+e.pageX+" y: "+e.pageY); Este alert es para ver las cordenadas en x y y del clik derecho
//En la siguienes variables capturo alto y ancho de la tabla y del menu, con el fin de ubicar de una manera correcta
// el menu. Porque tenia problemas al dar click en un esquina de la tabla provocando que el menu dañara el esquema de la
// web, genraba sroll, porque mostraba el menu corrido. Debido a eso me toco hacer un algoritmo para evitar eso
// me toco sumar la altura los dos container que estaban arriba de la tabla(logo y herramientas). porque eso genereba
// que la cordenada y del menu apareciera muy arriba.
var anchotablaproductos = $(".tablaproductos").width(); //Capturo el ancho de la tabla
var altotablaproductos = $(".tablaproductos").height(); // Capturo el alto de la tabla
var anchomenu = $("#menucliderecho").width(); // Capturo el ancho del menu
var altomenu = $("#menucliderecho").height();// Capturo el alto del menu
var altologo=$(".logo").height();// Capturo el alto del logo
var altoherramientas=$(".herramientas").height();// Capturo el alto de herramientas
var sumaaltos= altologo+altoherramientas+10; //Ese 30 son los margenes de logo, herramientas y titulo-principal
var pasoeny = altotablaproductos+sumaaltos; // ACA LE RESTO A LA TABLA EL ALTO DEL MENU
// SIN LA SUMA + SUMAALTOS EL MENU ME APARECIA MUY ARRIBA, ES POR ESO QUE DECIDO TRAER LA ALTURA DE LOS CONTENEDORES DE arriba
// Una vez sumada la posicion del menu sale correcta
var pasoenx = anchotablaproductos+35; //Aca solo le asigno el ancho de la tabla para que no se salga de la tabla. NOSE COMO ??? ajjajaja
// ACA VERIFICO SI AL DARLE CLICK SE PASO DE LOS LIMITES, Y HAGO QUE NO ROMPA LA web
// Si este algoritmo el menu se mostraba rompiendo la web
if (e.pageY>pasoeny && e.pageX>pasoenx) // Si se paso en X y en Y
{
// alert("Se paso en X y Y ohhh my god tio");
$("#menucliderecho").css({'display':'block', 'left':pasoenx, 'top':pasoeny, 'background-color':'orange'});
}
else if (e.pageX>pasoenx)//Si se pasa en y ponga el menu mas arriba
{
// alert("Se paso en X tio");
$("#menucliderecho").css({'display':'block', 'left':pasoenx, 'top':e.pageY, 'background-color':'red'});
}
else if (e.pageY>pasoeny) //Si se pasa en y ponga el menu mas arriba
{
// alert("Se paso en Y tio");
$("#menucliderecho").css({'display':'block', 'left':e.pageX, 'top':pasoeny, 'background-color':'red'});
}
else //Si no pasa nada coloquelo normarl, en posicion que solicito el usuario
{
// alert("No se paso tio");
$("#menucliderecho").css({'display':'block', 'left':e.pageX, 'top':e.pageY, 'background-color':'green'});
}
// alert('TABLA_INFO.....el ancho es '+anchotablaproductos+ ' el alto es '+altotablaproductos );
// alert('MENU_INFO.....el ancho es '+anchomenu+ ' el alto es '+altomenu );
});
//Con estas variables verifico que opcion selecciono el usuario
var menuId = "menucliderecho";
var menu = $("#"+menuId);
//Si selecciono un opcion de menu contextal haga las siguientes funciones
$("#menucliderecho").click(function(e){
//Si no selecciono ninguna opcion NO PASA NADA
if(e.target.className == "disabled"){
return false;
}
//si esta activada, gestionamos cada una y sus acciones
// OPciones para elegir del menu
else{
switch(e.target.id){
case "Eliminar":
var eliminarproducto=confirm('Seguro que quiere eliminar: ' + nombre );
if (eliminarproducto==true) { // Si presiona que si hace la funcio Ajax que hize para borrar
alert("Presiono que siiiiiiii para eliminar");
var parametros =
{
'borrar' : id
}
$.ajax({
type : 'POST', //Tipo de dato, Aqui va POST o GET
url : 'borrar.php', // Url de archovo.php
data : parametros, // Esta esla variable JSON donde estan todos los archivos
success: function (data) { // success me informa que cuando todo se halla echo que hago
// document.getElementById("respuesta").innerHTML = "bien Hecho";
alert("Se acaba de borrar:"+id+"..."+nombre+"..esto es data: "+data);
$(".tablaproductosinfo").load("traerproducto.php"); // Recargo la tabla, trayendo en archivo donde esta la tabla
},
error: function (r) {
// document.getElementById(".respuesta").innerHTML = "MAL Hecho";
alert("Error del servidor");
}
});
}
else {
alert("Presiono que noooooooo para eliminar");
}
break;
case "Editar":
break;
}
}
});
echo "<tr>";
deberia ser echo "</tr>";
No veo donde esta menucliderecho, pero probablemente puedas evitar toda la parte de posicionarlo usando position:absolute
Sobre el bug, te conviene usar la consola de chrome para debuggear. Entre ver los elementos que tenes con inspect y usar el debugger de javascript linea por linea podes darte una idea de que esta pasando