Listing pages

The listing pages are an integral part of the Wissensplattform-application. They show collections of elements of different type and allow a filtering and comparison of elements. Like all parts of the website, also these pages are composed of different HTML-components. These components are

• descriptionContainer.html

• search-bar.html:

• comparison.html

• pagination.html

On specific listing sites it is possible to show a comparison of different elements.

In the following section the implementation of these pages is described in detail.

Technical implementation

The listing-sites have a features implemented, which are described in that section. These features are the asynchronious loading of filtered elements and the comparison-feature.

Asynchronious loading of filtered elements

When selecting filters or entering a search string into the search-bar, a asynchronious javascript and XML (ajax)-request is sent from the browser to the django-backend to retrive the filtered listing items:

$('#searchBox').on('submit', function(e) {
    e.preventDefault();  // Prevent the form from submitting normally

    var url = $(this).attr('action');  // Get the form's action URL
    var formData = $(this).serialize();  // Serialize the form data

    $.ajax({
        type: 'GET',
        url: url,
        data: formData,
        success: function(response) {
            // Handle the response here
            // remove all ancestors of the div with the id
            if ($("#componentListingContainer").length > 0) {
              $('#componentListingContainer').empty();
              $('#componentListingContainer').append(response);
            }
            else if ($('#tool-listing-results').length > 0) {
              $('#tool-listing-results').empty();
              $('#tool-listing-results').append(response);
            }
            else if ($("#dataset-listing-results").length > 0) {
              $('#dataset-listing-results').empty();
              $('#dataset-listing-results').append(response);             
            }
            else if ($("#weatherdata-listing-results").length > 0) {
              $('#weatherdata-listing-results').empty();
              $('#weatherdata-listing-results').append(response);             
            }
            else if ($("#protocol-listing-results").length > 0) {
              $('#protocol-listing-results').empty();
              $('#protocol-listing-results').append(response);             
            }
            else if ($("#norm-listing-results").length > 0) {
              $('#norm-listing-results').empty();
              $('#norm-listing-results').append(response);             
            }
          },
        error: function(jqXHR, textStatus, errorThrown) {
            // Handle the error here
        }
    });
});

(From search-bar.html) In the above javascript code, a ajax GET-request is performed, whereby the filter from-data is put into the request and sent to the backend, where the filtering is performed. As a response a HTML partial is returned, which is put at the position in the DOM, where the listed elements shuld be present.

Comparison feature

The implementation of the comparison feature is descibed in the following.