jquery conflict

241 views
Skip to first unread message

ad@r

unread,
Apr 19, 2014, 6:45:21 AM4/19/14
to joi...@googlegroups.com
Hi, 
I've started a new Java EE project which has to use jointjs library. However, I'm using primefaces framework. I've put the hello world in my index.xhtml  (blue font)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <link rel="stylesheet" type="text/css" media="screen" href="css/joint.min.css" />
                
                <script type="text/javascript" src="js/jquery.js" />
                <script type="text/javascript" src="js/joint.nojquery.min.js" />
                
                <title>SI #{si.ocmSi.code} - #{si.ocmSi.name}</title>
                <!--<script type="text/javascript">jQuery.noConflict();</script>-->
            </f:facet>
            
        </h:head>

        <h:body>

            <p:layout fullPage="true">

                <p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
                    <p:graphicImage value="/images/banner.jpg" height="100"/> 
                </p:layoutUnit>

                <p:layoutUnit position="south" closable="true" collapsible="true">
                    <!--<p:clock pattern="HH:mm:ss dd.MM.yyyy" mode="server" />-->
                    <h:form>
                        <h:link value="Retour à l'accueil" outcome="index.xhtml" />
                    </h:form>
                    
                </p:layoutUnit>

                <p:layoutUnit position="west" size="180" header="Liste des SI" >
                    <ui:include src="/menu.xhtml" />
                </p:layoutUnit>

                <p:layoutUnit position="center">    
                    <h2 align="center" style="color: #f6a828;border:1px solid #f6a828;">
                        #{si.ocmSi.name}
                    </h2>
                    <p:tabView styleClass="ui-tabs-bottom" >
                        <p:tab title="Carte" titletip="Présentation des interactions entre les éléments du SI">
                            <div id="map">
                                
                            </div>
                        </p:tab>
                        <p:tab id="state" title="Etat" titletip="Etats des éléments du SI">
                            Etat 1
                        </p:tab>
                        <p:tab id="reporting" title="Rapports" titletip="Rapports de supervision pour le SI">
                            Rapports 1
                        </p:tab>
                    </p:tabView>
                   
                </p:layoutUnit>
                
            </p:layout>

<script type="text/javascript">
        
        var graph = new joint.dia.Graph;
    
        var paper = new joint.dia.Paper({
                el: $('#map'),
                width: 500,
                height: 500,
                model: graph
            });
            
            var rect = new joint.shapes.basic.Rect({
                position: { x: 100, y: 30 },
                size: { width: 100, height: 30 },
                attrs: { rect: { fill: 'orange' }, text: { text: 'my box', fill: 'white' } }
            });

            var rect2 = new joint.shapes.basic.Rect({
                position: { x: 100, y: 30 },
                size: { width: 100, height: 30 },
                attrs: { rect: { fill: 'orange' }, text: { text: 'my box2', fill: 'white' } }
            });
            
            rect2.translate(90);
            
            var link = new joint.dia.Link({
                source: { id: rect.id },
                target: { id: rect2.id }
            });
            
            graph.addCells([rect, rect2, link]);
            
</script>
        </h:body>
    </f:view>
 

    
</html>


I got the following error in javascript console.



  1. Uncaught TypeError: undefined is not a function joint.nojquery.min.js:11
    1. joint.dia.Paper.Backbone.View.extend.sortCellsjoint.nojquery.min.js:11
    4. a.Events.triggerjoint.nojquery.min.js:8
    6. a.Events.triggerjoint.nojquery.min.js:8
    9. joint.dia.Graph.Backbone.Model.extend.addCelljoint.nojquery.min.js:10
    10. (anonymous function)joint.nojquery.min.js:10
    11. (anonymous function)joint.nojquery.min.js:8
    13. joint.dia.Graph.Backbone.Model.extend.addCellsjoint.nojquery.min.js:10
    14. (anonymous function)

I'm beginner in js, don't know what to do. Can anyone help me?

Matias Favale

unread,
Apr 23, 2014, 6:54:58 PM4/23/14
to joi...@googlegroups.com
I am not sure how primefaces work exactly, but i guess your backend is compiling your html before sending it to the client.

Is a div with id 'map' included in the compiled html ?? And if it is, make sure it is visible, because jointjs cannot render elements on a non-visible paper.

Also, i suggest you to using chrome debugger to go through the javascript code, it always comes in handy.
Reply all
Reply to author
Forward
0 new messages