CSC/ECE 517 Fall 2017/E17A9 Lazy loading (infinite scroll) for assignments courses questionnaires and user lists with Jscroll

Introduction

Problem Statement

The https://expertiza.ncsu.edu/tree_display/list page contains lists of courses, assignments, and questionnaires. This lists can be very long and takes time to load especially when the instructor also loads public assignments since all of them are loaded and rendered in the list. A more common way to accelerate this is to load the first few records that show up in the screen, and load more records as the user scroll down which is called lazy loading. We would like you to optimize this page by implementing such lazy loading using Jscroll.

Moreover, the tree_display lists have some bugs that you should fix:

1. It always goes to assignment page first, so when a user is editing a course then click browser’s back button. It goes back to the assignment instead of the course tab. The same applies when a user is editing a questionnaire, then click back, it goes back to the assignment, instead of questionnaire. We want you to enable “back” to the correct tab.

2. Secondly, when “Include others' items” checkbox has been checked, then the user is editing an assignment or courses, then goes back. The checkbox is unchecked again. It should remember the last state and load the assignment or courses accordingly.

Information about jScroll

JScroll is a JQuery plugin for infinite scrolling, is the ability to load content via AJAX within the current page or content area as you scroll down. The new content can be loaded automatically each time you scroll to the end of the existing content, or it can be triggered to load by clicking a navigation link at the end of the existing content.

Sample code for JScroll

('.infinite-scroll').jscroll();

('.infinite-scroll').jscroll({
   loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
   padding: 20,
   nextSelector: 'a.jscroll-next:last',
   contentSelector: 'li'
});

Here is a demo of jScroll jScroll Demo

Task Description

Lazy loading

The following picture is what the page looks like now. We can see from firefox developer tools that getting all data from the database once costs 4303ms which is very slow. Therefore, we need to use Jscroll to load a certain number of the record at one time e.g., record #1-#10

The majority of the logic behind the tree display page was written using ReactJS in expertiza/assets/javascript/tree_display.jsx. So we need to take the following steps:

• 1. Add Jscroll in function jQuery.post("/tree_display/children_node_ng") to implement lazy loading.
• 2. Modify the corresponding functions in assignment, course, questionnaire controllers to support lazy loading. For example, we may need to add "LIMIT" to the statement which query data from the database.

Files to be Modified

/assets/javascript/tree_display.jsx
/controllers/assignment_questionnaire_controller.rb
/controllers/assignments_controller.rb
/controllers/course_controller.rb

New Dependency

add dependency "jscroll" to bower.json