busqueda me cuelga la conexion de la pagina

[kakashi20]

hola

tengo esta búsqueda de info de mysql por medio de ajax.

El problema es que al hacer esta búsqueda de manera exhaustiva, osea, cuando estoy buscando muchos productos y escribiendo muchos nombre, la conexión de la pagina se cuelga y aparece en el navegador google chrome que se ha perdido la conexión con la pagina.

no se porque pasa esto.

si alguien me pudiese ayudar se lo agradeceria.

Form Búsqueda:

Código HTML:

<table border='0' width='348px'>
            <tr height="50px">
                <td colspan='2' align='center' style="font-size:14px; font-weight:bold">Busqueda Productos</td>
            </tr>
            
            <tr>
                <td width='50%' align="right">Nombre:</td>
                <td>
                   <input type="text" name="nom" id="nom" onkeyup="BuscarProducto()" />
                </td>
            </tr>
       
            
            
            
            
            
           
                
        </table>
        
         
    </form>
 
<div id="result" style="border:0px solid #F00; width:1000px"></div>
 

Ajax:

Código Javascript:

function BuscarProducto(){
 
    
 
 
 
    nom= $("#nom").val() ;
 
    
 
    str = "nom="+nom;
 
    
 
    
 
    
 
    $.ajax({
 
    
 
                
 
                
 
                type: 'POST',
 
    
 
                url: 'ListadoProductos2.php',
 
                
 
                data: str,
 
    
 
                success:function(msg){
 
    
 
                    
 
                            
 
                                
 
                                $("#result").html(msg) 
 
                            
 
                        
 
                        
 
    
 
                }
 
    
 
                
 
    
 
    });
 
    
 
    
 
    
 
                        
 
    
 
}
 

pagina ListadoProductos2.php:

Código PHP:

<?
session_start();
include ('lib/claseBaseDatos.php');
    $conexion = new ConexionBaseDatos;
    $link = $conexion->Conectarse($conexion);
    
    
?>  
 
