2

He insertado un select de un php con ajax en otro php que es el index. Este es el index de donde cojo los dato.

<?php 
include 'conexion.php';
$msg ="";
$tipo= $_POST['tipo']??"";
$sql = "SELECT marca.idmarca as id,marca.marca as marca
from marca, producto, modelo
where producto.modelo = modelo.idmodelo
and modelo.marca = marca.idmarca
and producto.tipo = '$tipo'";
$consulta = $conn->query($sql);
$msg .= "<select id=\"marc\">";
$msg .= "<option value=\"\">Selecciona una marca</option>";

while($fila = $consulta->fetch()){
$msg .= "<option value=\"".$fila['id']."\">".$fila['marca']."</option>";

}
$msg .= "</select>";
echo $msg;
?>

Y al coger el id del select en el jquery no me hace nada. El enlace de jquery esta en el index.php.

//Codigo jquery

$("#marc").change(function(){
 var tipo = $(this).val();
 alert(tipo);

});
8
  • ¿El change está dentro de ready?
    – gugadev
    Commented el 13 mar. 2017 a las 16:02
  • si esta dentro del $(document).ready(function() Commented el 13 mar. 2017 a las 16:07
  • El problema al parecer es que DOMContentLoaded se dispara antes que se el select se genere mediante PHP. Podrías dejar el <select> vacío directamente en el HTML y luego llenarlo con el resultset.
    – gugadev
    Commented el 13 mar. 2017 a las 16:08
  • qué es el resultset perdona es que soy novato todavía Commented el 13 mar. 2017 a las 16:12
  • Lo que trae la consulta de la base de datos. Haz lo que te digo para que pruebes. Pon el <select> directamente en el HTML y más abajo solo lo llenas con los datos.
    – gugadev
    Commented el 13 mar. 2017 a las 16:14

2 respuestas 2

1

El problema es que el id marc no esta cargado en el DOM cuando quieres usar tu función:

// No sabe la id #marc
$('#marc').on('change', function(){
  
  var tipo = $(this).val();
  alert(tipo);  
});

function ajaxSelect(){
  
  $('body').append('<select id="marc"><option value="">Selecciona</option><option value="1">1</option><option value="2">2</option></select>');
}

$('button').click(ajaxSelect);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Crear Ajax Select</button>

Lo que puedes hacer es una lo que te ha dicho @GustavoGarcia en el commentario o también puedes delegar el evento:

// Delegamos el evento
$(document).on('change', '#marc', function(){
  
  var tipo = $(this).val();
  console.log(tipo);
  
});

function ajaxSelect(){
  
  $('body').append('<select id="marc"><option value="">Selecciona</option><option value="1">1</option><option value="2">2</option></select>');
}

$('button').click(ajaxSelect);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Crear Ajax Select</button>

1
  • Esta es la respuesta correcta. La delegación del handler siempre va a funcionar, sin recurrir a la salvedad de poner el elemento select en duro
    – ffflabs
    Commented el 13 mar. 2017 a las 23:08
-2

Cuando se tratan elementos dinámicos se tiene usar el on, ya sea para clik,change, etc.

Prueba usando:

$("#marc").on('change', function(){
  var tipo = $(this).val();
  alert(tipo);
});
6
  • Es lo mismo que ha hecho el OP. jQuery te permite hacer atajos en lugar de .on.
    – gugadev
    Commented el 13 mar. 2017 a las 16:00
  • @GustavoGarcía, no, no es lo mismo. jQuery utiliza funciones diferentes en base al DOM. En este caso el input no estaba creado cuando el DOM terminó de cargarse, entonces jQuery no puede encontrar el elemento con un simple change. Commented el 13 mar. 2017 a las 16:02
  • no no me funciona tampoco con el on. Commented el 13 mar. 2017 a las 16:04
  • 1
    @user2930137 Eso es obvio pero en ningún momento me refiero a eso. Lo que estoy diciendo es que .change es un atajo para .on('change'). Consulta la documentación para que salgas de dudas: This method is a shortcut for .on( "change", handler ).
    – gugadev
    Commented el 13 mar. 2017 a las 16:07
  • pero como es dinámico el select se tiene que colocar el on. Puedes probarlo.
    – Acd
    Commented el 13 mar. 2017 a las 16:15

Tu Respuesta

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

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