Problema con javascript Variables de Php a Js

Slikp · 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 (html4strict) [Seleccionar]


<!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 (javascript) [Seleccionar]


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 (php) [Seleccionar]


  <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??

MinusFour · 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) [Seleccionar]


<?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>

Slikp · 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.

Slikp · 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...

MinusFour · 13 Julio 2014, 23:45 PM

prueba cambiando:

Código (php) [Seleccionar]

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

por

Código (php) [Seleccionar]

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)

Slikp · 13 Julio 2014, 23:56 PM

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

Código (html4strict) [Seleccionar]


 $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.

Slikp · 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 (html4strict) [Seleccionar] Expandir
$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 traere mis dudas.