2

Estoy utilizando jquery-ui para hacer el autocompletar de un input y al escoger el dato me cargue otros datos en otros input, hasta ahí todo bien.

El problema es el siguiente:

Cuando coloco el código del formulario fuera del modal funciona correctamente, pero al colocar el código dentro de la ventana modal ya no me funciona; es decir no auto-completa y por consiguiente no se pueden cargar los datos de los input.

A continuación el código que coloco fuera de la ventana modal.

<div class="row">                                                                                   
<div class="col-md-6">                                        
    <div class="form-group">
        <input id="document" class="form-control" type="text">
    </div>
</div>
 </div>   
<div class="row">  
    <div class="col-md-6">
    <div class="form-group">
        <input id="nombr" class="form-control" readonly>
    </div>
    </div>
 <div class="col-md-6">
    <div class="form-group">
        <input id="apellid" class="form-control" readonly>
    </div>
    </div>
</div>

A continuación el código dentro de la venta modal.

<div class="modal" id="nuevoUsu" tabindex="-1" role="dialog" aria-labellebdy="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4>Nueva Apuesta</h4>                       
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<div class="modal-body">

    <form action="registrar.php" method="GET" name="myform" id="myform">                                 
        <div class="row">                                                                                   
            <div class="col-md-6">                                        
                <div class="form-group">
                    <input id="document" class="form-control" type="text">
                </div>
            </div>
             </div>   
        <div class="row">  
                <div class="col-md-6">
                <div class="form-group">
                    <input id="nombr" class="form-control" readonly>
                </div>
                </div>
             <div class="col-md-6">
                <div class="form-group">
                    <input id="apellid" class="form-control" readonly>
                </div>
            </div>
        </div>                               
</div>
<div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Registrar">
    <button type="button" class="btn btn-danger" data-dismiss="modal"><span class='glyphicon glyphicon-remove'></span> Cancelar</button>
    </form> 
</div>
</div>
</div>
</div> 

Estoy utilizando estas librerías

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>-->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-ui.js"></script>

Script para donde llamo el archivo donde cargo los datos

<script type="text/javascript">
$(function() {
            $("#document").autocomplete({
                source: "jugadores.php",
                minLength: 2,
                select: function(event, ui) {
					event.preventDefault();
                    $('#document').val(ui.item.codigo);
					$('#document').val(ui.item.document);
					$('#nombr').val(ui.item.nombr);
					$('#apellid').val(ui.item.apellid);
					$('#id_jugador').val(ui.item.id_jugador);
			     }
            });
		});
</script>

Archivo donde cargo el arreglo con los datos solicitados

<?php
if (isset($_GET['term'])){
	# conectare la base de datos
    $con=@mysqli_connect("localhost", "root", "root", "contabilidad");
	
$return_arr = array();
/* Si la conexión a la base de datos , ejecuta instrucción SQL. */
if ($con)
{
	$fetch = mysqli_query($con,"SELECT * FROM jugador where documento like '%" . mysqli_real_escape_string($con,($_GET['term'])) . "%' LIMIT 0 ,50"); 
	
	/* Recuperar y almacenar en conjunto los resultados de la consulta.*/
	while ($row = mysqli_fetch_array($fetch)) {
		$id_jugador=$row['id_jugador'];
		$row_array['value'] = $row['documento']." | ".$row['nombres']." ".$row['apellidos'];
		$row_array['id_jugador']=$row['id_jugador'];
		$row_array['document']=$row['documento'];
		$row_array['nombr']=$row['nombres'];
		$row_array['apellid']=$row['apellidos'];
		array_push($return_arr,$row_array);
    }
}

/* Cierra la conexión. */
mysqli_close($con);

/* Codifica el resultado del array en JSON. */
echo json_encode($return_arr);

}
?>

3
  • Muestranos codigo de como cargas la modal
    – Einer
    Commented el 13 ago. 2017 a las 1:18
  • El código que coloque es el que utilizo para abrir el modal luego de dar clic en un botón
    – Scorpion
    Commented el 13 ago. 2017 a las 1:24
  • Actualicé la publicación, agregué más código. Funciona si coloco el código del formulario fuera de la venta modal, pero si lo coloco dentro no me funciona.
    – Scorpion
    Commented el 13 ago. 2017 a las 1:28

1 respuesta 1

1

Ya logre dar solución a mi problema, era algo muy simple no estaba agregando el id del modal al javascript. La linea que agregué es la número 6 del siguiente código.

<script type="text/javascript">
    $(function () {
        $("#document").autocomplete({
            source: "jugadores.php",
            minLength: 2,
            appendTo: "#nuevoUsu",  //Linea nueva, agrego el id del modal
            select: function (event, ui) {
                event.preventDefault();
                $('#document').val(ui.item.codigo);
                $('#document').val(ui.item.document);
                $('#nombr').val(ui.item.nombr);
                $('#apellid').val(ui.item.apellid);
                $('#id_jugador').val(ui.item.id_jugador);
            }
        });
    });
</script>

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.