(Jump to other KnowledgeBases)
DSpace Resources
DSpace Website
DSpace Documentation
DSpace Wiki
DSpace Demo Site
Contribute to KnowledgBase
Page History
...
| Wiki Markup |
|---|
First of all we'll add jquery and jquery-ui libraries to advanced search .jsp page. We can add them on head section of advanced search page \[dspace-source\]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/search/advanced.jsp, or use a on/off switch approach to attach them as described on [Adding jQuery (or other script library) support on JSPUI|DSpaceKB:Adding jQuery (or other script library) support on JSPUI]. In this manual we'll attach jqueryuse second approach because we'll disable scriptaculous libraries byto appendingavoid themcolliding onwith head sectionjquery. |
First we must download jquery and jquery-ui script libraries from jQuery UI webpage, we'll download it's full version so we can use more functionalities on future improvements. All files are zipped inside a structure like this:
- Folder - css
- Folder - js
- Folder - development-bundle
- File - index.html
We'll use only js and css folders for our purposes. I'll describe selected folders content:
- js : Contains jquery-1.7.2.min.js and jquery-ui-1.8.21.custom.min.js script files
- css: Contains ui-lightness folder, here are all necessary .css style files and images to display ui-lightness visual theme, (name will vary if we selected another visual theme on jQuery UI page)
| Warning | ||
|---|---|---|
| ||
Newer versions of jqueryui can contain different filenames that the ones provided in this manual, take care that your downloaded files match the references on your .jsp file |
| Wiki Markup |
|---|
We'll create a new folder inside \[dspace-source\]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/static/js/*jqueryui* and copy all previously described files inside it.. Structure will look like this: |
Wiki Markup \[dspace-source\]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/static/js/jqueryui/*{_}jquery-1.7.2.min.js{_}*Wiki Markup \[dspace-source\]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/static/js/jqueryui/*{_}jquery-ui-1.8.21.custom.min.js{_}*Wiki Markup \[dspace-source\]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/static/js/jqueryui/*css/...*
| Wiki Markup |
|---|
We'll edit \[dspace-source\]/dspace- |
| Wiki Markup |
Now edit \[dspace-source\]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/search/advanced.jsp \\ |
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
...
<%
//Add this code on top section
//Generate JSPUI Solr path url
String scheme = request.getScheme(); // http
String serverName = request.getServerName(); //request.getServerName(); // hostname.com
int serverPort = request.getServerPort(); // 80
String parentContextPath = ""; //Change this value if dspace not installed on html root folder
String contextPath = "/jspui";
String servletPath = "/searchJSON";
// Reconstruct original requesting URL
StringBuffer url = new StringBuffer();
url.append(scheme).append("://").append(serverName);
if (serverPort != 80)
url.append(":").append(serverPort);
url.append(parentContextPath).append(contextPath).append(servletPath);
String solrPath = url.toString();
%>
...
<!-- Add this lines after <dspace:layout> tag-->
<link type="text/css" href="<%=request.getContextPath()%>/static/js/jqueryui/css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jqueryui/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jqueryui/jquery-1.7.2.min.js"></script>.append(serverName);
if (serverPort != 80)
url.append(":").append(serverPort);
url.append(parentContextPath).append(contextPath).append(servletPath);
String solrPath = url.toString();
%>
...
<dspace:layout locbar="nolink" titlekey="jsp.search.advanced.title" scriptaculous="off" jquery="on">
<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/autocomplete.js"></script>
<script type="text/javascript">
window.onload = function() {
monkeyPatchAutocomplete();
replaceSAXExpression('<%=solrPath %>', 10,'tfield1', 'tquery1');
replaceSAXExpression('<%=solrPath %>', 10,'tfield2', 'tquery2');
replaceSAXExpression('<%=solrPath %>', 10,'tfield3', 'tquery3');
}
</script>
...
<!-- Add id field and onchange event call for every search combobox, add id field on search textbox too-->
<select name="field1" id="tfield1" onchange="JavaScript:replaceSAXExpression('<%=solrPath%>', 10 ,'tfield1', 'tquery1');">
<input type="text" name="query1" id="tquery1" value="<%=StringEscapeUtils.escapeHtml(query1)%>" size="30" />
...
<select name="field2" id="tfield2" onchange="JavaScript:replaceSAXExpression('<%=solrPath%>', 10 ,'tfield2', 'tquery2');">
<input type="text" name="query2" id="tquery2" value="<%=StringEscapeUtils.escapeHtml(query2)%>" size="30"/>
...
<select name="field3" id="tfield3" onchange="JavaScript:replaceSAXExpression('<%=solrPath%>', 10 ,'tfield3', 'tquery3');">
<input type="text" name="query3" id="tquery3" value="<%=StringEscapeUtils.escapeHtml(query3)%>" size="30"/>
|
...
Overview
Content Tools