I tell you that I am wanting to finish a web, and I can not load content from a text file into an element of the web page. When I show that element in the console, everything seems to go well. When I place it in the element div , the content is not displayed. I am literally breaking my head reading other similar posts, trying to find the error. Here I leave the source code of my page with its corresponding js and php.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Reino de la Miel</title>
<link rel="shortcut icon" type="image/x-icon" href="abeja.jpg">
<link rel="stylesheet" type="text/css" href="reino.css" media="screen" />
<script type="text/javascript" src="reino.js"></script>
<script type="text/javascript">
window.onload=function() {
window.addEventListener("onload",panel,false);
}
</script>
</head>
<body>
<div id="principal">
<div id="barra_menu">
<a href="localhost/reino/reino.html"><img src="reino_p.png" alt="Logo Reino"></a>
<ul id="menu">
<li onclick="panel('capilares')">Capilares</li>
<li onclick="panel('facial')">Cuidado facial</li>
<li onclick="panel('corporal')">Cuidado corporal</li>
<li onclick="panel('beauty')">Reino beauty</li>
<li onclick="panel('fragancias')">Fragancias</li>
<li onclick="panel('infantil')">Chicos</li>
<li onclick="panel('salud')">Reino de la miel</li>
</ul>
<ul onclick="mostrar()"><li id="sesion">Iniciar sesión</li></ul>
<div id="form_login">
<form method="post" action="sesion.php" name="sesion" enctype="application/x-www-form-urlencoded" onsubmit="return verificar()" onmouseover="if(temporizador) {clearInterval(temporizador);} this.style.backgroundColor='white';">
<h1>Inicie sesión:</h1>
<div>
<label for="usuario">Usuario: </label></div><div><input type="text" maxlength="50" name="usuario" onchange="this.style.backgroundColor = 'white';document.getElementsByTagName('h1')[0].innerHTML = 'Inicie sesión:';"></div>
<div><label for="contrasena">Contraseña: </label></div><div><input type="password" name="contrasena" maxlength="100" onchange="this.style.backgroundColor = 'white';document.getElementsByTagName('h1')[0].innerHTML = 'Inicie sesión:';"></div>
<button type="submit" value="Enviar">Enviar</button><button type="reset" value="Resetear">Limpiar</button><input type="submit" value="Registrarse" onclick="document.getElementsByTagName('form')[0].action='registrarse.php';document.getElementsByTagName('form')[0].removeAttribute('onsubmit');">
</form>
</div>
<div class="clear"></div>
</div>
<div id="contenido_descripcion">
</div>
<div id="panel">
</div>
</div>
</body>
</html>
Now the js:
function linea(categoria,linea) {
var contenido = new XMLHttpRequest();
contenido.onreadystatechange = function () {
if(contenido.readyState == 4 && contenido.status == 200) {
document.getElementById("contenido_descripcion").innerHTML=contenido.responseText;
}
}
contenido.open("GET","producto.php?categoria="+categoria+"&linea="+linea,true);
contenido.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
contenido.send();
}
function panel(var categoria="capilares") {
var contenido = new XMLHttpRequest();
contenido.onreadystatechange=function () {
if(contenido.readyState == 4 && (contenido.status == 200 || contenido.status==0) {
document.getElementById("panel").innerHTML=contenido.responseText;
linea(categoria,contenido.responseText.split('\n')[0]);
}
}
contenido.open("GET","producto.php?categoria="+categoria,true);
contenido.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
contenido.send();
}
Here's the php:
<?php
error_reporting("E_ALL");
$productos=["capilares"=>["Ortiga"=>["OC103","OC105","OC104","OC102"],
"Queen Bee"=>["QB100","QB101","QB103","QB102"],
"Energizante revitalizante"=>["RE101","RE100","EN101","EN100","EN102"],
"Aceite de keratina"=>["AK100","AK101","KC103","KC102"],
"Global Cure"=>["AG105","AG102","AG100","AG101"],
"Henna Almendras"=>["OC106","OC107","DA101","DA102","DA103"],
"Propoleos"=>[""],
"Jarilla y Cafe"=>[""]],
"cuidado facial"=>["Vitamina C"=>["VC300A","VC200","VC203","VC202"],
"Gravedad Cero"=>["GR200","GR201","GR202A"],
"Mango y Karite"=>["MK202","MK200","MK201"],
"Piure"=>["PI200","PI205","PI203","PI202","PI204"],
"Rejuvalene"=>["RJ209","RJ208"],
"Queen Bee"=>["QB207","QB208","QB209","QB206","QB210"],
"Eterna Juventud"=>["EJ204","EJ203","EJ202","EJ200","EJ201","EJ300"],
"Essential Oils"=>["ES201","ES200","ES300","ES202"],
"Caviar Gold Platinum"=>["CP200","CG200","CG203","CG201","CG202"],
"Argan y Oliva"=>["AO200","AO201","AO300","AO301A"],
"Power Hyaluronic Astaxantin"=>["AS202","PO200","PO202"],
"Collagenesse Alquimia"=>["EC202","EC201","AL200","AL203","AL201"],
"Propoleos"=>["PB102","PB103","PB201","PB304A","PB203","PB301","PB204","PB306"],
"Camila"=>["CA001","CA202","CA003","CA002"],
"Cellulite"=>["CE202","CE201","CE203","CE200"],
"Reductor"=>["RD201","RD200"],
"Beauty Feet Spa"=>["FU200","FU202","SP302","SP304","SP306"],
"Camomila Organica Blueberry"=>["PC203","BL200","BL300A","BL203"],
"Biopomada"=>["BI204","BI201","BI200","BI205"],
"Golden Sun"=>["GS212","GS213","GS214A","GS210A","GS211A"],
"Fragancias Femeninas"=>["FF064","FF067","FF033","SY008","SY007","FF015","FF014","FF017","FF048"],
"Fragancias Masculinas"=>["FF008","FM011","FM014","FM021","FF033","FM031","FM026","FM001","MA002","MA004","MA002"],/*continuar por acá*/
"Global Cure"=>[""],
"Resveratrol y Royal Jelly"=>[""],
"Caviar Gold"=>[""]],
"cuidado corporal"=>["Biopomada"=>[""],
"Astaxanthin"=>[""],
"Fragancias Femeninas"=>[""],
"Matrix Hombre"=>[""],
"Rose y Pink Pepper"=>[""],
"Beauty Feet"=>[""],
"Camomila Organica"=>[""],
"Fragancias Masculinas"=>[""],
"Propoleos"=>[""]],
"reino beauty"=>["Ojos"=>[""],
"Manos"=>[""],
"Rostro"=>[""],
"Labios"=>[""]],
"fragancias"=>["Femeninas"=>[""],
"Masculinas"=>[""]],
"reino de la miel"=>["Antioxidantes"=>[""],
"Circulatorio"=>[""],
"Control de Glucosa"=>[""],
"Control de Peso"=>[""],
"Energia"=>[""],
"Piel Cabello y Uñas"=>[""],
"Salud Cardiovascular"=>[""],
"Salud Digestiva"=>[""],
"Salud Emocional"=>[""],
"Salud Femenina"=>[""]]];
if(isset($_GET["categoria"]) && !isset($_GET["linea"])) {
foreach($productos[$_GET["categoria"]] as $lineas=>$codigos)
echo $lineas;
}
if(isset($_GET["categoria"]) && isset($_GET["linea"])) {
foreach($productos[$_GET["categoria"]][$_GET["linea"]] as $linea=>$producto) {
echo file_get_contents("productos/".$producto.".txt");
}
}
exit();
?>
Honestly, I've been reviewing the ajax, php, javascript manuals and I can not find (how blind I should be) the problem that prevents the content of the text file displayed by php from being loaded correctly by ajax in the div element. Thanks for all the help you can give me.
Code that now seems to work for reasons that I do not know:
Kingdom of Honey
window.onload = function () {let myPrimeraPromise = new Promise ((resolve, reject) = > {
// We call to solve (...) when what we were doing ends successfully, and reject (...) when it fails.
// In this example, we use setTimeout (...) to simulate asynchronous code.
// In real life, you probably use something like XHR or an HTML5 API.
var request = new XMLHttpRequest ();
request.onreadystatechange = function () {
if (request.readyState == 4 & & request.status == 200) {
document.getElementById ("content_description"). innerHTML = request.responseText;
}
}
request.open ("GET", "product.php? category = capillaries & line = Nettle", true);
request.setRequestHeader ("Content-Type", "application / x-www-form-urlencoded");
request.send (null);
resolve (); // All went well!
});
miPrimeraPromise.then((successMessage) => {
// succesMessage es lo que sea que pasamos en la función resolve(...) de arriba.
// No tiene por qué ser un string, pero si solo es un mensaje de éxito, probablemente lo sea.
document.getElementById("contenido_descripcion").innerHTML=successMessage;
});
contenido=solicitud=null;
}
</script>
</head>
<body>
<div id="principal">
<div id="barra_menu">
<a href="localhost/reino/reino.html"><img src="reino_p.png" alt="Logo Reino"></a>
<ul id="menu">
<li onclick="panel('capilares')">Capilares</li>
<li onclick="panel('facial')">Cuidado facial</li>
<li onclick="panel('corporal')">Cuidado corporal</li>
<li onclick="panel('beauty')">Reino beauty</li>
<li onclick="panel('fragancias')">Fragancias</li>
<li onclick="panel('infantil')">Chicos</li>
<li onclick="panel('salud')">Reino de la miel</li>
</ul>
<ul onclick="mostrar()"><li id="sesion">Iniciar sesión</li></ul>
<div id="form_login">
<form method="post" action="sesion.php" name="sesion" enctype="application/x-www-form-urlencoded" onsubmit="return verificar()" onmouseover="if(temporizador) {clearInterval(temporizador);} this.style.backgroundColor='white';">
<h1>Inicie sesión:</h1>
<div>
<label for="usuario">Usuario: </label></div><div><input type="text" maxlength="50" name="usuario" onchange="this.style.backgroundColor = 'white';document.getElementsByTagName('h1')[0].innerHTML = 'Inicie sesión:';"></div>
<div><label for="contrasena">Contraseña: </label></div><div><input type="password" name="contrasena" maxlength="100" onchange="this.style.backgroundColor = 'white';document.getElementsByTagName('h1')[0].innerHTML = 'Inicie sesión:';"></div>
<button type="submit" value="Enviar">Enviar</button><button type="reset" value="Resetear">Limpiar</button><input type="submit" value="Registrarse" onclick="document.getElementsByTagName('form')[0].action='registrarse.php';document.getElementsByTagName('form')[0].removeAttribute('onsubmit');">
</form>
</div>
<div class="clear"></div>
</div>
<div id="contenido_descripcion">
</div>
<div id="panel">
</div>
</div>
</body>