Recargar datos select

[emeotero]

Hola, seguramente se trató en algún momento este tema, disculpadme pero no encuentro info. El caso es que quiero que una vez que se haya ejecutado un formulario en el select me aparezcan actualizados los datos sin recargar la página.
Hago una carga normal del select en la página php del modo

Código:

<select id="proyectos" name="proyectos" multiple onChange = "obtenDatosProyecto(this.value)">
<?php
if($id == 1){
$query_consulta = 'SELECT idproyecto, nombre AS "proyectos" FROM proyectos WHERE deleted IS NOT true ORDER BY "proyectos"';
}else{
$query_consulta = 'SELECT idproyecto, nombre AS "proyectos" FROM proyectos WHERE idusuario=\''.$id.'\' AND deleted IS NOT true ORDER BY "proyectos"';
}
$result = pg_query($query_consulta) or die('Query failed: ' . pg_last_error());

while ($line = pg_fetch_array($result, null, PGSQL_ASSOC)) {
echo "<option value=". $line["idproyecto"].">". $line["proyectos"]."</option>";
}
?>
</select>

Esa función obtenDatosProyecto(this.value) recoge los datos de un proyecto seleccionado y los muestra en los input del formulario.
Depués hago la consulta de alta de proyecto e incluyo los datos en la base de datos. Funciona perfecto, pero quería ver reflejados los cambios en el momento que le doy a aceptar, que a mayores me actualice los datos. Probé refrescando el div donde está el select con jquery, pensé en volver a ejecutar la consulta que hago en el momento que cargo el select...
Cual sería la mejor forma? agradezco una orientación/ayudita. Saludos

[Alexis88]

Si estás usando una petición asíncrona (AJAX) para guardar los datos sin recargar la página, desde el archivo en el que guardas los datos podrías realizar una segunda consulta luego del guardado para así recuperar los datos actualizados o bien podrías retornar un mensaje de éxito o error, de tal modo que, en el archivo en el que hiciste la petición asíncrona, según la respuesta (éxito o error) realices una segunda petición asíncrona a un tercer archivo en el cual realizarías la consulta a la base de datos, retornarías los datos y cargarías al <select> con ellos.

Hace un poco más de un mes hubo un hilo en el foro en el que se buscaba hacer algo muy similar. Aquí puedes ver mi respuesta.

[emeotero]

Gracias Alexis. Me pongo con ello!. Un saludo

[emeotero]

Bien! consigo hacerlo con un select, intenté hacerlo para un input pero no me sale.
Tengo un formulario con dos inputs, uno lo uso para dar de alta un dato y otro para visualizarlo, en función de si quiero darlo de alta o visualizarlo muestro un div u otro via jquery.
El input de alta tiene un script de autompletar, primero una consulta a la BD

Código PHP:

  <?php  
    $query_consulta = 'SELECT dato1, dato2 FROM tabla ORDER BY dat02'; 
    $result = pg_query($query_consulta) or die ('Query failed: '. pg_last_error()); 
    $arreglo_php = array(); 
    if(pg_num_rows($result) == 0) 
        array_push($arreglo_php, "NO hay datos"); 
    else{ 
        while ($inter = pg_fetch_array($result, null, PGSQL_ASSOC)){ 
            array_push($arreglo_php, $inter['dato1'].':'.$inter['dato2']); 
        } 
    } 
?>   

continúa el script de autocompletar

Código HTML:

<script>
	$(function(){
		var autocompletar = new Array();
		<?php
			for($p = 0;$p < count($arreglo_php); $p++){  ?>
				autocompletar.push('<?php echo $arreglo_php[$p]; ?>');
		<?php } ?>
		//alert(autocompletar);
		$("#interComplete").autocomplete({ 
			source: autocompletar,
			minLength:2,
			select: function(event, ui){
				var interIdNombre = ui.item ? ui.item.label : '';
				var arrayinter = interIdNombre.split(":");
				$('#idInter').val(arrayinter[0]);
				$('#interComplete').val(arrayinter[1]);
				obtenDatosInter(arrayinter[0]);//obtiene los datos para mostrar en inputs de formulario
				return false;
			},open: function() {
							$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
						},
			close: function() {
							$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
						}
			}).autocomplete("instance")._renderItem = function(ul, item) {
				return $("<li>").append("<a>" + item.label.split(":")[1] + "</a>").appendTo(ul);
						
			};
	  });
</script>
<!-- cuando quiero ver un dato uso este y lo oculto cuando quiero introducir un dato -->
<div id="NomCom">
	<p>Nombre: <input type="text" id="interComplete" class="intCom" name="interComplete" placeholder=" introduzca nombre " ></p><br>
</div>
<div id="NomAna" style="display:none;"><!--lo activo para meter dato -->
<p>Nombre: <input type="text" id="NombreInter" class="intCom" name="NombreInter" placeholder=" introduzca nombre "></p><br>
</div>
<!-- input donde meto el id después de separar el id del nombre -->
<input type="hidden" name="idInter" id="idInter" onfocus= "obtenDatosInter(this.value)" value=""></input> 

Hago la petición AJAX

Código:

function blabla(){
divInter = document.getElementById('NomCom');
nombre = document.getElementById('NombreInter').value;
..
xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			divInter.innerHTML = xmlhttp.responseText;
			//divResultado2.innerHTML = xmlhttp.responseText;
		}
	};
...
}

En el response en la consola veo que cuando envío un dato nuevo, aparece todos los datos del input autocomplete, como cuando lo envío al hacerlo desde un SELECT, pero cuando quiero ejecutar el autocomplete en el input del div NomCom no funciona el script. Seguro que es una chorrada que se me escapa, pero no lo veo.
Alguien me presta sus dos ojos para ver que no veo yo. Gracias!

[Alexis88]

Si deseas, puedes guiarte de este ejemplo de buscador con autocompletado que hice hace cuatro años: Buscador similar al de Facebook.

[emeotero]

Hola Alexis, gracias por tu tiempo!. A ver el autocomplete me funciona perfectamente cuando hago la búsqueda en la base de datos, devuelvo los datos y relleno los inputs del formulario con los datos que me devuelve la búsqueda.

Ahora, si quiero introducir un dato nuevo, oculto el input con autocomplete y muestro otro input para introducir el dato, más los inputs que necesito en el formulario.

Una vez que le doy a enviar el formulario, sustituyo el input de inserción por el input autocomplete que uso para visualizar los datos en pantalla. El INSERT en la base de datos me lo hace sin problema ninguno, la historia es que no quiero hacer un reload de la página para ver los datos actualizados de la BD en el formulario.

Con un SELECT siguiendo las explicaciones que me diste, lo hago sin problema, pero no soy capaz de hacerlo con el INPUT. La segunda vez no me funciona el autocomplete.

Saludos

[Alexis88]

Si te fijas bien en el ejemplo del enlace, la fuente de palabras a buscar no se encuentra en un arreglo sino que se busca en un archivo PHP externo. Si aplicas dicha lógica a lo que vienes haciendo, no tendrás problemas con la búsqueda de datos recientemente insertados ya que la fuente siempre se mantendrá actualizada puesto que no es estática.

[emeotero]

Cierto!! ok! lo probaré (en unos días, q salgo de viaje) a ver que tal me va.

Gracias Alexis