I am using jquery-ui to autocomplete an input and when choosing the data I load other data into other input, until then everything is fine.
The problem is this:
When I place the form code outside the modal it works correctly, but placing the code inside the modal window no longer works for me; that is, it is not self-complete and therefore the input data can not be loaded.
Then the code that I place outside the modal window.
<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>Next the code within the modal sale.
<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">×</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> I'm using these libraries
<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 for where I call the file where I upload the data
<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>File where I load the array with the requested data
<?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);
}
?>