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>