Hola a todos, pues es haber si me pueden ayudar con lo siguiente
como hago para cargar una pagina .html dentro de un div, pues ya lo he intentado con ajax y jquery, y pues no me funcionan adecuadamente y también he probado correrlo con un servidor y no me funciona
Este es el ejemplo con j-query
la librería j-query que se usa es: jquery-1.3.2.min, la cual la pueden descargar desde internet
Mi pagina index es la siguiente y la carga lo hace con la función load
Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Ajax</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".boton").click(function(event) {
$("#caja").load('mapap.html',aviso());
});
});
function aviso(){
alert('La solicitud ha sido procesada');
}
</script>
</head>
<body>
<p><input name="bt1" type="button" value="CARGA CONTENIDO" class="boton"/></p>
<div id="caja" style="padding:5px;border:1px solid #CCC;">
</div>
</body>
</html>
y la pagina que quiero cargar es la siguiente
Código HTML:
<!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=utf-8" />
<title>Mapas Google</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAG4YdWuMmjiAqxY-GQBT2FRQHQQ4rhzflwJYM2dTprN-ytLKE5hSJbYTH9J_XiQxX_xA14hFY0rHb1g" type="text/javascript"></script>
<script type="text/javascript" >
// Declaramos el creador del objeto geneura_member
function geneura_branch( lats,longs,pais,ciudad, direccion,telefono, url, compañia, nombreurl, logo)
{
this.lats=lats;
this.longs=longs;
this.pais=pais;
this.ciudad=ciudad;
this.direccion=direccion;
this.telefono=telefono;
this.url=url;
this.compañia=compañia;
this.nombreurl=nombreurl;
this.logo=logo;
}
// Declaramos la matriz
var matriz=new Array(5);
// inicializamos la matriz
var numbranch=0;
matriz[numbranch++]=new geneura_branch( "4.68055656",
"-74.08291262",
"Colombia",
"Bogota",
"Av68 75 A-50 P-2",
"6465596",
"www.ofiboletin.com",
"OFIBOLETIN SUC1",
"www.ofiboletin.com",
"Logos/suc1.gif" );
matriz[numbranch++]=new geneura_branch( "4.68155656",
"-74.08191262",
"Colombia",
"Bogota",
"Av68 78 -50 P-3",
"5465596 Ext1",
"www.ofiboletin.com",
"OFIBOLETIN SUC2",
"www.ofiboletin.com",
"Logos/suc2.gif" );
matriz[numbranch++]=new geneura_branch( "4.68255656",
"-74.08091262",
"Colombia",
"Bogota",
"Av68 79 A-50 P-4",
"4465596 Ext2",
"www.ofiboletin.com",
"OFIBOLETIN SUC3",
"www.ofiboletin.com",
"Logos/suc1.gif" );
matriz[numbranch++]=new geneura_branch( "4.68355656",
"-74.07991262",
"Colombia",
"Bogota",
"Av68 80 A-50 P-5",
"3465596 Ext3",
"www.ofiboletin.com",
"OFIBOLETIN SUC4",
"www.ofiboletin.com",
"Logos/suc1.gif" );
matriz[numbranch++]=new geneura_branch( "4.68455656",
"-74.07891262",
"Colombia",
"Bogota",
"Av68 81 A-50 P-6",
"2465596 Ext4",
"www.ofiboletin.com",
"OFIBOLETIN SUC5",
"www.ofiboletin.com",
"Logos/suc1.gif" );
function BranchesMap(matriz)
{
//Check browser compatylity
if (GBrowserIsCompatible())
{
var lats = matriz[0].lats;
var longs = matriz[0].longs;
var img = 'Marcadores/mar';
//Basic Info
var map = new GMap2(document.getElementById("mapIFrame"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.setMapType(G_NORMAL_MAP);
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(25, 25);
baseIcon.iconAnchor = new GPoint(13, 23);
baseIcon.infoWindowAnchor = new GPoint(10, 0);
baseIcon.infoShadowAnchor = new GPoint(17, 25);
for( i=0; i<numbranch; i++ )
{
var latitud = matriz[i].lats;
var longitud = matriz[i].longs;
urlSite = "<a href='http://" + matriz[i].url + "' target='_blank' class='linkC' title='" + matriz[i].compañia + "'>" + matriz[i].compañia + "</a>";
var info = "<div class='balloon'><div class='contentBalloon'><div class='nameBalloon'><h2><!-- Company Name-->"
+ urlSite +"</h2><br class='clear'></div>"
+ "<div class='infoBalloon'><span>" + matriz[i].direccion + "</span><br><span>" + matriz[i].pais + ", " + matriz[i].ciudad + "</span><br><!-- Phone Number --><div class='phones'>"
+ "<img width='20' height='13' src='Marcadores/spacer.gif' class='phoneImg2' alt='" + 'Telefonos' + "'>" + matriz[i].telefono + "</div>"
+ "<span><a target='_blank' class='linkB noDecoration fontBold' title='" + matriz[i].compañia + "' href='http://" + matriz[i].url + "'>" + matriz[i].url + "</a></span></div>";
info = info + "<div class='logoBalloon'><!-- Company main image --><a href='http://" + matriz[i].url + "' title='" + matriz[i].compañia + "' target='_blank'>"
+ "<img src='" + matriz[i].logo + "' alt='" + matriz[i].compañia + "' title='" + matriz[i].compañia + "' class='logoImg'></a></div>";
baseIcon.image = img + (i + 1).toString() + '.png';
var point = new GLatLng(latitud, longitud);
var marker = CreateMarker(point, baseIcon, info);
map.addOverlay(marker);
}
var center = new GLatLng(lats, longs);
map.setCenter(center, 17);
}
}
//Creates a map marker
function CreateMarker(point, baseIcon, html) {
var marker = new GMarker(point, { icon: baseIcon });
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml(html);
});
// The new marker "mouseover" listener
GEvent.addListener(marker, "mouseover", function () {
marker.openInfoWindowHtml(html);
});
return marker;
}
</script>
<style type="text/css">
.linkC{color:#234B5F;font-size:14px;font-weight:bold;text-decoration:none;text-transform:uppercase;text-decoration:none;}
/*////// Globo Mapas ///////////*/
.balloon{width:310px; position:relative; height:100px; margin:5px; background-color:#ffffff;}
.contentBalloon{ padding: 5px 10px;}
.nameBalloon{float:left;overflow:hidden;margin-top:1px;line-height:100%; font-family: arial,serif;font-size: 14px;font-weight: bold; width:170px; height:50px;}
.infoBalloon{float:left; margin-top:5px;line-height:100%;; padding:2px; padding-left:10px;padding-top:0px; width:165px}
.logoBalloon{float: right; overflow:hidden; text-align:center; padding-top:0px; margin-top:-12px; width:105px;}
.phones{ color: #666666;font-family: arial,serif;font-size: 12px;font-weight: bold;margin-left: -20px;position: relative;}
.phoneImg2{vertical-align:text-bottom;}
.balloon:hover .actionsAd, .results .balloon.hover .actionsAd {visibility:visible;}
.infoBalloon a:hover, .results .freeWidth a:hover{ text-decoration:underline; color:#EB7726;}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
</style>
</head>
<body onload="BranchesMap(matriz)">
<div id="mapIFrame" style="width: 1000px; height: 1000px"></div>
</body>
</html>
Les agradezco si me pueden ayudar
Les dejo un link de donde pueden descargar todo el proyecto
http://www.megaupload.com/?d=OKFQ8GAE
el archivo ajax-pageload, es el ejemplo con ajax
el archivo J-query es el ejemplo con j-query