This demonstration is an introduction to the framework AjaxFranceLabs and will demonstrate how to use it.
In order to do that, you will need to download the AjaxFranceLabs framework and include it to your workspace.
Here are the first steps:
Download the latest update of the version 1 of jQuery on jQuery's website
Create a main.js file where we will add all our code to create the interface
Include this two JavaScript files to the html page
Include the main.css file, the result.css from the framework and the font awesome library as bellow.
In a first place, we will create the AjaxFranceLabs manager, configure it and include the searchBar widget which will allow us to process searches using keywords.
We are going to include the required files as well as their dependencies,
| Code Block | ||
|---|---|---|
| ||
<!-- index.html - Adding a SearchBar widget -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/results.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.min.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/uuid.core.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/i18njs.js"></script>
<!-- The framework main file -->
<script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
<!-- Required file for the manager -->
<script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
<!-- Required file for the manager -->
<script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
<!-- The abstract manager -->
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
<!-- An implementation of the manager -->
<script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
<!-- The AbstractWidget file -->
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
<!-- The SearchBar widget, implementing AbstractWidget -->
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchBar.widget.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/searchTutorial.js"></script>
<div id="solr">
<div id="searchBar"></div><!-- the widget will be inserted here -->
</div>
</body>
</html> |
Now let's create the main.js file .
| Code Block | ||
|---|---|---|
| ||
/* main.js */
$(function($){
/* Now, we had the widget to the manager */
//Version 1 - if you do not need to have a variable refering to the widget
Manager.addWidget(
new AjaxFranceLabs.SearchBarWidget({
elm: $('#searchBar'),
id: 'searchBar'
})
);
//Version 2
var searchBarWidget = new AjaxFranceLabs.SearchBarWidget({
elm: $('#searchBar'),
id: 'searchBar'
});
Manager.addWidget(searchBarWidget);
/* And we initialize the manager */
Manager.init();
}); |
The display should look like something like this:
Well, now it would be good to show some results. Lets add the ResultWidget!
In the html file
| Code Block | ||
|---|---|---|
| ||
<!-- index.html - Adding a Result widget -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/results.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.min.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/uuid.core.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/i18njs.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchBar.widget.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- The ResultWidget -->
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/Result.widget.js"></script>
<script type="text/javascript" src="js/searchTutorial.js"></script>
<div id="solr">
<div id="searchBar"></div><!-- the widget will be inserted here -->
<div class="col left"></div>
<div class="col right">
<div id="results"></div><!-- the widget will be inserted here -->
</div>
<div class="clear"></div>
</div>
</body>
</html>
|
And the javascript file:
| Code Block | ||
|---|---|---|
| ||
/* searchTutorial.js */
$(function($){
Manager.addWidget(new AjaxFranceLabs.SearchBarWidget({
elm: $('#searchBar'),
id: 'searchBar'
}));
/* The result widget */
Manager.addWidget(new AjaxFranceLabs.ResultWidget({
elm: $('#results'),
id: 'documents',
afterRequest : function() { /* implements the method displaying the documents */
var data = this.manager.response;
$(this.elm).find('.doc_list').empty();
if (data.response.numFound === 0) {
$(this.elm).find('.doc_list').append('<span class="noResult">No document found.</span>');
} else {
var self = this;
$.each(data.response.docs, function(i, doc) {
var title = (doc.title === undefined) ? doc.url : doc.title;
if(data.highlighting === undefined || (data.highlighting[doc.id].content_fr === undefined && data.highlighting[doc.id].content_en === undefined)){
if(doc.content_fr)
content = doc.content_fr;
else
content = doc.content_en;
content = AjaxFranceLabs.truncate(content, 200)
}
else {
if(data.highlighting[doc.id].content_fr)
content = data.highlighting[doc.id].content_fr;
else
content = data.highlighting[doc.id].content_en;
}
$(self.elm).find('.doc_list').append('<div class="doc e-' + i + '" doc_id="'+doc.id+'">');
$(self.elm).find('.doc:last').append('<div class="res">');
$(self.elm).find('.doc:last .res')
.append('<a class="title" target="_blank" href="' + doc.url + '">')
.append('<p class="description">')
.append('<p class="address">');
$(self.elm).find('.doc:last .title')
.append('<span>' + title + '</span>');
$(self.elm).find('.doc:last .description')
.append('<span>' + content + '</span>');
$(self.elm).find('.doc:last .address')
.append('<span>' + AjaxFranceLabs.tinyUrl(doc.url) + '</span>');
});
AjaxFranceLabs.addMultiElementClasses($(this.elm).find('.doc'));
if (this.pagination !== false) {
this.pagination.afterRequest(data);
}
}
}
}));
/* Lets simulate an empty search query in order to fill the results when loading the page */
/* The makeRequest method actually initializes the manager if this has not been done before */
Manager.makeRequest();
});
|
You should get the following result:
Now we have our search bar and the results displayed, why not adding the search informations like the number of documents returned, the query execution time. Lets add the SearchInformation widget.
The html file
| Code Block | ||
|---|---|---|
| ||
<!-- index.html - Adding a SearchInformation widget -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/results.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.min.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/uuid.core.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/i18njs.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchBar.widget.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/Result.widget.js"></script>
<!-- The SearchInformationWidget -->
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchInformation.widget.js"></script>
<script type="text/javascript" src="js/searchTutorial.js"></script>
<div id="solr">
<div id="searchBar"></div>
<div id="result_information"></div><!-- the widget will be inserted here -->
<div class="col left"></div>
<div class="col right">
<div id="results"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html> |
And the javascript file :
| Code Block | ||
|---|---|---|
| ||
/* searchTutorial.js */
$(function($){
Manager.addWidget(new AjaxFranceLabs.SearchBarWidget({
elm: $('#searchBar'),
id: 'searchBar'
}));
Manager.addWidget(new AjaxFranceLabs.ResultWidget({
elm: $('#results'),
id: 'documents',
afterRequest : function() { /* implements the method displaying the documents */
var data = this.manager.response;
$(this.elm).find('.doc_list').empty();
if (data.response.numFound === 0) {
$(this.elm).find('.doc_list').append('<span class="noResult">No document found.</span>');
} else {
var self = this;
$.each(data.response.docs, function(i, doc) {
var title = (doc.title === undefined) ? doc.url : doc.title;
if(data.highlighting === undefined || (data.highlighting[doc.id].content_fr === undefined && data.highlighting[doc.id].content_en === undefined)){
if(doc.content_fr)
content = doc.content_fr;
else
content = doc.content_en;
content = AjaxFranceLabs.truncate(content, 200)
}
else {
if(data.highlighting[doc.id].content_fr)
content = data.highlighting[doc.id].content_fr;
else
content = data.highlighting[doc.id].content_en;
}
$(self.elm).find('.doc_list').append('<div class="doc e-' + i + '" doc_id="'+doc.id+'">');
$(self.elm).find('.doc:last').append('<div class="res">');
$(self.elm).find('.doc:last .res')
.append('<a class="title" target="_blank" href="' + doc.url + '">')
.append('<p class="description">')
.append('<p class="address">');
$(self.elm).find('.doc:last .title')
.append('<span>' + title + '</span>');
$(self.elm).find('.doc:last .description')
.append('<span>' + content + '</span>');
$(self.elm).find('.doc:last .address')
.append('<span>' + AjaxFranceLabs.tinyUrl(doc.url) + '</span>');
});
AjaxFranceLabs.addMultiElementClasses($(this.elm).find('.doc'));
if (this.pagination !== false) {
this.pagination.afterRequest(data);
}
}
}
}));
/* The SearchInformation widget */
Manager.addWidget(new AjaxFranceLabs.SearchInformationWidget({
elm: $('#result_information'),
id: 'searchInformation'
}));
Manager.makeRequest();
});
|
You should get the following display:
For this part of the tutorial, we will continue by adding the pagination feature.
The html file:
| Code Block | ||
|---|---|---|
| ||
<!-- index.html - Adding the pagination -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/results.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.min.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/uuid.core.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/i18njs.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
<!-- Add this class -->
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractModule.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
<!-- Add this module -->
<script type="text/javascript" src="js/AjaxFranceLabs/modules/Pager.module.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchBar.widget.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/Result.widget.js"></script>
<!-- The SearchInformationWidget -->
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchInformation.widget.js"></script>
<script type="text/javascript" src="js/searchTutorial.js"></script>
<div id="solr">
<div id="searchBar"></div>
<div id="result_information"></div> <!-- the widget will be inserted here -->
<div class="col left"></div>
<div class="col right">
<div id="results"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
|
And the javascript file
| Code Block | ||
|---|---|---|
| ||
/* searchTutorial.js */
$(function($){
Manager.addWidget(new AjaxFranceLabs.SearchBarWidget({
elm: $('#searchBar'),
id: 'searchBar'
}));
/* The result widget */
Manager.addWidget(new AjaxFranceLabs.ResultWidget({
elm: $('#results'),
id: 'documents',
pagination : true, /* Add this */
afterRequest : function() {
var data = this.manager.response;
$(this.elm).find('.doc_list').empty();
if (data.response.numFound === 0) {
$(this.elm).find('.doc_list').append('<span class="noResult">No document found.</span>');
} else {
var self = this;
$.each(data.response.docs, function(i, doc) {
var title = (doc.title === undefined) ? doc.url : doc.title;
if(data.highlighting === undefined || (data.highlighting[doc.id].content_fr === undefined && data.highlighting[doc.id].content_en === undefined)){
if(doc.content_fr)
content = doc.content_fr;
else
content = doc.content_en;
content = AjaxFranceLabs.truncate(content, 200)
}
else {
if(data.highlighting[doc.id].content_fr)
content = data.highlighting[doc.id].content_fr;
else
content = data.highlighting[doc.id].content_en;
}
$(self.elm).find('.doc_list').append('<div class="doc e-' + i + '" doc_id="'+doc.id+'">');
$(self.elm).find('.doc:last').append('<div class="res">');
$(self.elm).find('.doc:last .res')
.append('<a class="title" target="_blank" href="' + doc.url + '">')
.append('<p class="description">')
.append('<p class="address">');
$(self.elm).find('.doc:last .title')
.append('<span>' + title + '</span>');
$(self.elm).find('.doc:last .description')
.append('<span>' + content + '</span>');
$(self.elm).find('.doc:last .address')
.append('<span>' + AjaxFranceLabs.tinyUrl(doc.url) + '</span>');
});
AjaxFranceLabs.addMultiElementClasses($(this.elm).find('.doc'));
if (this.pagination !== false) {
this.pagination.afterRequest(data);
}
}
}
}));
Manager.addWidget(new AjaxFranceLabs.SearchInformationWidget({
elm: $('#result_information'),
id: 'searchInformation'
}));
Manager.makeRequest();
});
|
You should get the following result:
Easy right? Regarding to the documentation, the pagination variable can take 3 values, true, false, a PagerWidget.
By default this value is set to true and will automaticaly create a PagerWidget with the default options. But, if you want to modify some methods or values of the widget, you can create another one and assign it to the pagination variable.
The next thing we will do is including the autocomplete widget to the search bar.
The autocomplete widget is a direct extension of the autocomplete plugin from jQuery UI, so we will need to download it and include it to our javascript files.
| Code Block | ||
|---|---|---|
| ||
<!-- index.html - Adding the autocomplete functionnality -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/results.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.min.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/uuid.core.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/i18njs.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractModule.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
<!-- Add this module -->
<script type="text/javascript" src="js/AjaxFranceLabs/modules/Autocomplete.module.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/modules/Pager.module.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchBar.widget.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/Result.widget.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchInformation.widget.js"></script>
<script type="text/javascript" src="js/searchTutorial.js"></script>
<div id="solr">
<div id="searchBar"></div>
<div id="result_information"></div><!-- the widget will be inserted here -->
<div class="col left"></div>
<div class="col right">
<div id="results"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
|
And the javascript file
| Code Block | ||
|---|---|---|
| ||
/* searchTutorial.js */
$(function($){
Manager.addWidget(new AjaxFranceLabs.SearchBarWidget({
elm: $('#searchBar'),
id: 'searchBar',
autocomplete : true //add this line for the autocompletion
}));
Manager.addWidget(new AjaxFranceLabs.ResultWidget({
elm: $('#results'),
id: 'documents',
pagination : true,
afterRequest : function() {
var data = this.manager.response;
$(this.elm).find('.doc_list').empty();
if (data.response.numFound === 0) {
$(this.elm).find('.doc_list').append('<span class="noResult">No document found.</span>');
} else {
var self = this;
$.each(data.response.docs, function(i, doc) {
var title = (doc.title === undefined) ? doc.url : doc.title;
if(data.highlighting === undefined || (data.highlighting[doc.id].content_fr === undefined && data.highlighting[doc.id].content_en === undefined)){
if(doc.content_fr)
content = doc.content_fr;
else
content = doc.content_en;
content = AjaxFranceLabs.truncate(content, 200)
}
else {
if(data.highlighting[doc.id].content_fr)
content = data.highlighting[doc.id].content_fr;
else
content = data.highlighting[doc.id].content_en;
}
$(self.elm).find('.doc_list').append('<div class="doc e-' + i + '" doc_id="'+doc.id+'">');
$(self.elm).find('.doc:last').append('<div class="res">');
$(self.elm).find('.doc:last .res')
.append('<a class="title" target="_blank" href="' + doc.url + '">')
.append('<p class="description">')
.append('<p class="address">');
$(self.elm).find('.doc:last .title')
.append('<span>' + title + '</span>');
$(self.elm).find('.doc:last .description')
.append('<span>' + content + '</span>');
$(self.elm).find('.doc:last .address')
.append('<span>' + AjaxFranceLabs.tinyUrl(doc.url) + '</span>');
});
AjaxFranceLabs.addMultiElementClasses($(this.elm).find('.doc'));
if (this.pagination !== false) {
this.pagination.afterRequest(data);
}
}
}
}));
Manager.addWidget(new AjaxFranceLabs.SearchInformationWidget({
elm: $('#result_information'),
id: 'searchInformation'
}));
Manager.makeRequest();
});
|
You should get the following:
Easy right? Regarding to the documentation, the pagination variable can take 3 values, true, false, a PagerWidget.
By default this value is set to true and will automaticaly create a PagerWidget with the default options. But, if you want to modify some methods or values of the widget, you can create another one and assign it to the pagination variable.
Lets go a bit further now and add faceting.
The html file
| Code Block | ||
|---|---|---|
| ||
<!-- index.html - Adding some facets -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/results.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.min.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/uuid.core.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/i18njs.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractModule.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
<!-- Add this class which our widget extends -->
<script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractFacetWidget.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/modules/Autocomplete.module.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/modules/Pager.module.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchBar.widget.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/Result.widget.js"></script>
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchInformation.widget.js"></script>
<!-- Add this widget -->
<script type="text/javascript" src="js/AjaxFranceLabs/widgets/Table.widget.js"></script>
<script type="text/javascript" src="js/searchTutorial.js"></script>
<div id="solr">
<div id="searchBar"></div>
<div id="result_information"></div>
<div class="col left">
<!-- Add this block -->
<div id="facets">
<div id="facet_langue"></div><!-- First widget -->
<div id="facet_source"></div><!-- Second widget -->
</div>
</div>
<div class="col right">
<div id="results"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
|
And the javascript file:
| Code Block | ||
|---|---|---|
| ||
/* searchTutorial.js */
$(function($){
Manager.addWidget(new AjaxFranceLabs.SearchBarWidget({
elm: $('#searchBar'),
id: 'searchBar',
autocomplete : true //add this line for the autocompletion
}));
Manager.addWidget(new AjaxFranceLabs.ResultWidget({
elm: $('#results'),
id: 'documents',
pagination : true,
afterRequest : function() {
var data = this.manager.response;
$(this.elm).find('.doc_list').empty();
if (data.response.numFound === 0) {
$(this.elm).find('.doc_list').append('<span class="noResult">No document found.</span>');
} else {
var self = this;
$.each(data.response.docs, function(i, doc) {
var title = (doc.title === undefined) ? doc.url : doc.title;
if(data.highlighting === undefined || (data.highlighting[doc.id].content_fr === undefined && data.highlighting[doc.id].content_en === undefined)){
if(doc.content_fr)
content = doc.content_fr;
else
content = doc.content_en;
content = AjaxFranceLabs.truncate(content, 200)
}
else {
if(data.highlighting[doc.id].content_fr)
content = data.highlighting[doc.id].content_fr;
else
content = data.highlighting[doc.id].content_en;
}
$(self.elm).find('.doc_list').append('<div class="doc e-' + i + '" doc_id="'+doc.id+'">');
$(self.elm).find('.doc:last').append('<div class="res">');
$(self.elm).find('.doc:last .res')
.append('<a class="title" target="_blank" href="' + doc.url + '">')
.append('<p class="description">')
.append('<p class="address">');
$(self.elm).find('.doc:last .title')
.append('<span>' + title + '</span>');
$(self.elm).find('.doc:last .description')
.append('<span>' + content + '</span>');
$(self.elm).find('.doc:last .address')
.append('<span>' + AjaxFranceLabs.tinyUrl(doc.url) + '</span>');
});
AjaxFranceLabs.addMultiElementClasses($(this.elm).find('.doc'));
if (this.pagination !== false) {
this.pagination.afterRequest(data);
}
}
}
}));
Manager.addWidget(new AjaxFranceLabs.SearchInformationWidget({
elm: $('#result_information'),
id: 'searchInformation'
}));
Manager.addWidget(new AjaxFranceLabs.TableWidget({
elm : $('#facet_langue'),
id : 'facet_langue',
field : 'language',
name : window.i18n.msgStore['language'],
pagination : true,
selectionType : 'OR',
returnUnselectedFacetValues : true
}));
Manager.addWidget(new AjaxFranceLabs.TableWidget({
elm : $('#facet_source'),
id : 'facet_source',
field : 'source',
name : window.i18n.msgStore['source'],
pagination : true,
selectionType : 'OR',
returnUnselectedFacetValues : true
}));
Manager.makeRequest();
});
|
You should get the following:
