Autor Tema: PHP y Javascript. Insertar código javascript en PHP problema tipo comillas  (Leído 6018 veces)

HumbertoV

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 4
    • Ver Perfil
Hola a todos: no consigo hacer que se activen las funciones javascript al insertarlas dentro de código PHP.

¿Alguien me puede echar una mano?.

Lo que pretendo es que se activen los submenús al pasar el ratón.

Este es el código del archivo .php. Lo pego entero por si acaso.

Hay dos menús: el segundo <nav> hecho a "mano" que da el resultado que quiero conseguir haciéndolo con PHP.

Después, no creo que haga falta, pero por si acaso pego el código de la hoja de estilos. Dudo que el error esté en el CSS.

Muchas gracias de antemano.

Código: [Seleccionar]
<?php
$menu_array
=array( "Inicio",
"Servicios", array( "SubServ1",
"SubServ2"),
"Productos", array( "SubPro1",
"SubPro2",
"SubPro3"),
"Artículos", array( "SubArt1",
"SubArt2",
"SubArt3",
"SubArt4"),
"Contacto"
);
?>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="generales.css">
    <script src="lib/jquery-1.11.3.js"></script>
    <title>Página base</title>
    <script type="text/javascript">
function sMOver(NombreMenu) {
$('#'+NombreMenu+' li').addClass("subOver");
$('section').css('color','rgba(51,51,51,0.3)');
}
function sMOut() {
$('nav ul li ul li').removeClass("subOver");
$('section').css('color','rgba(51,51,51,1)')
}
</script>
</head>

<body>
<header>ENCABEZADO</header>

<nav>
<ul>
<?php
foreach (
$menu_array as $iMenu=>$itemMenu) {
if(count($itemMenu)<2) {
$identificador="$itemMenu";
//ESTA LÍNEA ES DONDE NO CONSIGO QUE LAS FUNCIONES JAVASCRIPT "ME HAGAN CASO"
echo "<li class='menuPrin' onMouseOver='sMOver('".$itemMenu."')' onMouseOut='sMOut()'><a href='".$itemMenu.".php'>".$itemMenu."</a>";
// A PARTIR DE AQUÍ FUNCIONA COMO QUIERO (eso creo)
} else {
echo "<ul id='" .$identificador"'>";
foreach($itemMenu as $iSubmenu=>$itemSub) {
echo "<li class='sub'><a href='".$itemSub.".php'>".$itemSub."</a></li>";
}
echo "</ul>";
echo "</li>";
}

}
?>

</ul>
</nav>
<br/><br/><br/>
<!--ESTO DA EL RESULTADO DESEADO, PERO CONSTRUYENDO EL MENÚ "A MANO"-->
<nav>
  <ul>
      <li class="menuPrin" onMouseOver="sMOver('Inicio')" onMouseOut="sMOut()"><a href="Inicio.php">Inicio</a></li>
    <li class="menuPrin" onMouseOver="sMOver('Servicios')" onMouseOut='sMOut()'><a href="Servicios.php">Servicios</a>
           <ul id='Servicios'>
              <li class='sub'><a href='Subservi.php'>SubServi</a></li>
              <li class="sub"><a href="#">Submenú2</a></li>
              <li class="sub"><a href="#">Submenú3</a></li>
           </ul>
      </li>
  <li class="menuPrin" onMouseOver="sMOver('Productos')" onMouseOut="sMOut()"><a href="#">Productos</a>
            <ul id="Productos">
              <li class="sub"><a href="#">SubProd</a></li>
              <li class="sub"><a href="#">Submenú2</a></li>
              <li class="sub"><a href="#">Submenú3</a></li>
            </ul>
      </li>
  <li class="menuPrin">Artículos</li>
  <li class="menuPrin">Contacto</li>
    </ul>
    </nav>
   
    <section>
Lorem fistrum no te digo trigo por no llamarte Rodrigor apetecan ese que llega condemor benemeritaar te voy a borrar el cerito jarl. Quietooor no puedor fistro pecador. No puedor por la gloria de mi madre te va a hasé pupitaa mamaar hasta luego Lucas la caidita. A gramenawer apetecan no te digo trigo por no llamarte Rodrigor condemor. A peich te va a hasé pupitaa sexuarl al ataquerl jarl está la cosa muy malar está la cosa muy malar no puedor hasta luego Lucas. Va usté muy cargadoo apetecan condemor apetecan diodenoo se calle ustée ese que llega.
    </section>
   
    <footer>
    </footer>


</body>
</html>

______________________________________________________
Este es el CSS, que no creo que haga falta.

Código: [Seleccionar]
@charset "utf-8";
/* CSS Document */

/*Generales*/

* {
margin:0;
padding:0;
border:0;
}
a {
text-decoration:none;
color:#000;
}
body {
font-size:1rem;
}
header, nav, section, footer {
max-width:98%;
}
/*Específicos*/

header {
margin:auto;
border:1px #000000 solid;
text-align:center;
margin-top:2rem;
}

