Problema con javascript Variables de Php a Js

Foro de elhacker.net

Programación

Desarrollo Web (Moderador: #!drvy)

Problema con javascript Variables de Php a Js

0 Usuarios y 1 Visitante están viendo este tema.

Páginas: [1]

Autor

Tema: Problema con javascript Variables de Php a Js (Leído 2,961 veces)

Slikp

Desconectado

Mensajes: 67

Problema con javascript Variables de Php a Js

« en: 13 Julio 2014, 22:15 pm »

- Muy buenas en primer lugar quiero decir que entiendo que abran mejores metodos como el usar Jquery o la Funcionalidad de Ajax para realizar lo que voy a plantear sin embargo soy nuevo con js y estoy tratando de aprender desde lo mas basico en este caso Js puro y luego ir escalando junto con eso ir aplicando lo que voy aprendiendo de Js a los conocimiento que tengo de html css y php, con esto quiero aclarar que no Quiero Respuestas como Mejor usa Ajax o Jquery como ya les dije tengo presente que usar esos metodos es mucho mejor, facil, rapido y mas efeciente...

- He estado viendo unos cuantos tutos y he leido unos Pdf y decidi mesclar todo lo que pude aprender pero estoy trabado con esto y en realidad no se si pueda hacer lo siguiente solo con JS puro y no estoy seguro pero creo que Json es lo que necesito sin embargo no e tenido exito espero me entiendan porque no soy bueno explicandome... Primero les muestro lo que tengo echo.

Código

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>	
<body>
	<header>
		<h1> Ejemplo </h1>
	</header>
	<div class="main">
		<div class="row">
				<div class="row">
					<label> Genero </label>
					<select id="gender">
						<option value="M"> Masculino </option>
						<option value="F"> Femenino </option>
						<option value="T"> Todos </option>
					</select>
				</div>
				<div class="row">
					<label> Hobbies </label>
					<input type="text" id="hobby">
				</div>
				<div class="row">
					<input type="submit" value="Buscar" id="searchbtn">
				</div>
		</div>
		<div id="result">
 
		</div>
	</div>
	<script src="js/script.php"></script>
</body>
</html>

- Ese es el esqueleto de mi proyecto simplemente muestra un select para seleccionar entre 3 opciones luego un input para especificar el Hobbi de la persona y luego el boton de buscar posteriormente el ID resultado muestra la informacion necesaria generada que le pasa una funcion Js que es esta.

Código

var users = [
	{
		name: 'Lucy',
		gender: 'F',
		hobby: 'Basket',
		avatar: 'thief.png',
	},
	{
		name: 'Jhony',
		gender: 'M',
		hobby: 'Programacion',
		avatar: 'thief.png',
	},
	{
		name: 'Betty',
		gender: 'F',
		hobby: 'Basket',
		avatar: 'thief.png',
	},
];
   window.addEventListener('load', function() {
 
  function buscar() {
 
		var hobbyField = document.getElementById('hobby');
		var hobby = hobbyField.value;
 
		var genderField = document.getElementById('gender');
		var selected = genderField.selectedIndex;
		var gender = genderField.options[selected].value;
		console.log(gender);
var resultados = '';
		var numUsers = users.length;
 
for (var i = 0; i < numUsers ; i++) {
   		if (gender == 'T' || gender == users[i].gender) {
  			if (hobby == '' || hobby == users[i].hobby)   {
	resultados += '<article class="person-row">\
						<img src="img/' + users[i].avatar +'" />\
						<div class="person-info">\
							<div> ' + users[i].name + ' </div>\
							<div> ' + users[i].hobby + ' </div>\
							<input type="submit" value="agregar amigo">\
						</div>\
					</article>';
				}
			}
		}
	result.innerHTML = resultados;
 
	}; 
 
	var result = document.getElementById('result');
	var searchbtn = document.getElementById('searchbtn');
	searchbtn.addEventListener('click', buscar );
	buscar();
});

- Y en realidad esto me funciona a la perfeccion pero entonces pense que seria mucho mejor aplicandole una especie de dinamisno usando una Bd y hacer las busquedas sin embargo no tengo exito se que Js es Frontend asi que no hay forma que Js se conecte a una Bd para hacer lo que quiero a no se que use Node.js pero aun no quiero entrar en ese mundo asi que pense en php, obviamente debo generar los dato primero, dado que el Js solo se va a ejecutar cuando la pag este cargada y si los datos no estan cargados entonces no podre hacer lo que quiero.

- Yo me imagino que tengo que poner el Php en esta sección de esta forma...

Código

  <div id="result">
		  <?php
			require("php/conexion.php");
			$consulta = mysqli_query($con, "SELECT * FROM ejemplo");
			while($row = mysqli_fetch_array($consulta, MYSQL_ASSOC))
			{					
				echo "<article class='person-row'>";
					echo "<img src='img/thief.png' />";
					echo "<div class='person-info'>";
					  	echo "<div>".$row['nombre']."</div>";
					  	echo "<div>".$row['hobbies']."</div>";
					  	echo "<input type='submit' value='agregar amigo'>";
					 echo "</div>";
			  	echo "</article>";
			}
		  ?>
</div>

- Es el div result que esta vacio en el primer Html que coloque obvio ya este es .php ok eso me muestra los dato de mi bd perfectamente pero entonces el Js lo debo modificar porque la estructura Json que esta al comienzo deberia recibir las variable $row[] pero no se como hacer eso e intentado de varias formas y nada y a parte si logro pasarle al Json o el Js esa variable $row[] como sabe Js o Json cual es el valor del 2do dato o del 3er o el 4to del $row[]? tambien se haria con un while?? porque intente hacerlo de una forma y solo me mostraba el 1er dato de la bd y los demas no...

- Estoy confundido no se como harcerle y otra cosa si se pasa el Json con un For o un While y supongamos que se logra mostrar todos los datos exitosamente el segundo for del Js el que tiene el for (var i = 0; i < numUsers ; i++) uds creen que seguira funcionando y sus condiciones tambien??


« Última modificación: 13 Julio 2014, 22:24 pm por Slikp »	En línea

MinusFour

Moderador Global

Desconectado

Mensajes: 5.529

I'm fourth.

Re: Problema con javascript Variables de Php a Js

« Respuesta #1 en: 13 Julio 2014, 22:54 pm »

Lo que puedes hacer en este caso es hacer el objeto javascript desde PHP, yo no lo consideraría una busqueda dinámica, pero si estás obteniendo la información desde una base de datos en lugar de datos escritos manualmente. Necesitas un campo de Genero en tu base de datos, para poder formar bien el JSON.

Código

<?php
			require("php/conexion.php");
			$jsonObj = array();
			$consulta = mysqli_query($con, "SELECT * FROM ejemplo");
			while($row = mysqli_fetch_array($consulta, MYSQL_ASSOC))
			{	
				$jsonObj[] = array("name" => $row['nombre'], "gender" => $row["genero"], "hobby" => $row["hobbies"], "avatar" => "thief.png");
			}
			$jsonObjString = json_encode($jsonObj);
		  ?>
 
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript">
		var users = <?php $jsonObjString . ";" ?>
	   window.addEventListener('load', function() {
 
	  function buscar() {
 
			var hobbyField = document.getElementById('hobby');
			var hobby = hobbyField.value;
 
			var genderField = document.getElementById('gender');
			var selected = genderField.selectedIndex;
			var gender = genderField.options[selected].value;
			console.log(gender);
	var resultados = '';
			var numUsers = users.length;
 
	for (var i = 0; i < numUsers ; i++) {
			if (gender == 'T' || gender == users[i].gender) {
				if (hobby == '' || hobby == users[i].hobby)   {
		resultados += '<article class="person-row">\
							<img src="img/' + users[i].avatar +'" />\
							<div class="person-info">\
								<div> ' + users[i].name + ' </div>\
								<div> ' + users[i].hobby + ' </div>\
								<input type="submit" value="agregar amigo">\
							</div>\
						</article>';
					}
				}
			}
		result.innerHTML = resultados;
 
		}; 
 
		var result = document.getElementById('result');
		var searchbtn = document.getElementById('searchbtn');
		searchbtn.addEventListener('click', buscar );
		buscar();
	});
	</script>
 
</head>	
<body>
	<header>
		<h1> Ejemplo </h1>
	</header>
	<div class="main">
		<div class="row">
				<div class="row">
					<label> Genero </label>
					<select id="gender">
						<option value="M"> Masculino </option>
						<option value="F"> Femenino </option>
						<option value="T"> Todos </option>
					</select>
				</div>
				<div class="row">
					<label> Hobbies </label>
					<input type="text" id="hobby">
				</div>
				<div class="row">
					<input type="submit" value="Buscar" id="searchbtn">
				</div>
		</div>
		<div id="result">
 
		</div>
	</div>
	<script src="js/script.php"></script>
</body>
</html>


	En línea

Slikp

Desconectado

Mensajes: 67

Re: Problema con javascript Variables de Php a Js

« Respuesta #2 en: 13 Julio 2014, 23:15 pm »

- Gracias MinusFour si lo del campo genero ya lo tenia presente pero solo lo hice con nombre y hobbie para ver como me iba y si salia bien lo hacia con todos los campos, Voy a probar lo que expusistes y te cuento... Muchas gracias.


	En línea

Slikp

Desconectado

Mensajes: 67

Re: Problema con javascript Variables de Php a Js

« Respuesta #3 en: 13 Julio 2014, 23:41 pm »

- MinusFour, seguire revisando pero el codigo no me muestra nada ahora en la consola dice esto TypeError: users is undefined... Ya agregue el campo genero en la base de datos por cierto e intente mostrar los datos solo con php en el html y se muestran bien...


	En línea

MinusFour

Moderador Global

Desconectado

Mensajes: 5.529

I'm fourth.

Re: Problema con javascript Variables de Php a Js

« Respuesta #4 en: 13 Julio 2014, 23:45 pm »

prueba cambiando:

Código

		var users = <?php $jsonObjString . ";" ?>

por

Código

		var users = <?php echo $jsonObjString . ";" ?>

Revisa en tu script si aparece el JSON. (Ver código fuente desde el navegador o el Developer Tools F12)


	En línea

Slikp

Desconectado

Mensajes: 67

Re: Problema con javascript Variables de Php a Js

« Respuesta #5 en: 13 Julio 2014, 23:56 pm »

- Brutal eres grande MinusFour funciono perfecto yo estaba probando cosas como esta

Código

 $jsonObjString = json_encode($jsonObj[]);

- Pense que le faltaba los corchetes ni me habia pasado por la mente imprimir la variable con el echo, pero es algo que tendre en mente ahora... Muchas gracias seguire experimentando y cualquier cosa trere mis dudas.


	En línea

Slikp

Desconectado

Mensajes: 67

Re: Problema con javascript Variables de Php a Js

« Respuesta #6 en: 13 Julio 2014, 23:56 pm »

Cita de: Slikp en 13 Julio 2014, 23:56 pm

- Brutal eres grande MinusFour funciono perfecto yo estaba probando cosas como esta

Código

 $jsonObjString = json_encode($jsonObj[]);


	En línea

Páginas: [1]

Ir a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	Pasando variables de javascript a PHP... PHP	‭lipman	7	20,272	19 Enero 2010, 14:51 pm por braulio--
	AYUDA: Como intercambiar variables entre javascript y php? Desarrollo Web	nebiros_root	5	4,811	6 Noviembre 2011, 22:47 pm por fran800m
	variables que sobrevivan a una recarga de pagina en php o javascript PHP	jhonatanAsm	5	4,302	18 Abril 2012, 19:16 pm por jhonatanAsm
	No entiendo el ambito de las variables en javascript Desarrollo Web	Aikanáro Anário	2	2,741	8 Junio 2012, 20:32 pm por Aikanáro Anário
	Curso de javascript \| 4. Variables en javascript Desarrollo Web	TickTack	0	3,506	17 Julio 2022, 20:08 pm por TickTack