- 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.
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="css/index.css"> <header>
</header>
<input type="text" id="hobby"> <input type="submit" value="Buscar" id="searchbtn">
- 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.
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...
<div id="result">
<?php
require("php/conexion.php");
{
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??
Mostrar Mensajes
