Merge pull request #10456 from open-craft/unenroll-course-name-bugfix

Fix bugs in course unenroll popup

lms/static/js/dashboard/legacy.js

@@ -7,7 +7,7 @@
  */
  var edx = edx || {};
 
-(function($, gettext, Logger, accessibleModal) {
+(function($, gettext, Logger, accessibleModal, interpolate) {
     'use strict';
 
     edx.dashboard = edx.dashboard || {};
@@ -126,9 +126,18 @@
         });
 
         $(".action-unenroll").click(function(event) {
-            $("#unenroll_course_id").val( $(event.target).data("course-id") );
-            $("#unenroll_course_number").text( $(event.target).data("course-number") );
-            $("#unenroll_course_name").text( $(event.target).data("course-name") );
+            var element = $(event.target);
+            var track_info = element.data("track-info");
+            var course_number = element.data("course-number");
+            var course_name = element.data("course-name");
+            var cert_name_long = element.data("cert-name-long");
+            $('#track-info').html(interpolate(track_info, {
+                course_number: "<span id='unenroll_course_number'>" + course_number + "</span>",
+                course_name: "<span id='unenroll_course_name'>" + course_name + "</span>",
+                cert_name_long: "<span id='unenroll_cert_name'>" + cert_name_long + "</span>"
+            }, true));
+            $('#refund-info').html( element.data("refund-info") );
+            $("#unenroll_course_id").val( element.data("course-id") );
         });
 
         $('#unenroll_form').on('ajax:complete', function(event, xhr) {
@@ -195,4 +204,4 @@
         });
     };
 
-})(jQuery, gettext, Logger, accessible_modal);
+})(jQuery, gettext, Logger, accessible_modal, interpolate); // jshint undef:false

lms/templates/dashboard/_dashboard_course_listing.html

@@ -181,83 +181,70 @@ from student.helpers import (
                   % if cert_status.get('status') not in DISABLE_UNENROLL_CERT_STATES:
                     <li class="actions-item" id="actions-item-unenroll-${dashboard_index}">
                     % if is_paid_course and show_refund_option:
-                      ## Translators: The course name will be added to the end of this sentence.
                       % if not is_course_blocked:
-                      <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course_overview-number="${course_overview.number | h}" data-dashboard-index="${dashboard_index}"
-                         onclick="set_unenroll_message('${_("Are you sure you want to unenroll from the purchased course %(course_name)s ($(course_number)s)?")}', '${_("You will be refunded the amount you paid.")}')">
+                      <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}"
+                         data-track-info="${_("Are you sure you want to unenroll from the purchased course %(course_name)s (%(course_number)s)?") | h}"
+                         data-refund-info="${_("You will be refunded the amount you paid.") | h}">
                         ${_('Unenroll')}
                       </a>
                       % else:
                       <a class="action action-unenroll is-disabled" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}"
-                         onclick="set_unenroll_message('${_("Are you sure you want to unenroll from the purchased course %(course_name)s (%(course_number)s)?")}', '${_("You will be refunded the amount you paid.")}')">
+                         data-track-info="${_("Are you sure you want to unenroll from the purchased course %(course_name)s (%(course_number)s)?") | h}"
+                         data-refund-info="${_("You will be refunded the amount you paid.") | h}">
                         ${_('Unenroll')}
                       </a>
                       % endif
                     % elif is_paid_course and not show_refund_option:
-                      ## Translators: The course's name will be added to the end of this sentence.
                       % if not is_course_blocked:
                       <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}"
-                         onclick="set_unenroll_message('${_("Are you sure you want to unenroll from the purchased course %(course_name)s (%(course_number)s)?")}', '${_("You will not be refunded the amount you paid.")}')">
+                         data-track-info="${_("Are you sure you want to unenroll from the purchased course %(course_name)s (%(course_number)s)?") | h}"
+                         data-refund-info="${_("You will not be refunded the amount you paid.") | h}">
                         ${_('Unenroll')}
                       </a>
                       % else:
                       <a class="action action-unenroll is-disabled" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}"
-                         onclick="set_unenroll_message('${_("Are you sure you want to unenroll from the purchased course %(course_name)s (%(course_number)s)?")}', '${_("You will not be refunded the amount you paid.")}')">
+                         data-track-info="${_("Are you sure you want to unenroll from the purchased course %(course_name)s (%(course_number)s)?") | h}"
+                         data-refund-info="${_("You will not be refunded the amount you paid.") | h}">
                         ${_('Unenroll')}
                       </a>
                       % endif
                     % elif enrollment.mode != "verified":
-                      ## Translators: The course's name will be added to the end of this sentence.
                       % if not is_course_blocked:
                       <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}"
