Bug 11274 Sent Notices Tab Not Working Correctly

This patch implements the notices toggle event using a different method.
Using on() lets us bind the event to a parent element, allowing the
event to attach to elements which may not exist on the page yet.

Test plan the same as original patch:

1) have a patron with more then 20 notices sent
2) go to patron profile -> notices
-> without patch, the showing/hidding of notices content does work
correctly only on first loaded page
-> with patch, it should work correctly everywhere - try to use
paginator, searching, ordering....

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>

Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>

koha-tmpl/intranet-tmpl/prog/en/modules/members/notices.tt

@@ -16,18 +16,18 @@
         "sPaginationType": "four_button"
     }));
 
-    $(".notice").hide();
-    $(".notice-title").click(function(e){
-        $(this).closest("tr").children().children(".notice").toggle();
-        e.preventDefault();
-    });
-    
+        $("#noticestable").on("click", ".notice-title", function(e){
+            e.preventDefault();
+            var rowid = $(this).data("noticeid");
+            $("#notice"+rowid).toggle();
+        });
+
     });
 //]]>
 </script>
 <style type="text/css">
-    p.notice { display: none; }
-    a.notice-title { font-weight: bold; display: block; }
+    .notice { display: none; }
+    .notice-title { font-weight: bold; display: block; }
 </style>
 </head>
 <body id="pat_notices" class="pat">
@@ -57,8 +57,8 @@
 	    [% FOREACH QUEUED_MESSAGE IN QUEUED_MESSAGES %]
 	    <tr>
 		<td>
-            <a class="notice-title" href="#">[% QUEUED_MESSAGE.subject %]</a>
-            <div class="notice">
+            <a class="notice-title" data-noticeid="[% QUEUED_MESSAGE.message_id %]" href="#">[% QUEUED_MESSAGE.subject %]</a>
+            <div id="notice[% QUEUED_MESSAGE.message_id %]" class="notice">
                 [% QUEUED_MESSAGE.content FILTER html_line_break %]
             </div>
         </td>