JavaScript - problema con funcion que crea divs

 
Vista:
Imágen de perfil de Luis
Val: 17
Ha disminuido su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

problema con funcion que crea divs

Publicado por Luis (7 intervenciones) el 18/10/2016 14:30:03
Hola buenos días.
Tengo que crear unos divs con articulos dinámicamente.
La idea es que tengo un select con categorias, y al seleccionar alguna de ellas me trae los artículos coincidentes.
Probé hacerlo con jquery y json , pero algo va mal , me repite la primera foto , aunque el json viene correcto ( controlado por consola ) .
Les paso el código relacionado, si hiciera falta lo pongo en pastebin completo.


INDEX.PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
     session_start();
?>
 
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link href="css/estilo.css" rel="stylesheet" type="text/css" />
    <script src="jquery-3.1.0.js" type="text/javascript"></script>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link rel="shortcut icon" type="image/x-icon" href="iconos/favicon.ico" />
<script>
        //Un ciclo:
/*        for(i=1; i<20; i++){
                $.('.caja').append("<a href='Nuevo-Articulo'><div class='articulo'><img src='IMAGENES/1319095_90422633.jpg' /><p class='art_titulo'>Pulidora Yelmo</p><p class='art_describe'>Color Blanco 220v</p></div>");
                }*/
    var getdetailsfilter = function(categoria) {
        return $.getJSON("busca_articulos.php", {
            "categoria": categoria
        });
    };
 
    $(document).ready(function(){
      $('#combo_categorias').unbind('change').bind('change', function (e) {
            optionSeleccionado = $(this).val();
            alert(optionSeleccionado);
            //Borro las cajas
            $('.caja').empty();
            getdetailsfilter(optionSeleccionado).done(function (response){
                $.each(response.data.arts1, function (key, value) {
                    $('.caja').append("<div class='caja_imagen'><img src="+$.trim(value.imagen)+" style=widht='100' height='100' /><p class='caja_nombre'>"+$.trim(value.nombre)+"</p><p class='caja_precio'>$ "+$.trim(value.precio)+"</p></div><div class='caja_boton'><form action='detalle.php' method='POST' name='detalle'><input name='id' type='hidden' value="+$.trim(value.id)+" /><input class='boton_detalle' type='submit' value='Detalle'></form></div></div>");
                alert($.trim(value.id));
                });
            });
          });
    });
 
</script>
 
</head>


Parte del php q devuelve un JSON :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$jsondata["data"]["arts1"][] = array("id" => $row->id,"imagen" => $row->imagen, "nombre" => $row->nombre,"descripcion" => $row->descripcion, "costo" => $row->costo,"precio" => $row->precio,"stock" => $row->stock, "categoria" => $row->categoria);
        }
      } else {
        $jsondata["success"] = false;
        $jsondata["data"] = array(
        'message' => 'No se encontró ningún resultado.'
           );
      }
    } else {
      $jsondata["success"] = false;
      $jsondata["data"] = array(
        'message' => $database->error
      );
    }
  header('Content-type: application/json; charset=utf-8');
  echo json_encode($jsondata, JSON_FORCE_OBJECT);
  $con->close();
}
exit();
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder