Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Función dinamicamente

Estas en el tema de Función dinamicamente en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/05/2020, 01:39
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago de Compostela
Mensajes: 120
Antigüedad: 9 años
Puntos: 0
Función dinamicamente

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.
  #2 (permalink)  
Antiguo 11/05/2020, 09:48
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.693
Antigüedad: 12 años, 3 meses
Puntos: 1117
Respuesta: Función dinamicamente

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
  #3 (permalink)  
Antiguo 13/05/2020, 02:48
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago de Compostela
Mensajes: 120
Antigüedad: 9 años
Puntos: 0
Respuesta: Función dinamicamente

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.
  #4 (permalink)  
Antiguo 17/05/2020, 11:19
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago de Compostela
Mensajes: 120
Antigüedad: 9 años
Puntos: 0
Respuesta: Función dinamicamente

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
  #5 (permalink)  
Antiguo 17/05/2020, 11:44
 
Fecha de Ingreso: abril-2011
Mensajes: 125
Antigüedad: 9 años, 2 meses
Puntos: 44
Respuesta: Función dinamicamente

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

Código HTML:
Ver original
  1. <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:
Ver original
  1. $('#' + datos.data[i].class_t).click(function(){
  2.     objeto();
  3. });

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

Última edición por prueba230683; 17/05/2020 a las 11:53
  #6 (permalink)  
Antiguo 17/05/2020, 15:49
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago de Compostela
Mensajes: 120
Antigüedad: 9 años
Puntos: 0
Respuesta: Función dinamicamente

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 = "";
  #7 (permalink)  
Antiguo 18/05/2020, 05:02
 
Fecha de Ingreso: abril-2011
Mensajes: 125
Antigüedad: 9 años, 2 meses
Puntos: 44
Respuesta: Función dinamicamente

Cita:
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:
Ver original
  1. function objeto(id_elemento){
  2.     // id_elemento contiene el id del elemento clickado
  3.  
  4.     __ajax("funciones_PHP/" + id_elemento + ".php")
  5.  
  6.     // ....
  7. }

Última edición por prueba230683; 18/05/2020 a las 05:11
  #8 (permalink)  
Antiguo 18/05/2020, 13:19
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago de Compostela
Mensajes: 120
Antigüedad: 9 años
Puntos: 0
Respuesta: Función dinamicamente

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
  #9 (permalink)  
Antiguo 18/05/2020, 15:30
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago de Compostela
Mensajes: 120
Antigüedad: 9 años
Puntos: 0
Respuesta: Función dinamicamente

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
  #10 (permalink)  
Antiguo 18/05/2020, 16:07
 
Fecha de Ingreso: abril-2011
Mensajes: 125
Antigüedad: 9 años, 2 meses
Puntos: 44
Respuesta: Función dinamicamente

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 );
	});
}
  #11 (permalink)  
Antiguo 19/05/2020, 02:30
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago de Compostela
Mensajes: 120
Antigüedad: 9 años
Puntos: 0
Respuesta: Función dinamicamente

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



La zona horaria es GMT -6. Ahora son las 13:35.