[SOLUCIONADO] Función dinamicamente

[emeotero]

Hola,
Cómo sería hacer funciones dinamicamente? me explico, quiero hacer un catalogo de animales, están clasificados por clase/familia etc... La selección la quiero hacer de modo visual. Entonces parto de 4 clases, pongo las imágenes fijas y creo la función con ajax con la consulta PHP a un postgress y me traigo los datos en JSON y los muestro con javascript en un DIV con una plantilla de cadena de texto, todos los bichos que se corresponden con una familia y hago el listado de los correspondientes, de estos me traigo el nombre y la foto, el tema es que ahora que tengo esos primeros, tengo que traerme los que se corresponden con esa familia, sería pinchar en los siguientes y ejecutar otra consulta. La primera función es la siguiente:

Código:

function traerDatosActi(){
const xhttp = new XMLHttpRequest();
	xhttp.open('GET', 'funciones_PHP/listar.php', true);
	xhttp.send();
	xhttp.onreadystatechange = function(){
		if(this.readyState == 4 && this.status == 200){
			var datos = JSON.parse(this.responseText);
			var res = document.querySelector("#orden");
			res.innerHTML = '';
			for(var i in datos.data){
				res.innerHTML += `
					<div class="box-img">
						<a href="#" id='${datos.data[i].order}'><img src ='${datos.data[i].img}'/></a>
						<span class="marco">${datos.data[i].order}</span>
					</div>
				`
			}
		}
	}
}

El nombre lo se pq lo imprimo en el

Código HTML:

 <a href="#" id='${datos.data[i].order}'><img src ='${datos.data[i].img}'/></a> 

podría crear una función con ese nombre que ya se cual es, pero si más adelante incluyo más bichos, ya no me valdría, no sería dinámica. como podría hacer una función dinámica con ese valor que me trae? gracias. saludos.

[ArturoGallegos]

crea una funcion con parametros y envia ese parametro a tu servicio ya sea get o post pero envia un parametro para que sepas que dato debe retornar.

igual, esa forma de crear llamada Ajax ya es bastante vieja, no es obsoleta, simplemente hay formas mas rápidas de hacerlo.

Por ejemplo usando fetch, tiene muy buen soporte, aunque si te interesa dar soporte a IE11 prueba a utilizar Axios

[emeotero]

Si, realmente es un poco vieja, tenía hecha algo como esto

Código:

function traerDatosMala(){
	$('#ContOne').hide();
	$('.contEsp').show(500);
	$('.galeria').show(500);
	__ajax("funciones_PHP/listar.php", "")
	.done( function( info ){
		var datos = JSON.parse( info );
		var html = "";
		for(var i in datos.data){
			html+=`
				<div class="box-img">
				<a href="#" id='${datos.data[i].img}'><img src ='${datos.data[i].img}'/></a>
				<span class="marco">${datos.data[i].order}</span>
				</div>
			`
		}
		$("#orden").html( html );
			
		});
	}
function __ajax(url, data){
	var ajax = $.ajax({
	"method": "POST",
	"url": url,
	"data": data
       })
	return ajax;
}

Pero dudaba en como enviar el input de un formulario a listar.php y hacer la consulta.
Por eso usaba la función vieja, por que hacía una función aparte para enviarla, la verdad es que me lié un poco:

Código:

function objeto(){
	var elemento = document.getElementById("formulario");
	obje = document.getElementById('elemento');
	var txt='';
	txt ="'"+obje.value+"'";
	url_obje = 'elemento='+txt;
	xhr(url_obje);
}

var xmlhttp; 
function xhr(formu){ 

		if (window.XMLHttpRequest)
  			{// code for IE7+, Firefox, Chrome, Opera, Safari
  				xmlhttp=new XMLHttpRequest();
	  		}
		else
	  		{// code for IE6, IE5
  				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
		const xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function(){
		if(this.readyState == 4 && this.status == 200){
			var datos = JSON.parse(this.responseText);
			var res = document.querySelector("#resp");
			res.innerHTML = '';
			for(var i in datos.data){
				res.innerHTML += `
						<p>${datos.data[i].name}</p>
				`
			}
		}
	}
		xhttp.open("POST", "funciones_PHP/busqueda.php", true);
		xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhttp.send(formu);
}

Con el problema añadido de que se recarga el formulario

En fin... gracias.

[emeotero]

Volviendo sobre esto, cómo puedo enviar el valor que me devuelve el id para poder hacer otra consulta a la BD?, se que valor me devuelve pero si pongo el nombre en la función, deja de ser dinámico.

Código:

document.querySelector('#btclass').addEventListener('click', traerDatosFig);
document.querySelector('#dos').addEventListener('click', objeto);
function traerDatosFig(){
		__ajax("funciones_PHP/principal.php", "")
		.done( function( info ){
			var datos = JSON.parse( info );
			var html = "";
			for(var i in datos.data){
					html+=`
							<div class="box-img">
								//el valor que me devuelve lo conozco lo podría llamar de alguna manera: unDato
								<a href="#" id='${datos.data[i].class_t}'>${datos.data[i].class_t}</a>
							</div>
								`
			}
			$("#uno").html( html );
			$('#unDato').click(function(){
				objeto();
			});
		});
}
function objeto(){
	__ajax("funciones_PHP/otraConsulta.php", "")
		.done( function( info ){
			var datos = JSON.parse( info );
			var html = "";
			for(var i in datos.data){
					if(datos.data[i].suborder === null){
				html += `
					<div class="box-img">
						<a href="#" id='${datos.data[i].infraorder}'>${datos.data[i].infraorder}</a>

					</div>
				`
				}else{
					html += `
						<div class="box-img">
							<div class='${datos.data[i].suborder}'>Este div tiene el nombre de ${datos.data[i].suborder}
							<a href="#" id='${datos.data[i].suborder}'>${datos.data[i].suborder}</a>
							</div>
						</div>
					`
				}
			}
			$("#dos").html( html );
			$('#otroDato').click(function(){
				objeto2();
			});
		});
}

Gracias por la ayuda

[prueba230683]

En tu caso podrías añadir el evento click de forma inline:

Código HTML:

<a href="#" id='${datos.data[i].class_t}' onclick="objeto()">${datos.data[i].class_t}</a>
 

Pero también podrías hacer:

Código JavaScript:

$('#' + datos.data[i].class_t).click(function(){
    objeto();
});
 

Pero en este caso, debes introducirlo en el bucle for...in para que tenga acceso a la variable i.

[emeotero]

Gracias por la respuesta. La opcion inline funciona del modo que llama a la función objeto(), sin embargo la otra opción no hace nada, la he puesto como comentabas dentro del For

Código HTML:

for(var i in datos.data){
		html+=`
			<div class="box-img">
				<a href="#" id='${datos.data[i].class_t}' >${datos.data[i].class_t}</a>
				</div>
			`
			$('#' + datos.data[i].class_t).click(function(){
					objeto();
			});
				
	}

Esa función objeto() llamaría a otro PHP, lo suyo seria que esa consulta nueva PHP, tuviera el nombre de class_t, no?para que se ejecute la que corresponde a ese class...
La tengo así ahora, con un nombre estático:

Código:

function objeto(){
	__ajax("funciones_PHP/segundaConsulta.php", "")
		.done( function( info ){

			var datos = JSON.parse( info );

			var html = "";
...

Esto es absurdo, no?

Código:

function objeto(){
	__ajax("funciones_PHP/${datos.data[i].class_t}.php")
		.done( function( info ){

			var datos = JSON.parse( info );

			var html = "";

[prueba230683]

la otra opción no hace nada, la he puesto como comentabas dentro del For

Cierto, no hace nada porque no añades el HTML hasta que no finaliza el bucle. No me había fijado en eso. Descartamos esta opción.

Pero centrándonos en la solución que has dicho que sí funciona (la forma inline), no se entiende muy bien qué quieres hacer con la función objeto. Si no he entendido mal, lo que quieres es pasar como parámetro a la función objeto, el ID del elemento. Esto lo puedes hacer de la siguiente forma:

Código:

<a href="#" id='${datos.data[i].class_t}' onclick="objeto(this.id)">${datos.data[i].class_t}</a>

Y luego en la función objeto simplemente lo recibes como parámetro:

Código Javascript:

function objeto(id_elemento){
    // id_elemento contiene el id del elemento clickado
 
    __ajax("funciones_PHP/" + id_elemento + ".php")
 
    // ....
}
 

[emeotero]

Efectivamente quiero pasar ese id para poder ejecutar la consulta que se corresponde con ese id.
Si por ejemplo, me devuelve en el HTML

Código:

<a href="#" id=ListarLibros' onclick="objeto(this.id)">ListarLibros</a>

la siguiente función sería ListarLibros.php

Muchas gracias por la ayuda, voy a probar a implementarlo.
Saludos

[emeotero]

Pues puesto de esta manera

Código:

function traerDatosFig(){
		__ajax("funciones_PHP/principal.php", "")
		.done( function( info ){
			var datos = JSON.parse( info );
			var html = "";
			for(var i in datos.data){
				html+=`
					<div class="box-img">
						<a href="#" id='${datos.data[i].class_t}' onclick="objeto(this.id)">${datos.data[i].class_t}</a>
					</div>
				`
			}
			$("#uno").html( html );
	});
}
function objeto(){
	__ajax("funciones_PHP/" + id_elemento + ".php", "")
		.done( function( info ){
			var datos = JSON.parse( info );
			var html = "";
			for(var i in datos.data){
					if(datos.data[i].suborder === null){
				html += `
					<div class="box-img">
						<a href="#" id='${datos.data[i].infraorder}'>${datos.data[i].infraorder}</a>
					</div>
				`
				}else{
					html += `
						<div class="box-img">
							<div class='${datos.data[i].suborder}'>Este div tiene el nombre de ${datos.data[i].suborder}
							<a href="#" id='${datos.data[i].suborder}'>${datos.data[i].suborder}</a>
							</div>
						</div>
					`
			}
				
		}
		$("#dos").html( html );
	});
}

da el error

Uncaught ReferenceError: id_elemento is not defined
at objeto (principal.js:77)
at HTMLAnchorElement.onclick

[prueba230683]

Te faltó añadir el nombre del parámetro:

Código:

function traerDatosFig(){
		__ajax("funciones_PHP/principal.php", "")
		.done( function( info ){
			var datos = JSON.parse( info );
			var html = "";
			for(var i in datos.data){
				html+=`
					<div class="box-img">
						<a href="#" id='${datos.data[i].class_t}' onclick="objeto(this.id)">${datos.data[i].class_t}</a>
					</div>
				`
			}
			$("#uno").html( html );
	});
}
function objeto(id_elemento){
	__ajax("funciones_PHP/" + id_elemento + ".php", "")
		.done( function( info ){
			var datos = JSON.parse( info );
			var html = "";
			for(var i in datos.data){
					if(datos.data[i].suborder === null){
				html += `
					<div class="box-img">
						<a href="#" id='${datos.data[i].infraorder}'>${datos.data[i].infraorder}</a>
					</div>
				`
				}else{
					html += `
						<div class="box-img">
							<div class='${datos.data[i].suborder}'>Este div tiene el nombre de ${datos.data[i].suborder}
							<a href="#" id='${datos.data[i].suborder}'>${datos.data[i].suborder}</a>
							</div>
						</div>
					`
			}
				
		}
		$("#dos").html( html );
	});
}

[emeotero]

Correcto, tienes razón, fallo mio. Ahora funciona perfectamente. Muchísimas gracias!