Databases
StackOverflow2013
Postsdbo
POuncaught exception in jQuery UI Tabs: Mismatching fragment identifier
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POuncaught exception in jQuery UI Tabs: Mismatching fragment identifier
    primarykey
    data
    text
    <p>I have this JSF tabs with JQuery and AJAX. But there is a bug that I cannot find. This is the JSF page:</p> <pre class="lang-html prettyprint-override"><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;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"&gt; &lt;h:head&gt; &lt;title&gt;DX-57 History Center&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia.com/images/favicon.ico" /&gt; &lt;link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" /&gt; &lt;link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" /&gt; &lt;link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" /&gt; &lt;script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="resources/js/jquery-ui-1.8.18.custom.min.js"&gt;&lt;/script&gt; &lt;link href="resources/css/jquery-ui-1.8.18.custom.css" media="screen" rel="stylesheet" type="text/css" /&gt; &lt;script type="text/javascript" src="resources/js/mytabs.js"&gt;&lt;/script&gt; &lt;/h:head&gt; &lt;h:body&gt; &lt;h1&gt;&lt;img src="resources/css/images/icon.png" alt="NVIDIA.com" /&gt; History Center&lt;/h1&gt; &lt;!-- layer for black background of the buttons --&gt; &lt;div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black"&gt; &lt;!-- Include page Navigation --&gt; &lt;ui:insert name="Navigation"&gt; &lt;ui:include src="Navigation.xhtml"/&gt; &lt;/ui:insert&gt; &lt;/div&gt; &lt;div id="greenBand" style="position:relative; top:35px; left:0px;"&gt; &lt;h:graphicImage alt="Dashboard" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_application.png" /&gt; &lt;/div&gt; &lt;div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px"&gt; &lt;div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px"&gt; &lt;div id="settingsHashMap" style="width:650px; height:400px; position:absolute; background-color:r; top:20px; left:1px"&gt; &lt;h:form prependId="false"&gt; &lt;h:panelGroup id="tabs" layout="block"&gt; &lt;ul&gt; &lt;c:forEach items="#{ApplicationController.tabs}" var="tab"&gt; &lt;li&gt;&lt;a href="##{tab.tabid}" onclick="$('#button_#{tab.tabid}').click()"&gt;#{tab.tabid}&lt;/a&gt;&lt;/li&gt; &lt;h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{ApplicationController.switchPages(tab.tabid)}" style="display:none"&gt; &lt;f:ajax render="tabs"&gt;&lt;/f:ajax&gt; &lt;/h:commandButton&gt; &lt;/c:forEach&gt; &lt;/ul&gt; &lt;c:forEach items="#{ApplicationController.tabs}" var="tab"&gt; &lt;h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq ApplicationController.selectedTab}"&gt; &lt;ui:include src="#{tab.tabfilename}"&gt;&lt;/ui:include&gt; &lt;/h:panelGroup&gt; &lt;/c:forEach&gt; &lt;/h:panelGroup&gt; &lt;/h:form&gt; &lt;/div&gt; &lt;div id="settingsdivb" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:800px"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/h:body&gt; &lt;/html&gt; </code></pre> <p>This is the code of the managed bean:</p> <pre><code>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&lt;MyTabObject&gt;(); 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&lt;MyTabObject&gt; tabs; public List&lt;MyTabObject&gt; getTabs() { return tabs; } public void setTabs(List&lt;MyTabObject&gt; 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; } } } </code></pre> <p>The JSF page has these tabs:</p> <p>ApplicationTabMain.xhtml</p> <pre class="lang-html prettyprint-override"><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;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"&gt; &lt;h:head&gt; &lt;/h:head&gt; &lt;h:body&gt; &lt;ui:composition&gt; &lt;h:panelGroup&gt; &lt;h:form&gt; Main &lt;/h:form&gt; &lt;/h:panelGroup&gt; &lt;/ui:composition&gt; &lt;/h:body&gt; &lt;/html&gt; </code></pre> <p>ApplicationTabModel.xhtml</p> <pre class="lang-html prettyprint-override"><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;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"&gt; &lt;h:head&gt; &lt;/h:head&gt; &lt;h:body&gt; &lt;ui:composition&gt; &lt;h:panelGroup&gt; &lt;h:form&gt; Model &lt;/h:form&gt; &lt;/h:panelGroup&gt; &lt;/ui:composition&gt; &lt;/h:body&gt; &lt;/html&gt; </code></pre> <p>ApplicationTabSettings.xhtml</p> <pre class="lang-html prettyprint-override"><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;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"&gt; &lt;h:head&gt; &lt;/h:head&gt; &lt;h:body&gt; &lt;ui:composition&gt; &lt;h:panelGroup&gt; &lt;h:form&gt; Settings &lt;/h:form&gt; &lt;/h:panelGroup&gt; &lt;/ui:composition&gt; &lt;/h:body&gt; &lt;/html&gt; </code></pre> <p>For now I have only plain JSF tabs without any Java code. This is the problem:</p> <p><img src="https://i.stack.imgur.com/Oa4Jm.png" alt="enter image description here"></p> <p><img src="https://i.stack.imgur.com/UIsn0.png" alt="enter image description here"></p> <p><img src="https://i.stack.imgur.com/LetLr.png" alt="enter image description here"></p> <p>The content of the tabs is not displayed. In firebug I get this error:</p> <pre><code>uncaught exception: jQuery UI Tabs: Mismatching fragment identifier. </code></pre> <p>How I can fix this error?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBalusC
    1. USPeter Penzov
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POuncaught exception in jQuery UI Tabs: Mismatching fragment identifier
      1. USPeter Penzov
      1. VTBountyStart
    2. VO
      singulars
      1. POuncaught exception in jQuery UI Tabs: Mismatching fragment identifier
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POuncaught exception in jQuery UI Tabs: Mismatching fragment identifier
      1. This table or related slice is empty.
      1. VTUpMod
    1. COUsing a decent JSF UI component library like PrimeFaces or RichFaces saves you from this kind of problems and a lot of time waste because you're attempting to homebrew it yourself (or letting others do..) with poor basic HTML/CSS/JS/JSF knowledge.
      singulars
      1. POuncaught exception in jQuery UI Tabs: Mismatching fragment identifier
      1. USBalusC
    2. CONice with so much information, but the actual rendered html would also be useful.
      singulars
      1. POuncaught exception in jQuery UI Tabs: Mismatching fragment identifier
      1. USjornare
    3. COThis is the HTML code: http://pastebin.com/SNNx2pMy
      singulars
      1. POuncaught exception in jQuery UI Tabs: Mismatching fragment identifier
      1. USPeter Penzov
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload