Reduce the payload of notifications changes

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Summary

There is a lot of unnecessary html payload when you change your notification settings (inside your profile settings).

Steps to reproduce

1. Open console, networking tab
2. Go to your Notifications - Profile Settings
3. Toggle your notification settings for one of your projects or groups
4. Notice how the POST request of your notifications changes is 4.2kb and most of the response is the same html as what is already rendered on your screen

Expected behavior

{"saved":true}

Relevant logs and/or screenshots

Current Payload

{"html":"\u003cdiv class=\"dropdown notification-dropdown pull-right\"\u003e\n\u003cform class=\"inline notification-form\" id=\"edit_notification_setting_1\" action=\"/notification_settings/1\" accept-charset=\"UTF-8\" data-remote=\"true\" method=\"post\"\u003e\u003cinput name=\"utf8\" type=\"hidden\" value=\"\u0026#x2713;\" /\u003e\u003cinput type=\"hidden\" name=\"_method\" value=\"patch\" /\u003e\u003cinput type=\"hidden\" name=\"namespace_id\" id=\"namespace_id\" value=\"2\" /\u003e\n\u003cinput class=\"notification_setting_level\" type=\"hidden\" value=\"watch\" name=\"notification_setting[level]\" id=\"notification_setting_level\" /\u003e\n\u003cdiv class=\"js-notification-toggle-btns\"\u003e\n\u003cdiv class=\"\"\u003e\n\u003cbutton class=\"dropdown-new btn btn-default notifications-btn\" data-target=\"dropdown-1-2-Namespace\" data-toggle=\"dropdown\" id=\"notifications-button\" type=\"button\"\u003e\n\u003ci class=\"fa fa-bell js-notification-loading\"\u003e\u003c/i\u003e\nWatch\n\u003ci class=\"fa fa-caret-down\"\u003e\u003c/i\u003e\n\u003c/button\u003e\n\u003cul class=\"dropdown-1-2-Namespace dropdown-menu dropdown-menu-align-right dropdown-menu-large dropdown-menu-no-wrap dropdown-menu-selectable\" role=\"menu\"\u003e\n\u003cli role=\"menuitem\"\u003e\u003ca class=\"update-notification \" data-notification-level=\"global\" data-notification-title=\"Global\" href=\"#\"\u003e\u003cstrong class=\"dropdown-menu-inner-title\"\u003eGlobal\u003c/strong\u003e\u003cspan class=\"dropdown-menu-inner-content\"\u003eUse your global notification setting\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli role=\"menuitem\"\u003e\u003ca class=\"update-notification is-active\" data-notification-level=\"watch\" data-notification-title=\"Watch\" href=\"#\"\u003e\u003cstrong class=\"dropdown-menu-inner-title\"\u003eWatch\u003c/strong\u003e\u003cspan class=\"dropdown-menu-inner-content\"\u003eYou will receive notifications for any activity\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli role=\"menuitem\"\u003e\u003ca class=\"update-notification \" data-notification-level=\"mention\" data-notification-title=\"On mention\" href=\"#\"\u003e\u003cstrong class=\"dropdown-menu-inner-title\"\u003eOn mention\u003c/strong\u003e\u003cspan class=\"dropdown-menu-inner-content\"\u003eYou will receive notifications only for comments in which you were @mentioned\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli role=\"menuitem\"\u003e\u003ca class=\"update-notification \" data-notification-level=\"participating\" data-notification-title=\"Participate\" href=\"#\"\u003e\u003cstrong class=\"dropdown-menu-inner-title\"\u003eParticipate\u003c/strong\u003e\u003cspan class=\"dropdown-menu-inner-content\"\u003eYou will only receive notifications for threads you have participated in\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli role=\"menuitem\"\u003e\u003ca class=\"update-notification \" data-notification-level=\"disabled\" data-notification-title=\"Disabled\" href=\"#\"\u003e\u003cstrong class=\"dropdown-menu-inner-title\"\u003eDisabled\u003c/strong\u003e\u003cspan class=\"dropdown-menu-inner-content\"\u003eYou will not get any notifications via email\u003c/span\u003e\u003c/a\u003e\u003c/li\u003e\n\u003cli class=\"divider\"\u003e\u003c/li\u003e\n\u003cli\u003e\n\u003ca class=\"update-notification\" data-notification-level=\"custom\" data-notification-title=\"Custom\" data-target=\"#modal-1-2-Namespace\" data-toggle=\"modal\" href=\"#\" role=\"button\"\u003e\n\u003cstrong class=\"dropdown-menu-inner-title\"\u003eCustom\u003c/strong\u003e\n\u003cspan class=\"dropdown-menu-inner-content\"\u003eYou will only receive notifications for the events you choose\u003c/span\u003e\n\u003c/a\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/form\u003e\u003c/div\u003e\n","saved":true}

Possible fixes

Use jQuery to update the UI instead of $(e.currentTarget).closest('.notification-dropdown').replaceWith(data.html);