Tengo una página .php con 2 divs, uno es el menu superior y otro para cargar contenido de otras páginas php mediante Ajax.
Lás páginas php contienen funciones javascript para validar formularios y tambien para mostrar mapas de GoogleMaps en algunos casos, antes todo esto lo tenía funcionando con frames e iba perfectamente.
El problema es que al cargar las páginas .php dentro del div, no reconoce el código javascript que hay en esas páginas. Algunas soluciones que he leido es usar jquery o separar el html de javascript pero no explicaban cómo hacerlo así que estoy un poco perdido, no se por donde empezar o exactamente cuales son los pasos a seguir para que reconozca el código javascript dentro del DIV. Agradecería cualquier ayuda o indicación.
A continuación pongo el código de princpal.php que es donde está el menu superior y el div contenido e insertarMarca.php que es la página con código javascript que no se reconoce en el div de principal.php
principal.php
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<script type="text/javascript" src="ajax.js"></script>
<script>
</script>
<style type="text/css">
<!--
#div-superior {
position:absolute;
width:1024px;
height:49px;
z-index:2;
background-color: #333333;
}
#div-inicio {
position:absolute;
width:38px;
height:24px;
z-index:1;
left: 8px;
top: 15px;
}
#div-conexion {
position:absolute;
width:64px;
height:23px;
z-index:2;
left: 59px;
top: 14px;
}
#div-texto {
position:absolute;
width:395px;
height:40px;
z-index:3;
left: 561px;
top: 11px;
}
#Layer1 {
position:absolute;
width:434px;
height:46px;
z-index:6;
left: 0px;
top: 52px;
background-image: url(img/header_left.jpg);
}
#Layer2 {
position:absolute;
width:537px;
height:44px;
z-index:6;
left: 436px;
top: 52px;
background-image: url(img/ourense2.jpg);
}
#div-azul-izq {
position:absolute;
width:325px;
height:75px;
z-index:1;
left: 25px;
top: 51px;
background-image: url(img/blue_menor.PNG);
}
#div-naranja-centro {
position:absolute;
width:323px;
height:76px;
z-index:1;
left: 351px;
top: 50px;
background-image: url(img/orange_menor.PNG);
}
#div-verde-dch {
position:absolute;
width:322px;
height:76px;
z-index:1;
left: 674px;
top: 50px;
background-image: url(img/green_menor.PNG);
}
#div-nuevamarca {
position:absolute;
width:127px;
height:23px;
z-index:1;
left: 7px;
top: 7px;
}
.Estilo1 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
}
#div-actualizar {
position:absolute;
width:287px;
height:23px;
z-index:1;
left: 13px;
top: 9px;
}
#div-eliminar {
position:absolute;
width:296px;
height:22px;
z-index:1;
left: 10px;
top: 11px;
}
#Layer9 {
position:absolute;
width:268px;
height:49px;
z-index:1;
left: 64px;
top: 1px;
}
.Estilo2 {
font-size: 36px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#div-barra-horizontal {
position:absolute;
width:1024px;
height:85px;
z-index:0;
top: 50px;
background-color: #333333;
}
.Estilo3 {color: #FFFFFF; text-decoration: none}
.Estilo4 {color: #FFFFFF; font-size: 18px; }
#div-texto-superior {
position:absolute;
width:765px;
height:30px;
z-index:4;
left: 189px;
top: 12px;
}
#Layer12 {
position:absolute;
width:211px;
height:21px;
z-index:2;
left: 7px;
top: 120px;
}
#Layer13 {
position:absolute;
width:200px;
height:115px;
z-index:3;
left: 364px;
top: 38px;
}
#Layer14 {
position:absolute;
width:200px;
height:17px;
z-index:2;
left: 5px;
top: 118px;
}
#Layer15 {
position:absolute;
width:200px;
height:24px;
z-index:2;
top: 99px;
left: 0px;
}
#div-nuevamarca-entrar {
position:absolute;
width:61px;
height:36px;
z-index:3;
left: 234px;
top: 34px;
}
#div-actualizar-entrar {
position:absolute;
width:82px;
height:32px;
z-index:3;
left: 220px;
top: 39px;
}
#div-eliminar-entrar {
position:absolute;
width:83px;
height:27px;
z-index:3;
left: 219px;
top: 44px;
}
#div-principal {
position:absolute;
width:1024px;
height:136px;
z-index:3;
left: 0px;
top: 0px;
}
#div-nuevamarca-entrar {
position:absolute;
width:61px;
height:36px;
z-index:3;
left: 234px;
top: 34px;
}
#menu{
position:absolute;
width: 61px;
height: 32px;
left:234:px;
top: 34:px;
border: 3px solid #ececff;
border-right-color: #006;
left: 228px;
top: 33px;
}
#menu a{
position:absolute;
padding: 3px 1px;
display: block;
width: 61px;
height: 36px;
left:234:px;
top: 34:px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray; color: #606;
}
#menu a:hover{
position:absolute;
background-color: #99c;
color: #fff;
position:absolute;
width: 61px;
height: 36px;
left:234:px;
top: 34:px;
z-index:1;
}
#contenidos {
position:absolute;
width:1024px;
height:auto;
min-height:500px;
z-index:4;
top: 137px;
background-color: #CCCCCC;
}
-->
</style>
</head>
<body>
<div id="div-superior">
<div class="Estilo3" id="div-inicio"><a href="inferior1.html" target="inferior">Inicio</a></div>
<div class="Estilo3" id="div-conexion"><a href="salir.php" target="superior">Salir</a></div>
<div class="Estilo4" id="div-texto-superior"> SISTEMA DE INFORMACIÓN TURÍSTICA DE LA CIUDAD DE OURENSE BASADO EN MAPAS </div>
</div>
<div id="div-azul-izq">
<div class="Estilo1" id="div-nuevamarca">NUEVA MARCA </div>
<div id="menu"> <a href="javascript:llamarasincrono('insertarMarca.php', 'contenidos');">Entrar</a></div>
</div>
<div id="div-naranja-centro">
<div class="Estilo1" id="div-actualizar">ACTUALIZAR CONTENIDO DE UNA MARCA </div>
<div id="div-actualizar-entrar"><a href="javascript:llamarasincrono('mostrar_marcas.php', 'contenidos');">Entrar</a></div>
</div>
<div id="div-verde-dch">
<div class="Estilo1" id="div-eliminar">ELIMINAR CONTENIDO MULTIMEDIA </div>
<div id="div-eliminar-entrar"><a href="javascript:llamarasincrono('mostrar_fotos_videos.php', 'contenidos');">Entrar</a></div>
</div>
<div id="div-barra-horizontal"></div>
<div id="contenidos"></div>
</body>
</html>
insertarMarca.php
Código :
<?php include ("bloqueDeSeguridad.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Documento sin título</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=TU-GOOGLE-MAPS-KEY"></script>
<script type="text/javascript">
//<![CDATA[
function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}
function cambia(obj,Cntrl){
var oCntrl=document.getElementById(Cntrl);
while (oCntrl.length!=0){
oCntrl.remove(0);
}
switch (obj.selectedIndex){
case 0:
addOpt(oCntrl, 0, "Antes elige tipo de marca", "0");
break;
case 1:
addOpt(oCntrl, 0, "4 estrellas", "4 estrellas");
addOpt(oCntrl, 1, "3 estrellas", "3 estrellas");
addOpt(oCntrl, 2, "2 estrellas", "2 estrellas");
addOpt(oCntrl, 3, "1 estrellas", "1 estrellas");
break;
case 2:
addOpt(oCntrl, 0, "3 estrellas", "3 estrellas");
addOpt(oCntrl, 1, "2 estrellas", "2 estrellas");
addOpt(oCntrl, 2, "1 estrella", "1 estrella");
break;
case 3:
addOpt(oCntrl, 0, "grupo A", "grupo A");
addOpt(oCntrl, 1, "grupo B", "grupo A");
addOpt(oCntrl, 2, "grupo C", "grupo C");
break;
case 4:
addOpt(oCntrl, 0, "Municipal", "municipal");
addOpt(oCntrl, 1, "Arqueologico", "arqueologico");
addOpt(oCntrl, 2, "Catedralicio", "catedralicio");
break;
case 5:
addOpt(oCntrl, 0, "Catedral", "catedral");
addOpt(oCntrl, 1, "Iglesia", "iglesia");
addOpt(oCntrl, 2, "Centro Historico", "centro historico");
addOpt(oCntrl, 3, "Puente", "puente");
addOpt(oCntrl, 4, "Edificio", "edificio");
break;
case 6:
addOpt(oCntrl, 0, "Estatua", "estatua");
addOpt(oCntrl, 1, "Parque", "parque");
addOpt(oCntrl, 2, "Exposicion", "exposicion");
break;
case 7:
addOpt(oCntrl, 0, "Deporte", "deporte");
addOpt(oCntrl, 1, "Moda", "moda");
addOpt(oCntrl, 2, "Complementos", "complementos");
break;
case 8:
addOpt(oCntrl, 0, "Bar", "bar");
addOpt(oCntrl, 1, "Cafeteria", "cafeteria");
break;
case 9:
addOpt(oCntrl, 0, "Primera hora", "primera hora");
addOpt(oCntrl, 1, "Ultima hora", "ultima hora");
break;
case 10:
addOpt(oCntrl, 0, "3 tenedores", "3 tenedores");
addOpt(oCntrl, 1, "2 tenedores", "2 tenedores");
addOpt(oCntrl, 2, "1 tenedor", "1 tenedor");
break;
case 11:
addOpt(oCntrl, 0, "Gratis", "gratis");
addOpt(oCntrl, 1, "De pago", "de pago");
break;
}
}
function control_imagenes(f){
var ext=['gif','jpg','jpeg','png'];
var v=f.value.split('.').pop().toLowerCase();
for(var i=0,n;n=ext[i];i++){
if(n.toLowerCase()==v)
return
}
var t=f.cloneNode(true);
t.value='';
f.parentNode.replaceChild(t,f);
alert('El campo foto cabecera debe de ser de tipo imagen');
}
function validar(){
//valido el nombre
if (document.formulario.nombre.value.length==0){
alert("El campo nombre esta vacio")
document.formulario.nombre.focus()
return false;
}
if (document.formulario.tipo_marca.selectedIndex ==0){
alert("No hay ningun tipo de marca seleccionada")
document.formulario.tipo_marca.focus()
return false;
}
if (document.formulario.descripcion_breve.value.length==0){
alert("El campo datos esta vacio")
document.formulario.descripcion.focus()
return false;
}
if (document.formulario.descripcion.value.length==0){
alert("El campo descripcion esta vacio")
document.formulario.descripcion.focus()
return false;
}
if (document.formulario.imagen.value.length ==0){
alert("No hay ninguna foto de cabecera seleccionada")
document.formulario.tipo_marca.focus()
return false;
}
if (document.formulario.lat.value.length==0){
alert("El campo latitud esta vacio")
document.formulario.lat.focus()
return false;
}
if (document.formulario.lng.value.length==0){
alert("El campo longitud esta vacio")
document.formulario.lng.focus()
return false;
}
if (isNaN(document.formulario.lat.value)) {
alert("El campo latitud solo puede contener numeros");
document.formulario.tipo_marca.focus()
return false;
}
if (document.formulario.lng.value < -180 || document.formulario.lat.value > 180){
alert("El rango de valores para Longitud es de -180 a 180")
document.formulario.lng.focus()
return false;
}
if (isNaN(document.formulario.lng.value)) {
alert("El campo longitud solo puede contener numeros");
document.formulario.tipo_marca.focus()
return (false);
}
if (document.formulario.lat.value < -90 || document.formulario.lat.value > 90){
alert("El rango de valores para Latitud es de -90 a 90")
document.formulario.lat.focus()
return false;
}
return true;
}
//google.load('maps', '2');
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(42.33989,-7.866),13);
map.addMapType(G_SATELLITE_3D_MAP);
map.addControl(new GHierarchicalMapTypeControl());
map.addControl(new GLargeMapControl());
var point = new GPoint (-7.866,42.33989);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(map, "click", function (overlay,point){
if (point){
marker.setPoint(point);
document.formulario.lat.value=point.y
document.formulario.lng.value=point.x
}
});
}
}
window.onload=load
//]]>
</script>
<style type="text/css">
<!--
#map {
position:absolute;
left:550px;
top:18px;
width:300px;
height:391px;
}
-->
a.estilo1 { font-weight: bold; font-size:18px; color: #0B0B3B; text-decoration: none}
a.estilo2 { font-weight: bold; fotn-size:10px; color: #0B0B3B; text-decoration: none}
</style>
</head>
<body >
<div id="principal">
<form enctype="multipart/form-data" name="formulario" method="post" action="procesar_marca.php" onSubmit="return validar()">
<table width="200" border="0">
<tr>
<td>Nombre:</td>
<td><label>
<input name="nombre" type="text" size="50" />
</label></td>
</tr>
<tr>
<td>Tipo:</td>
<td>
<select name="tipo_marca" id="tipo_marca" onChange="cambia(this,'categoria')">
<option value="0">Elige tipo de marca</option>
<option value="hotel">Hotel</option>
<option value="pension">Pension</option>
<option value="casa_rural">Casa rural</option>
<option value="museo">Museo</option>
<option value="arquitectura">Arquitectura</option>
<option value="otros_espacios">Otros espacios</option>
<option value="tienda_ropa">Tienda de ropa</option>
<option value="bar_cafeteria">Bar/Cafeteria</option>
<option value="pub">Pub</option>
<option value="restaurante">Restaurante</option>
<option value="termalismo">Termalismo</option>
</select>
</td>
</tr>
<tr>
<td>Categoría:</td>
<td>
<select name="categoria" id="categoria">
<option value="0">Antes elige tipo de marca</option>
</select>
</td>
</tr>
<tr>
<td>Foto de cabecera:</td>
<td><label>
<input name="imagen" type="file" onchange="control_imagenes(this)">
</label></td>
</tr>
<tr>
<td>Datos:</td>
<td><label>
<textarea name="descripcion_breve" cols="50" rows="5"></textarea>
</label></td>
</tr>
<tr>
<td>Descripcion:</td>
<td><label>
<textarea name="descripcion" cols="50" rows="13"></textarea>
</label></td>
</tr>
<tr>
<td>Latitud:</td>
<td><label>
<input type="text" name="lat" />
</label></td>
</tr>
<tr>
<td>Longitud:</td>
<td><label>
<input type="text" name="lng" />
</label></td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="enviar" value="Guardar marca" />
<input type="reset" name="vaciar" value="Limpiar formulario" />
</td>
</tr>
</table>
</form>
<div id="map" ></div>
</div>
</body>
</html>
