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
