Generate less HTML to show the channel grid.

static/js/checks.js

@@ -175,11 +175,27 @@ $(function () {
         return false;
     });
 
+    $(".integrations").tooltip({
+        container: "body",
+        selector: "img",
+        title: function() {
+            var idx = $(this).index();
+            return $("#ch-" + idx).data("title");
+        }
+    });
+
     $(".integrations").on("click", "img", function() {
         var isOff = $(this).toggleClass("off").hasClass("off");
         var token = $('input[name=csrfmiddlewaretoken]').val();
+
+        var idx = $(this).index();
+        var checkCode = $(this).closest("tr").data("code");
+        var channelCode = $("#ch-" + idx).data("code");
+
+        var url = "/checks/" + checkCode + "/channels/" + channelCode + "/enabled";
+
         $.ajax({
-            url: this.dataset.url,
+            url: url,
             type: "post",
             headers: {"X-CSRFToken": token},
             data: {"state": isOff ? "off" : "on"}

templates/front/my_checks_desktop.html

@@ -80,12 +80,8 @@
                 <div class="integrations">
                 {% spaceless %}
                 {% for channel in channels %}
-                    <img
+                    <img src="{{ channel.icon_url }}"
-                        data-toggle="tooltip"
+                         {% if channel in check.channel_set.all %}{% else %}class="off"{% endif %} />
-                        data-url="{% url 'hc-switch-channel' check.code channel.code %}"
-                        title="{{ channel }}"
-                        src="{{ channel.icon_url }}"
-                        {% if channel in check.channel_set.all %}{% else %}class="off"{% endif %} />
                 {% endfor %}
                 {% endspaceless %}
                 </div>
@@ -155,3 +151,11 @@
     {% endfor %}
 
 </table>
+
+{% for channel in channels %}
+<div
+    id="ch-{{ forloop.counter0}}"
+    data-code="{{ channel.code }}"
+    data-title="{{ channel }}">
+</div>
+{% endfor %}