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

HumbertoV · « **en:** 12 de Octubre 2015, 12:23 »

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);
}

Alex Rodríguez · « **Respuesta #1 en:** 14 de Octubre 2015, 12:37 »

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 · « **Respuesta #2 en:** 14 de Octubre 2015, 22:42 »

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 · « **Respuesta #3 en:** 16 de Octubre 2015, 11:45 »

Bueno me alegro que lo hayas resuelto y gracias por insertar el código. Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

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

HumbertoV

PHP y Javascript. Insertar código javascript en PHP problema tipo comillas

Alex Rodríguez

Re:PHP y Javascript. Insertar código javascript en PHP problema tipo comillas

HumbertoV

Re:PHP y Javascript. Insertar código javascript en PHP problema tipo comillas

Alex Rodríguez

Re:PHP y Javascript. Insertar código javascript en PHP problema tipo comillas

Preguntas y respuestas