How to put a Google Maps in a tabbed panel with jQuery tags?
I have a web Project with Struts2. My main page, it's made with jQuery tabs. Two of this tags must contains a Google Maps, but the tab don't show it. I'm using jQuery Struts2 plugin, i.e. I'm using jQuery tags, not native jQuery. In the jQuery web there is a solution, but I don't know how to do with jQuery tags or where to pu开发者_如何学运维t the code.
Here you are the code:
mainPage:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<sj:head jqueryui="true"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Localizadroid Beta</title>
</head>
<body>
<h1>Localizadroid - Versión 4.1.1</h1>
<s:url id="ajaxAmigos" value="/friendsTab.action"/>
<s:url id="ajaxPeticiones" value="/showFriendRequest.action"/>
<s:url id="ajaxMapasAgregar" value="/tabMaps.action"/>
<s:url id="ajaxMapasEditar" value="/editMaps.action"/>
<s:url id="ajaxBuscar" value="searchFriend.action"/>
<sj:tabbedpanel id="localtabs">
<sj:tab id="tab1" target="home" label="Home" />
<sj:tab id="tab2" target="amigos" label="Amigos"/>
<sj:tab id="tab3" target="peticiones" label="Peticiones de Amistad"/>
<sj:tab id="tab4" target="buscar" label="Buscar amigos"/>
<sj:tab id="tab5" target="mapasAgregar" label="Mapas - Agregar marcadores"/>
<sj:tab id="tab6" target="mapasEditar" label="Mapas - Editar marcadores"/>
<sj:div id="home">
</sj:div>
<sj:div id="amigos" href="%{ajaxAmigos}" indicator="indicator">
</sj:div>
<sj:div id="peticiones" href="%{ajaxPeticiones}" indicator="indicator">
</sj:div>
<sj:div id="buscar" indicator="indicator">
<s:form id="buscador" action="searchFriend.action" method="post">
<s:actionerror />
<p>Introduzca el nombre de la persona que busca</p>
<p><s:textfield name="friendSearch" size="30" /></p>
<s:submit method="execute" key="label.searchFriends" align="center" />
<sj:a id="ajaxBuscar" formIds="buscador" href="%{ajaxBuscar}" targets="buscar" indicator="indicator" button="true" buttonIcon="ui-icon-refresh">
Buscar
</sj:a>
</s:form>
</sj:div>
<sj:div id="mapasAgregar" href="%{ajaxMapasAgregar}" indicator="indicator">
</sj:div>
<sj:div id="mapasEditar" href="%{ajaxMapasEditar}" indicator="indicator">
</sj:div>
</sj:tabbedpanel>
</body>
</html>
The googleMaps JSP page is a typical JSP page with the map:
Somebody can help me please? Thank you so match!
You should put target divs outside of the tabbed panel tag and you don't need to create a extra div for ajax based tabs.
Please try this:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<sj:head jqueryui="true"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Localizadroid Beta</title>
</head>
<body>
<h1>Localizadroid - Versión 4.1.1</h1>
<s:url id="ajaxAmigos" value="/friendsTab.action"/>
<s:url id="ajaxPeticiones" value="/showFriendRequest.action"/>
<s:url id="ajaxMapasAgregar" value="/tabMaps.action"/>
<s:url id="ajaxMapasEditar" value="/editMaps.action"/>
<s:url id="ajaxBuscar" value="searchFriend.action"/>
<sj:tabbedpanel id="localtabs">
<sj:tab id="tab1" target="home" label="Home" />
<sj:tab id="tab2" href="%{ajaxAmigos}" label="Amigos"/>
<sj:tab id="tab3" href="%{ajaxPeticiones}" label="Peticiones de Amistad"/>
<sj:tab id="tab4" target="buscar" label="Buscar amigos"/>
<sj:tab id="tab5" href="%{ajaxMapasAgregar}" label="Mapas - Agregar marcadores"/>
<sj:tab id="tab6" href="%{ajaxMapasEditar}" label="Mapas - Editar marcadores"/>
</sj:tabbedpanel>
<div id="home"></div>
<div id="buscar">
<s:form id="buscador" action="searchFriend.action" method="post">
<s:actionerror />
<p>Introduzca el nombre de la persona que busca</p>
<p><s:textfield name="friendSearch" size="30" /></p>
<s:submit method="execute" key="label.searchFriends" align="center" />
<sj:a id="ajaxBuscar" formIds="buscador" href="%{ajaxBuscar}" targets="buscar" indicator="indicator" button="true" buttonIcon="ui-icon-refresh">
Buscar
</sj:a>
</s:form>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论