Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-63937

Form autocomplete should show the indicator when processing the AJAX request

XMLWordPrintable

    • MOODLE_34_STABLE, MOODLE_35_STABLE, MOODLE_36_STABLE
    • MOODLE_37_STABLE
    • MDL-63937-master
    • Hide
      1. Create user test1, test2
      2. Navigate to Participants page in Course
      3. Click Enroll Users button
      4. Open your browser's dev tools and in the network tab (chrome and firefox have this), you'll see a 'throttling' menu item near the right side. Set this to '3G' or the like, preferably as slow as you can set it.
      5. Type to Search field: test
      6. Verify that an indicator will show during the Ajax request
      7. Verify the indicator will be removed when the request was done.
      Show
      Create user test1, test2 Navigate to Participants page in Course Click Enroll Users button Open your browser's dev tools and in the network tab (chrome and firefox have this), you'll see a 'throttling' menu item near the right side. Set this to '3G' or the like, preferably as slow as you can set it. Type to Search field: test Verify that an indicator will show during the Ajax request Verify the indicator will be removed when the request was done.

      Updated on 2018-02-20:

      Since dobedobedoh already fixed the multiple AJAX request issue in MDL-62514. So in this PBI we only add the spinner/indicator to let the user know that their request is processing.

      ---------------------------------------------

      We are suffering from MDL-56059, which means that the Ajax requests in the enrolled users UI are taking over 10 seconds. This exposes usability problems with the autocomplete form element.

      MDL-51324 added throttling of the keyboard evens, so Ajax requests are only triggered 0.3s after the user stops typing.

      However, if you type: "T [0.5s pause] i [0.5s pause] m" then it will initiate three concurrent ajax requests, all of which take ~10s +/- a few seconds. Therefore, when everything eventually updates, you may find yourself looking at the search results for "T", not "Tim".

      So, I think that autocomplete should not send a second Ajax request until the first one is finished. That make the UI more understandable, and avoid overloading the database with multiple really slow queries.

      Also, there needs to be more visible UI status while the form control is waiting for ajax.

      The code in quiz autosave gets the waiting right, and might be worth looking at https://github.com/moodle/moodle/blob/master/mod/quiz/yui/src/autosave/js/autosave.js#L299.

      The old user-selector code took a different approach: https://github.com/moodle/moodle/blob/master/user/selector/module.js#L92. It tried to abort the current ajax request before starting a new one (line 147 there). However, I am not sure that fully works, because I don't think PHP can stop in the middle of waiting for a really slow database query to run. So, I think the quiz approach is better.

        1. Screen Shot 2018-12-31 at 11.23.27 AM.png
          27 kB
          Huong Nguyen
        2. MDL-63937.png
          166 kB
          Jennifer Bauzon

            HuongNV Huong Nguyen
            timhunt Tim Hunt
            Tim Hunt Tim Hunt
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Jennifer Bauzon Jennifer Bauzon
            Votes:
            3 Vote for this issue
            Watchers:
            10 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour, 15 minutes
                1h 15m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.