java - jQuery UI タブでキャッチされない例外: フラグメント識別子の不一致

Question

JQueryとAJAXを備えたこのJSFタブがあります。しかし、見つけられないバグがあります。これは JSF ページです。

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"    
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>DX-57 History Center</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia.com/images/favicon.ico" />
        <link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="resources/js/jquery-ui-1.8.18.custom.min.js"></script>
        <link href="resources/css/jquery-ui-1.8.18.custom.css" media="screen" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="resources/js/mytabs.js"></script>
    </h:head>
    <h:body>

        <h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1>
        <!-- layer for black background of the buttons -->
        <div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative;  background-color:black">
            <!-- Include page Navigation -->
            <ui:insert name="Navigation">           
                <ui:include src="Navigation.xhtml"/>         
            </ui:insert>

        </div>  

        <div id="greenBand" style="position:relative; top:35px; left:0px;"> 
            <h:graphicImage alt="Dashboard"  style="position:relative; top:-20px; left:9px;"  value="resources/images/logo_application.png" />
        </div>
        <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px">

            <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px">

                <div id="settingsHashMap" style="width:650px; height:400px; position:absolute;  background-color:r; top:20px; left:1px">


                        <h:form prependId="false">
                            <h:panelGroup id="tabs" layout="block">
                                <ul>
                                    <c:forEach items="#{ApplicationController.tabs}" var="tab">
                                        <li><a href="##{tab.tabid}" onclick="$('#button_#{tab.tabid}').click()">#{tab.tabid}</a></li>
                                        <h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{ApplicationController.switchPages(tab.tabid)}" style="display:none">
                                            <f:ajax render="tabs"></f:ajax>
                                        </h:commandButton>  
                                    </c:forEach>
                                </ul>

                                <c:forEach items="#{ApplicationController.tabs}" var="tab">
                                    <h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq ApplicationController.selectedTab}">
                                        <ui:include src="#{tab.tabfilename}"></ui:include>
                                    </h:panelGroup>
                                </c:forEach>
                            </h:panelGroup>
                        </h:form>


                </div>   

                <div id="settingsdivb" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:800px">

                </div>   

            </div>  
        </div>

    </h:body>
</html>

これはマネージド Bean のコードです。

import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
// or import javax.faces.bean.SessionScoped;
import javax.inject.Named;
/* include SQL Packages */
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.sql.DataSource;
import javax.annotation.Resource;
import javax.faces.context.FacesContext;
import javax.inject.Inject;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
// or import javax.faces.bean.ManagedBean;   

import org.glassfish.osgicdi.OSGiService;

@Named("ApplicationController")
@SessionScoped
public class Application implements Serializable {

    public Application() {
    }
    /* Call the Oracle JDBC Connection driver */
    @Resource(name = "jdbc/Oracle")
    private DataSource ds;

    @PostConstruct
    public void init() {
        tabs = new ArrayList<MyTabObject>();
        tabs.add(new MyTabObject("ApplicationTabMain.xhtml", "Main"));
        tabs.add(new MyTabObject("ApplicationTabModel.xhtml", "Model"));
        tabs.add(new MyTabObject("ApplicationTabSettings.xhtml", "Settings"));

    }
    String selectedTab = "Main";

    public String getSelectedTab() {
        return selectedTab;
    }

    public void setSelectedTab(String selectedTab) {
        this.selectedTab = selectedTab;
    }

    public String switchPages(String selTab) {
        selectedTab = selTab;
        return "Application.xhtml";
    }
    List<MyTabObject> tabs;

    public List<MyTabObject> getTabs() {
        return tabs;
    }

    public void setTabs(List<MyTabObject> tabs) {
        this.tabs = tabs;
    }

    ////
    public class MyTabObject {

        String tabfilename;
        String tabid;

        public String getTabfilename() {
            return tabfilename;
        }

        public void setTabfilename(String tabfilename) {
            this.tabfilename = tabfilename;
        }

        public String getTabid() {
            return tabid;
        }

        public void setTabid(String tabid) {
            this.tabid = tabid;
        }

        public MyTabObject(String tabfilename, String tabid) {
            super();
            this.tabfilename = tabfilename;
            this.tabid = tabid;
        }
    }
}

JSF ページには次のタブがあります。

ApplicationTabMain.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"    
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>

    </h:head>
    <h:body>
        <ui:composition>
            <h:panelGroup>
                <h:form>
                    Main
                </h:form>
            </h:panelGroup>
        </ui:composition>
    </h:body>
</html>

ApplicationTabModel.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"    
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>

    </h:head>
    <h:body>
        <ui:composition>
            <h:panelGroup>
                <h:form>
                    Model
                </h:form>
            </h:panelGroup>
        </ui:composition>
    </h:body>
</html>

ApplicationTabSettings.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"    
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>

    </h:head>
    <h:body>
        <ui:composition>
            <h:panelGroup>
                <h:form>
                    Settings
                </h:form>
            </h:panelGroup>
        </ui:composition>
    </h:body>
</html>

今のところ、Java コードのない単純な JSF タブしかありません。これが問題です：

ここに画像の説明を入力

タブの内容は表示されません。firebug では、次のエラーが発生します。

uncaught exception: jQuery UI Tabs: Mismatching fragment identifier.

このエラーを修正するにはどうすればよいですか?

score 5 · Accepted Answer

これに従って、互換性のない jquery/jqueryui バージョンを使用する可能性がある兆候があります。

まだ jquery 1.3.2 に切り替えていない場合は、切り替えてみてください。

java - jQuery UI タブでキャッチされない例外: フラグメント識別子の不一致

1 に答える 1

Related

Reference