li {
list-style-type: none;
margin-top:0.2rem;
}
.sub {
display:none;
}

.menuPrin {
display:inline-block;
vertical-align:top;
}
nav {
height:40px;
margin-left:1rem;
margin-top:1rem;
}
nav ul li {
width:200px;
border:1px solid #000;
}
nav ul li ul li a {
color:#FFF;
z-index:1;
padding:0.2rem 0 0 0.5rem;
}
section {
position: fixed;
height: 15%;
z-index:-1;
padding:0.1rem 1rem;
margin-top:1rem;
}

.subOver {
display:block;
background:rgba(0,0,0,1);
}

« Última modificación: 14 de Octubre 2015, 12:34 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola HumbertoV, para pegar código en los foros hazlo como se explica en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0 de esa manera el código quedará bien formateado

Si analizas el código que se genera cuando ejecutas el archivo php tienes lo siguiente:

Código: [Seleccionar]
<nav>
<ul>
<li class='menuPrin' onMouseOver='sMOver('Inicio')' onMouseOut='sMOut()'><a href='Inicio.php'>Inicio</a>
<li class='menuPrin' onMouseOver='sMOver('Servicios')' onMouseOut='sMOut()'><a href='Servicios.php'>Servicios</a>
<ul id='Servicios'><li class='sub'><a href='SubServ1.php'>SubServ1</a></li>
<li class='sub'><a href='SubServ2.php'>SubServ2</a></li></ul>
</li><li class='menuPrin' onMouseOver='sMOver('Productos')' onMouseOut='sMOut()'>
<a href='Productos.php'>Productos</a><ul id='Productos'><li class='sub'>
<a href='SubPro1.php'>SubPro1</a></li><li class='sub'><a href='SubPro2.php'>SubPro2</a></li>
<li class='sub'><a href='SubPro3.php'>SubPro3</a></li></ul></li>
<li class='menuPrin' onMouseOver='sMOver('Artículos')' onMouseOut='sMOut()'><a href='Artículos.php'>Artículos</a>
<ul id='Artículos'><li class='sub'><a href='SubArt1.php'>SubArt1</a></li><li class='sub'><a href='SubArt2.php'>SubArt2</a></li>
<li class='sub'><a href='SubArt3.php'>SubArt3</a></li><li class='sub'><a href='SubArt4.php'>SubArt4</a></li></ul></li>
<li class='menuPrin' onMouseOver='sMOver('Contacto')' onMouseOut='sMOut()'><a href='Contacto.php'>Contacto</a>
</ul>
</nav>

Si te fijas no se construye bien el balanceado de comillas por ejemplo

<li class='menuPrin' onMouseOver='sMOver('Inicio')' onMouseOut='sMOut()'>

No puedes usar el mismo tipo de comillas para delimitar el atributo html onMouseOver que para delimitar una cadena de texto que se pasa como argumento a JavaScript.

Esto puedes resolverlo construyendo el balanceado de comillas de la siguiente manera:

<li class="menuPrin" onMouseOver="sMOver('Inicio')" onMouseOut="sMOut()"><a href="Inicio.php">Inicio</a>

Donde se usan comillas dobles para los atributos html y comillas simples para delimitar cadenas en JavaScript (realmente no tiene por qué ser así, pero lo que se debe respetar es que no exista ambiguedad entre comillas)

Inténtalo y ya nos cuentas el resultado...

Saludos

HumbertoV

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 4
    • Ver Perfil
Muchísimas gracias Álex.

No me había dado cuenta del botón para pegar el código. A partir de ahora no se me pasa.

En cuanto a la solución, lo que buscaba era precisamente tener que escribir todos los datos de nombres de menús, submenús y archivos php por si me venían dados, por ejemplo, desde un formulario, que es lo que estoy buscando.
Y desde luego las comillas han sido el problema. He intentado todas las variantes de comillas simples y dobles comillas, incluyendo la que me aportas, pero nada.
Al final lo he resuelto de la forma más tonta: escribiendo parte en PHP y parte en HTML. Y funciona.
Este es el código (y sobre todo MUCHAS GRACIAS Álex):
Código: [Seleccionar]
<?php
foreach (
$menu_array as $iMenu=>$itemMenu) {
if(count($itemMenu)<2) {
$identificador="$itemMenu";
?>



<!-- Esta es la línea modificada-->
<li class="menuPrin" onMouseOver="sMOver('<?php echo $itemMenu?>')" onMouseOut="sMOut()"><a href="<?php echo $itemMenu?>.php"><?php echo $itemMenu?></a>
<?php



} else {
echo "<ul id='" .$identificador"'>";
foreach($itemMenu as $iSubmenu=>$itemSub) {
echo "<li class='sub'><a href='".$itemSub.".php'>".$itemSub."</a></li>";
}
echo "</ul>";
echo "</li>";
}
}
?>



Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Bueno me alegro que lo hayas resuelto y gracias por insertar el código. Saludos.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".