have a go with http://docs.jquery.com/Core/jQuery.noConflict
2010/1/15 j...@verax <joti.bis...@gmail.com>
> I found the problem.
>
> Its the $ sign ! The $ sign has a very special meaning in the jQuery
> framework. So if it is used in any other Javascript that doesnt use
> jQuery, it will be incompatible. So this means we should not use '$'
> in our code just because it looks cool ! Also, be very careful when
> you copy javascript plug-ins from the internet if you are already
> using javascript frameworks. They will most likely create an
> incompatibility.
>
> I have to now do either of the following:
>
> a) re-write all my javascript code to use jQuery
> b) write my own autocomplete javascript.
>
> On Jan 14, 5:24 pm, "j...@verax" <joti.bis...@gmail.com> wrote:
> > Hi jQuery guru,
> >
> > I have an application based on struts and tiles. Validation is done by
> > javascript at a global level.
> > When I include my autocomplete code in my JSP page, the validation
> > (checkValidation()) malfunctions with a javascript error - "Object
> > does not support this property or method" at the line
> >
> > if (CCRDerrorContainer.hasChildNodes()).
> >
> > If I remove the autocomplete code from my JSP (business logic +
> > autocomplete libraries) , the validation works as designed. Details of
> > relevant code is provided below. Can anyone provide me with any clue
> > as to how to resolve this problem ?
> >
> > ======================================================================
> >
> >
> -----------------------------------------------------------------------------------
> > My JSP file
> >
> -----------------------------------------------------------------------------------
> > <%@ include file="../common/include.jsp" %>
> > <link rel="stylesheet" type="text/css" href="css/
> > jquery.autocomplete.css" />
> > <script type="text/javascript" src="js/autocomplete/lib/jquery.js"></
> > script>
> > <script type='text/javascript' src='js/autocomplete/
> > jquery.autocomplete.js'></script>
> >
> > <script>
> > var cols = []; // column mappings : 0=Last name,
> 1=First Name,
> > 2=Title, 3 = Employee ID
> > $().ready(function() {
> >
> > $('input#employeeLastName').flushCache();
> >
> $("#employeeLastName").autocomplete("jsp/common/getData.jsp?
> > dataType=EmployeeName",{
> > minChars: 1,
> > max: 1000,
> > width: 400,
> > delay: 1000,
> > selectFirst: false,
> > autoFill: false,
> > cacheLength: 20,
> > matchContains: false,
> > matchSubset: true,
> > mustMatch: false,
> > matchCase: true,
> > formatItem: function(row, i, max)
> {
> > cols = row[0].split("%");
> > return i + "/" + max + ":
> " + cols[0] + ", " + cols[1] + " (" +
> > cols[2] + ")";
> > },
> > formatMatch: function(row) {
> > cols = row[0].split("%");
> > return cols[0] + ", " +
> cols[1];
> > },
> > formatResult: function(row) {
> > cols = row[0].split("%");
> > return cols[0] + ", " +
> cols[1] + " (" + cols[2] + ")";
> > }
> > });
> >
> $("#employeeLastName").result(function(event, row, formatted) {
> > if (row) {
> > cols = row[0].split("%");
> >
> $(this).next().val(cols[3]);
> > }
> > });
> > });
> > </script>
> > <tiles:importAttribute name="task" />
> > <tiles:importAttribute name="action" />
> > <tiles:importAttribute name="displayAction" />
> > <tiles:importAttribute name="showArchived" />
> >
> > <style type="text/css">
> > @import
> "${pageContext.request.contextPath}/css/employee/select.css";
> > </style>
> >
> > <h1>
> > <fmt:message key="employee.label.title.select" />
> > </h1>
> > <hr />
> >
> > <div id="employeeSelect">
> > <tiles:insert definition="successMessages" />
> > <tiles:insert definition="failureMessages" />
> > <ccrd:errors />
> >
> > <html:form action="${action}" method="post" >
> >
> > <label for="employee" id="employeeLbl" >
> > <fmt:message key="employee.text.selectEmployee"
> />
> > <span class="task"><fmt:message key="${task}"
> />:</span>
> > </label>
> >
> > <html:text styleId="employeeLastName" property="lastName"
> > size="100"
> > maxlength="200">
> > </html:text>
> > <html:hidden property="employeeId" />
> > <BR/> <BR/>
> > <div class="buttons">
> > <html:submit property="submit"
> styleId="submitButton"><fmt:message
> > key="button.submit"/></html:submit>
> > <html:submit property="cancel"
> styleId="cancelButton"><fmt:message
> > key="button.cancel"/></html:submit>
> > </div>
> >
> > </html:form>
> > </div>
> >
> >
> --------------------------------------------------------------------------------------------------------
> > Tiles-Defs extract
> >
> ---------------------------------------------------------------------------------------------------------
> >
> > <definition name=".default" path="/jsp/layouts/template.jsp" >
> > <put name="header" value="/jsp/layouts/header.jsp" />
> > <put name="leftnav" value="/jsp/layouts/menu.jsp" />
> > <put name="footer" value="/jsp/layouts/footer.jsp" />
> > </definition>
> >
> >
> -----------------------------------------------------------------------------------------------------------
> > Template.jsp
> >
> ------------------------------------------------------------------------------------------------------------
> > <%@ page contentType="text/html;charset=ISO-8859-1" language="java"%>
> > <%@ include file="../common/include.jsp"%>
> >
> > <%
> > response.setHeader("Pragma","no-cache"); //HTTP 1.0
> > response.setHeader("Cache-Control","no-cache, private, no-store, max-
> > stale=0"); //HTTP 1.1
> > response.setDateHeader("Expires", 0); //prevents caching at the proxy
> > server
> > %>
> >
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> >
> > <html>
> > <head>
> > <base
> > href="@base.href.protocol@
> ://${pageContext.request.serverName}
> > @base.href.p...@${pagecontext.request.contextpath}/" />
> > <title><bean:message key="template.header.title" />
> > </title>
> > <meta http-equiv="Content-Type"
> > content="text/html; charset=ISO-8859-1" />
> > <meta http-equiv="pragma" content="no-cache" />
> > <meta http-equiv="cache-control" content="no-cache" />
> > <meta http-equiv="expires" content="Sun, 28 Dec 1997
> 09:32:45 GMT" /
> >
> >
> >
> > <link rel="stylesheet" type="text/css"
> href="css/style.css" />
> > <link rel="stylesheet" type="text/css"
> href="css/menu.css" />
> > <link rel="stylesheet" type="text/css" href="main.css" />
> >
> > <script type="text/javascript"
> src="js/common.js"></script>
> > <script type="text/javascript"
> src="js/calendar.js"></script>
> > <script type="text/javascript"
> src="js/StrutsMenuControl.js"></
> > script>
> > <script type="text/javascript"
> src="js/TableFilter.js"></script>
> > <script type="text/javascript"
> src="js/validation.js"></script>
> >
> > </head>
> >
> > <body onload="checkValidation();">
> > <div id="shadow">
> > <div id="container">
> > <tiles:insert attribute="header"
> flush="false" />
> > <div id="body">
> > <div id="menucontainer">
> > <tiles:insert
> attribute="leftnav" flush="false" />
> > </div>
> > <div id="contentcontainer">
> > <div id="content">
> > <!-- Content goes
> here -->
> > <tiles:insert
> attribute="body" flush="false" />
> > <!-- Content ends
> here -->
> > </div>
> > </div>
> > <div class="break">
> > </div>
> > </div>
> > </div>
> > </div>
> >
> > <tiles:insert attribute="footer" flush="false" />
> >
> > </body>
> > </html>
> >
> > ------------------------------------------------
> > Validation Javascript
> > ------------------------------------------------
> >
> > //
> > // validate.js -- JS functions for validation
> > //
> >
> > var CCRDerror_FIELD_CLASS = "errorField";
> > var CCRDerror_CONTAINER_ID = "errorContainer";
> > var CCRDerror_DIV_CLASS = "error";
> >
> > //
> > // checkValidation()
> > //
> > // Check if CCRDerror container exists, and if so
> > // update form fields and set up event handlers
> > // for CCRDerror fields.
> > //
> >
> > function checkValidation() {
> > var CCRDerrorContainer = $(CCRDerror_CONTAINER_ID);
> >
> > if (CCRDerrorContainer) {
> > if (CCRDerrorContainer.hasChildNodes()) {
> > // get the bg colour from the CCRDerror class
> > var CCRDerrorField = $E("div",
> CCRDerror_FIELD_CLASS);
> > document.body.appendChild(CCRDerrorField);
> >
> > var bgcolor = getStyle(CCRDerrorField,
> "backgroundColor");
> > if (!bgcolor)
> > bgcolor = getStyle(CCRDerrorField,
> "background-color");
> >
> > for ( var i = 0; i <
> CCRDerrorContainer.childNodes.length; i++) {
> > if
> (CCRDerrorContainer.childNodes[i].tagName == "DIV") {
> > var id =
> CCRDerrorContainer.childNodes[i].id;
> > var field = getFormElement(id);
> >
> > // Update input background color
> > field.style.backgroundColor =
> bgcolor;
> >
> > // Add event handlers for focus
> and blur
> > Event.addEventHandler(field,
> "focus", gotFocus);
> > Event.addEventHandler(field,
> "blur", lostFocus);
> >
> > field.setAttribute("errorField",
> true);
> > }
> > }
> >
> > displayFirstCCRDerror();
> > }
> > }
> >
> > }
> >
> > //
> > // displayFirstCCRDerror()
> > //
> > // Display CCRDerror for first CCRDerror field
> > // in the form
> > //
> >
> > function displayFirstCCRDerror() {
> > for ( var j = 0; j < document.forms.length; j++) {
> > for ( var i = 0; i < document.forms[j].elements.length;
> i++) {
> > if
> (document.forms[j].elements[i].getAttribute("errorField")) {
> > if
> (isVisible(document.forms[j].elements[i])) // Only set
> >
> // focus to
> >
> // visible
> >
> // objects
> >
> document.forms[j].elements[i].focus();
> > return;
> > }
> > }
> > }
> >
> > }
> >
> > //
> > // gotFocus(event)
> > //
> > // Callback for field 'onFocus' handler
> > //
> >
> > function gotFocus(event) {
> > var ev = new Event(event);
> > displayCCRDerror(ev.getTarget());
> >
> > }
> >
> > //
> > // lostFocus(event)
> > //
> > // Callback for field 'onBlur' handler
> > //
> >
> > function lostFocus(event) {
> > var ev = new Event(event);
> > hideCCRDerror(ev.getTarget());
> >
> > }
> >
> > //
> > // displayCCRDerror(field)
> > //
> > // Show CCRDerror popup for 'field'
> > //
> >
> > function displayCCRDerror(field) {
> > var obj = $(field.name);
> > obj.style.display = "block";
> > obj.style.left = getXPos(field) + "px";
> > obj.style.top = (getYPos(field) - obj.offsetHeight) + "px";
> >
> > }
> >
> > //
> > // hideCCRDerror(field)
> > //
> > // Hide CCRDerror popup for 'field'
> > //
> >
> > function hideCCRDerror(field) {
> > var obj = $(field.name);
> > obj.style.display = "none";
> >
> > }
> >
> > ------------------------------------------------------
>
