I was using easyui to build a page for a simple table. I also used autoComplete widget provided by JqueryUI in another page and works fine.However something went wrong when I included the autoCOmplete page into the easyui page. I noticed that this might be caused by the two javascript file conflicting with each other but I don't know how to solve the problem. Any help will be appreciated.
I have these two line in the easyui page :
<script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
and these in the autoComplete page:
<script src="jquery-1.8.2.js"></script>
<script src="jquery-ui-1.9.0.custom.js"></script>
Here is a small example, when included both, the button function wouldn't work.
----------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>Browse GO tree</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script src="jquery-1.8.2.js"></script>
<script src="jquery-ui-1.9.0.custom.js"></script> <script type="text/javascript">
//button functions
function collapseAll(){
$('#tt').tree('collapseAll');
}
function expandAll(){
$('#tt').tree('expandAll');
}
</script>
</head>
<body >
<!--buttons -->
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="collapseAll()">CollapseAll</a>
<a href="#" class="easyui-linkbutton" onclick="expandAll()">ExpandAll</a>
</div>
<!--Start layout -->
<div class="easyui-layout" style="width:100%;height:800px;" fit="false">
<div id="center" region="center" title="Gene Ontology Tree:" style="padding:5px;">
<ul id="tt" class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File 11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------