-                         onclick="set_unenroll_message('${_("Are you sure you want to unenroll from %(course_name)s (%(course_number)s)?")}', '')">
+                         data-track-info="${_("Are you sure you want to unenroll from %(course_name)s (%(course_number)s)?") | h}">
                         ${_('Unenroll')}
                       </a>
                       % else:
                       <a class="action action-unenroll is-disabled" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}"
-                         onclick="set_unenroll_message('${_("Are you sure you want to unenroll from %(course_name)s (%(course_number)s)?")}', '')">
+                         data-track-info="${_("Are you sure you want to unenroll from %(course_name)s (%(course_number)s)?") | h}">
                         ${_('Unenroll')}
                       </a>
                       % endif
                     % elif show_refund_option:
-                      ## Translators: The course's name will be added to the end of this sentence.
                       % if not is_course_blocked:
-                      <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}"
-                         onclick="set_unenroll_message(
-                                      '${_("Are you sure you want to unenroll from the verified %(cert_name_long)s track of %(course_name)s (%(course_number)s)?")}',
-                                      '${_("You will be refunded the amount you paid.")}'
-                                  )"
-                      >
+                      <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}" data-cert-name-long="${cert_name_long | h}"
+                         data-track-info="${_("Are you sure you want to unenroll from the verified %(cert_name_long)s track of %(course_name)s (%(course_number)s)?") | h}"
+                         data-refund-info="${_("You will be refunded the amount you paid.") | h}">
                         ${_('Unenroll')}
                       </a>
                       % else:
-                      <a class="action action-unenroll is-disabled" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}"
-                         onclick="set_unenroll_message(
-                                      '${_("Are you sure you want to unenroll from the verified %(cert_name_long)s track of %(course_name)s (%(course_number)s)?")}',
-                                      '${_("You will be refunded the amount you paid.")}'
-                                  )"
-                      >
+                      <a class="action action-unenroll is-disabled" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}" data-cert-name-long="${cert_name_long | h}"
+                         data-track-info="${_("Are you sure you want to unenroll from the verified %(cert_name_long)s track of %(course_name)s (%(course_number)s)?") | h}"
+                         data-refund-info="${_("You will be refunded the amount you paid.") | h}">
                         ${_('Unenroll')}
                       </a>
                       % endif
                     % else:
-                      ## Translators: The course's name will be added to the end of this sentence.
                       % if not is_course_blocked:
-                      <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}"
-                         onclick="set_unenroll_message(
-                                      '${_("Are you sure you want to unenroll from the verified %(cert_name_long)s track of %(course_name)s (%(course_number)s)?")}',
-                                      '${_("The refund deadline for this course has passed, so you will not receive a refund.")}'
-                                  )"
-                      >
+                      <a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}" data-cert-name-long="${cert_name_long | h}"
+                         data-track-info="${_("Are you sure you want to unenroll from the verified %(cert_name_long)s track of %(course_name)s (%(course_number)s)?") | h}"
+                         data-refund-info="${_("The refund deadline for this course has passed, so you will not receive a refund.") | h}">
                         ${_('Unenroll')}
                       </a>
                       % else:
-                      <a class="action action-unenroll is-disabled" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}"
-                         onclick="set_unenroll_message(
-                                      '${_("Are you sure you want to unenroll from the verified %(cert_name_long)s track of %(course_name)s (%(course_number)s)?")}',
-                                      '${_("The refund deadline for this course has passed, so you will not receive a refund.")}'
-                                  )"
-                      >
+                      <a class="action action-unenroll is-disabled" data-course-id="${course_overview.id | h}" data-course-number="${course_overview.number | h}" data-course-name="${course_overview.display_name_with_default | h}" data-dashboard-index="${dashboard_index}" data-cert-name-long="${cert_name_long | h}"
+                         data-track-info="${_("Are you sure you want to unenroll from the verified %(cert_name_long)s track of %(course_name)s (%(course_number)s)?") | h}"
+                         data-refund-info="${_("The refund deadline for this course has passed, so you will not receive a refund.") | h}">
                         ${_('Unenroll')}
                       </a>
                       % endif
@@ -403,13 +390,4 @@ from student.helpers import (
                    });
                }
            });
-
-           function set_unenroll_message(track_info, refund_info) {
-               document.getElementById('track-info').innerHTML = interpolate(track_info, {
-                  course_number: "<span id='unenroll_course_number'></span>",
-                  course_name: "<span id='unenroll_course_name'></span>",
-                  cert_name_long: "${cert_name_long | h}"
-               }, true);
-               document.getElementById('refund-info').innerHTML = refund_info;
-           }
 </script>