<style type="text/css">
.fila_0 { background-color: #3C80EE; color:#fff}
.fila_1 { background-color: #FFF;}
 
 
 
 
</style>
 
<form>
        <table border='0' width='348px'>
            <tr height="50px">
                <td colspan='2' align='center' style="font-size:14px; font-weight:bold">Busqueda Productos</td>
            </tr>
            
            <tr>
                <td width='50%' align="right">Nombre:</td>
                <td>
                   <input type="text" name="nom" id="nom" onkeyup="BuscarProducto()" />
                </td>
            </tr>
            
            <tr height="50px">
                <td colspan='2' align='center' style="font-size:12px; font-weight:bold">Rango de Precios de Ventas</td>
            </tr>
            
            <tr>
                
                <td colspan="2" align="center">
                  Precio Menor: <input type="text" name="p1" id="p1" style="width:70px"  /> Precio Mayor:<input type="text" name="p2" id="p2" style="width:70px"  />
                </td>
            </tr>
            
            
            
            
            <tr>
                
                <td colspan="2" align="center">
                   <input type="button" value="Buscar por precio" onclick="BuscarProducto2()" />
                </td>
            </tr>
            
           
                
        </table>
        <br />
        <div id="result" style="border:0px solid #F00; width:1000px">
        
        <table border='0' width="100%">
            <tr>
                <td colspan='9' align='center' style="font-size:14px; font-weight:bold">Listado de productos</td>
            </tr>
 
            <tr>
            
                <td style="font-weight:bold">Producto</td>
                <td style="font-weight:bold">Precio Costo</td>
                <td style="font-weight:bold">Precio Venta</td>
                <td style="font-weight:bold">Cantidad</td>
                <td style="font-weight:bold">Garant&iacute;a</td>
                <td style="font-weight:bold">Fecha Ingreso</td>
                <td style="font-weight:bold">Descripci&oacute;n</td>
                <td style="font-weight:bold"></td>
            </tr>
<?
            $query = mysql_query("select producto, precio_costo, precio_venta, cantidad, garantia, fecha_ingreso, descripcion, id from productos order by producto");
            $i=0;
            while($row = mysql_fetch_assoc($query)){
                echo "<tr class='fila_".($i%2)."'>"; 
                    
                    echo "<td> $row[producto] </td> "; 
                    echo "<td> $row[precio_costo] </td> "; 
                    echo "<td> $row[precio_venta] </td> "; 
                    echo "<td> $row[cantidad] </td> "; 
                    echo "<td> $row[garantia] </td> "; 
                    echo "<td> $row[fecha_ingreso] </td> "; 
                    echo "<td> $row[descripcion] </td> "; 
                    echo "<td><img src='img/edit.png' style='cursor:pointer' title='Editar' onclick='EditarProducto(".$row['id'].")'></td>";
                echo '</tr>';
                $i++;
            }
            
    
?>          
        </table>
        
        
        </div>
         
    </form>
 

[adryan310]

guarda todo el html en una variable php y al final dale un echo a la variable que contiene el html, una vez retornado los datos dale un append al div donde quieres presentar los datos, empieza por corregir esas pequeñas cosas...

[xSkArx]

Si pudieses mostrar el codigo de tu clase de conexion

[kakashi20]

adryan310:

cual es la diferencia de hacer eso que me dices y lo que hago actualmente ?

eso mejora la optimizacion ?

[adryan310]

Pues con base a las experiencia que he tenido yo con ajax si optimiza el rendimiento del retorno de datos y mas que eso, recuerda que la respuesta que debe de recibir el ajax es una respuesta PHP osea una respuesta del servidor, en mi caso una vez estaba retornando codigo html tal como tu lo estas haciendo y nunca me presento la tabla que estaba retornando a pesar de que le hacia al div correspondiente un .html tal como lo tienes lo cambie a .append y tampoco funko, corregi el problema retornando una respuesta como esta:

Código PHP:

  $response  = "<table>";
$response  .= "<tr>";
$response  .= "<td>test</td>";
$response  .= "</tr>";
$response  .= "</table>";

echo $response  
   

AJAX:

Código Javascript:

nom= $("#nom").val() ;
    str = "nom="+nom;
    $.ajax({
                  type: 'POST',
                  url: 'ListadoProductos2.php',
                  data: str,
                  success:function(msg){
                      $("#result").append(msg) 
 
                  } 
    });
 

[kakashi20]

el detalle es que el append es para adicinar la info que retorno en la ultima linea del div donde retorno.

yo uso .html porque necesito reemplazar la info que esta por la que de resulta de la busqueda que hago.

[kakashi20]

alguien que me pueda ayudar, por favor ??

gracias

[xSkArx]

El problema que veo es que por cada letra presionada hace una consulta, envias un valor pero no lo ocupas, recuperas todos los datos desde bd

[kakashi20]

Te podrías explicar mejor ? Gracias

[pateketrueke]

Es simple: una consulta sin WHERE es de lo peor que puedes hacer, en cierto modo nunca utilizas el valor que recibes para filtrar la consulta.

Es decir, no importa lo que escribas, siempre haces la misma consulta, exactamente igual.

¿Qué tan complicado es entender esto?

Más claro ni el agua.

[xSkArx]

Haciendo esto mejora un poco

Código MySQL:

select producto, precio_costo, precio_venta, cantidad, garantia, fecha_ingreso, descripcion, id from productos where productos like '%$_POST[str]%' order by producto
 

[kakashi20]

Gracias por las respuestas.

Teniendo la consulta con el like esta bien pero igual en cierto tiempo se cuelga ya que deja de hacer el retorno y recargo el navegador para confirmar si se perdió la conexión y efectivamente me sale que no se puede conectar con el sitio.

[xSkArx]

Mi recomendacion es que al terminar de escribir el producto presiones enter para llamar a la funcion js, o en el php y js validar que se haga la consulta con un minimo de 4 caracteres