--CRM-14636 Datatables implimentation causes dom collisions
authorDivya Jose <divya@divya.(none)>
Wed, 7 May 2014 13:55:47 +0000 (19:25 +0530)
committerDivya Jose <divya@divya.(none)>
Tue, 20 May 2014 07:08:17 +0000 (12:38 +0530)
14 files changed:
templates/CRM/Activity/Selector/Selector.tpl
templates/CRM/Batch/Form/Search.tpl
templates/CRM/Campaign/Form/Gotv.tpl
templates/CRM/Campaign/Form/Search/Campaign.tpl
templates/CRM/Campaign/Form/Search/Petition.tpl
templates/CRM/Campaign/Form/Search/Survey.tpl
templates/CRM/Campaign/Form/Task/Interview.tpl
templates/CRM/Contact/Form/Task.tpl
templates/CRM/Contact/Page/View/RelationshipSelector.tpl
templates/CRM/Financial/Form/BatchTransaction.tpl
templates/CRM/Financial/Form/Search.tpl
templates/CRM/Financial/Page/BatchTransaction.tpl
templates/CRM/Group/Form/Search.tpl
templates/CRM/Mailing/Page/Tab.tpl

index 3b51bffceb4c33a83836f8908679f8d8fc13dbee..54870dc1441e7a9ac6b0fab288e620901f811067 100644 (file)
@@ -40,7 +40,7 @@
       </div>
     </div><!-- /.crm-accordion-body -->
   </div><!-- /.crm-accordion-wrapper -->
-  <table id="contact-activity-selector-{$context}">
+  <table class="contact-activity-selector-{$context}">
     <thead>
     <tr>
       <th class='crm-contact-activity-activity_type'>{ts}Type{/ts}</th>
@@ -95,7 +95,7 @@ function buildContactActivities{/literal}{$context}{literal}( filterSearch ) {
     ZeroRecordText += '.';
   }
 
-  {/literal}{$context}{literal}oTable = cj('#contact-activity-selector-' + context ).dataTable({
+  {/literal}{$context}{literal}oTable = cj('.contact-activity-selector-' + context ).dataTable({
     "bFilter"    : false,
     "bAutoWidth" : false,
     "aaSorting"  : [],
@@ -158,7 +158,7 @@ function buildContactActivities{/literal}{$context}{literal}( filterSearch ) {
 }
 
 function setSelectorClass{/literal}{$context}{literal}( context ) {
-  cj('#contact-activity-selector-' + context + ' td:last-child').each( function( ) {
+  cj('.contact-activity-selector-' + context + ' td:last-child').each( function( ) {
     cj(this).parent().addClass(cj(this).text() );
   });
 }
index 3d1e08b11d23b782db5df4a2b55132addf4fa4fa..dd93a85594f6d9cbabc16f617965601a7ace29d9 100644 (file)
@@ -40,7 +40,7 @@
 <div class="crm-submit-buttons">
   <a accesskey="N" href="{crmURL p='civicrm/batch/add' q='reset=1&action=add'}" id="newBatch" class="button"><span><div class="icon add-icon"></div>{ts}New Data Entry Batch{/ts}</span></a><br/>
 </div>
-<table id="crm-batch-selector">
+<table class="crm-batch-selector">
   <thead>
   <tr>
     <th class="crm-batch-name">{ts}Batch Name{/ts}</th>
@@ -79,7 +79,7 @@ function buildBatchSelector( filterSearch ) {
   var columns = '';
   var sourceUrl = {/literal}'{crmURL p="civicrm/ajax/batchlist" h=0 q="snippet=4"}'{literal};
 
-  crmBatchSelector = cj('#crm-batch-selector').dataTable({
+  crmBatchSelector = cj('.crm-batch-selector').dataTable({
   "bFilter"    : false,
   "bAutoWidth" : false,
   "aaSorting"  : [],
index 173f58a57e661d03a66c7b8b68787d5afb36f8b5..5e81d4719be92d55d9cd74fd1a1f3e77d82944f0 100755 (executable)
@@ -47,7 +47,7 @@
        </script>
        {/literal}
 
-       <table id="gotvVoterRecords">
+       <table class="gotvVoterRecords">
            <thead>
               <tr class="columnheader">
             <th></th>
@@ -121,7 +121,7 @@ function loadVoterList( )
 
      var searchVoterFor = {/literal}'{$searchVoterFor}'{literal};
 
-     cj( '#gotvVoterRecords' ).dataTable({
+     cj( '.gotvVoterRecords' ).dataTable({
                "bFilter"    : false,
     "bAutoWidth" : false,
         "bProcessing": true,
index 57486047f1447b2bfc2ed7ffc98218d08a87f438..865ffee2c5f480255a849dbf43c68e02825c37c1 100755 (executable)
@@ -48,7 +48,7 @@
       });
     </script>
   {/literal}
-  <table id="campaigns">
+  <table class="campaigns">
     <thead>
     <tr class="columnheader">
       <th class="hiddenElement">{ts}Campaign ID{/ts}</th>
     }
     noRecordFoundMsg += searchQill.join('<span class="font-italic"> ...AND... </span></div><div class="qill">');
 
-    cj('#campaigns').dataTable({
+    cj('.campaigns').dataTable({
       "bFilter": false,
       "bAutoWidth": false,
       "bProcessing": false,
index 479a18263e270dc84c2a311c92e157bce9d55f12..5c85ecb99571d1857f5d5ae36a00950c9910c35a 100755 (executable)
@@ -52,7 +52,7 @@
        </script>
        {/literal}
 
-       <table id="petitions">
+       <table class="petitions">
            <thead>
               <tr class="columnheader">
             <th class="hiddenElement">{ts}Petition ID{/ts}</th>
@@ -173,7 +173,7 @@ function loadPetitionList( )
      }
      noRecordFoundMsg += searchQill.join( '<span class="font-italic"> ...AND... </span></div><div class="qill">' );
 
-     cj( '#petitions' ).dataTable({
+     cj( '.petitions' ).dataTable({
              "bFilter"    : false,
              "bAutoWidth" : false,
              "bProcessing": false,
index 68fa79aa9b5b48bad86b7ade88ddda017f273e52..a50f5c2d2d35152870bf0187d3f329066b2b5171 100755 (executable)
@@ -51,7 +51,7 @@
   </script>
   {/literal}
 
-  <table id="surveys">
+  <table class="surveys">
     <thead>
     <tr class="columnheader">
       <th class="hiddenElement">{ts}Survey ID{/ts}</th>
@@ -183,7 +183,7 @@ function loadSurveyList( )
      }
      noRecordFoundMsg += searchQill.join( '<span class="font-italic"> ...AND... </span></div><div class="qill">' );
 
-     cj( '#surveys' ).dataTable({
+     cj( '.surveys' ).dataTable({
              "bFilter"    : false,
              "bAutoWidth" : false,
              "bProcessing": false,
index 242d5787bdad1ac7ef430f145ed87dd28d2b2708..c1dee1e932845ffa8ff3976e761e46b73aab428b 100644 (file)
       </script>
     </div>
 
-    <table id="voterRecords" class="display crm-copy-fields">
+    <table id="voterRecords-{$instanceId}" class="display crm-copy-fields">
       <thead>
       <tr class="columnheader">
         {foreach from=$readOnlyFields item=fTitle key=fName}
@@ -212,7 +212,7 @@ var updateVoteforall = "{/literal}{ts escape='js'}Update Responses for All{/ts}{
 CRM.$(function($) {
   var count = 0; var columns='';
 
-  cj('#voterRecords th').each( function( ) {
+  cj('#voterRecords-{/literal}{$instanceId}{literal} th').each( function( ) {
     if ( cj(this).attr('class') == 'contact_details' ) {
       columns += '{"sClass": "contact_details"},';
     }
@@ -226,7 +226,7 @@ CRM.$(function($) {
   eval('columns =[' + columns + ']');
 
   //load jQuery data table.
-  cj('#voterRecords').dataTable( {
+  cj('#voterRecords-{/literal}{$instanceId}{literal}').dataTable( {
     "sPaginationType": "full_numbers",
     "bJQueryUI"  : true,
     "aoColumns"  : columns
index 6a105d20fa1f9b4d1aa3c22947409ffd976561fb..3d00eeb0d7da8b49bd829ef404494051586eb306 100644 (file)
@@ -27,7 +27,7 @@
 
 {if $searchtype eq 'ts_sel'}
 <div id="popupContainer">
-  <table id="selectedRecords" class="display crm-copy-fields">
+  <table id="selectedRecords-{$group.id}" class="display crm-copy-fields">
     <thead>
     <tr class="columnheader">
       <th class="contact_details">{ts}Name{/ts}</th>
@@ -71,7 +71,7 @@
     });
 
     var count = 0; var columns = ''; var sortColumn = '';
-    $('#selectedRecords th').each(function() {
+    $('#selectedRecords-{/literal}{$group.id}{literal} th').each(function() {
       if ($(this).attr('class') == 'contact_details') {
         sortColumn += '[' + count + ', "asc" ],';
         columns += '{"sClass": "contact_details"},';
@@ -88,7 +88,7 @@
     eval('columns =[' + columns + ']');
 
     //load jQuery data table.
-    $('#selectedRecords').dataTable( {
+    $('#selectedRecords-{/literal}{$group.id}{literal}').dataTable( {
       "sPaginationType": "full_numbers",
       "bJQueryUI"  : true,
       "aaSorting"  : sortColumn,
index 40b31ff166b725a20f927a474a8af3fd3ecf3af5..fae62fcb90eb2172d2d0e045db4eda67977e53c6 100644 (file)
@@ -26,7 +26,7 @@
 {* relationship selector *}
 
 <div class="crm-contact-relationship-{$context}">
-  <table id="crm-contact-relationship-selector-{$context}">
+  <table class="crm-contact-relationship-selector-{$context}">
     <thead>
     <tr>
       <th class='crm-contact-relationship-type'>{ts}Relationship{/ts}</th>
@@ -65,7 +65,7 @@
       var ZeroRecordText = {/literal}'{ts escape="js"}There are no relationships entered for this contact.{/ts}'{literal};
     }
 
-    {/literal}{$context}{literal}oTable = cj('#crm-contact-relationship-selector-' + context).dataTable({
+    {/literal}{$context}{literal}oTable = cj('.crm-contact-relationship-selector-' + context).dataTable({
       "bFilter": false,
       "bAutoWidth": false,
       "aaSorting": [],
index 0ce0b1dfd2fe5b76ef0be58b1d3c6d1af6de5a38..c5f457484e8d1c032231b935f33fdd1f42078fa6 100644 (file)
@@ -66,7 +66,7 @@
   <p></p>
   <div class="form-item">
   {strip}
-    <table id="crm-transaction-selector-assign" cellpadding="0" cellspacing="0" border="0">
+    <table id="crm-transaction-selector-assign-{$entityID}" cellpadding="0" cellspacing="0" border="0">
       <thead>
       <tr>
         <th class="crm-transaction-checkbox">{if $statusID eq 1}{$form.toggleSelect.html}{/if}</th>
@@ -111,17 +111,17 @@ CRM.$(function($) {
 
     cj("#trans_assign").prop('disabled',true);
     cj("#trans_remove").prop('disabled',true);
-    cj('#crm-transaction-selector-assign #toggleSelect').click( function() {
+    cj('#crm-transaction-selector-assign-{/literal}{$entityID}{literal} #toggleSelect').click( function() {
       enableActions('x');
     });
-    cj('#crm-transaction-selector-remove #toggleSelects').click( function() {
+    cj('#crm-transaction-selector-remove-{/literal}{$entityID}{literal} #toggleSelects').click( function() {
       enableActions('y');
     });
     cj('#Go').click( function() {
-      return selectAction("trans_assign","toggleSelect", "crm-transaction-selector-assign input[id^='mark_x_']");
+      return selectAction("trans_assign","toggleSelect", "crm-transaction-selector-assign-{/literal}{$entityID}{literal} input[id^='mark_x_']");
     });
     cj('#GoRemove').click( function() {
-      return selectAction("trans_remove","toggleSelects", "crm-transaction-selector-remove input[id^='mark_y_']");
+      return selectAction("trans_remove","toggleSelects", "crm-transaction-selector-remove-{/literal}{$entityID}{literal} input[id^='mark_y_']");
     });
     cj('#Go').click( function() {
       if (cj("#trans_assign" ).val() != "" && cj("input[id^='mark_x_']").is(':checked')) {
@@ -135,27 +135,27 @@ CRM.$(function($) {
       }
       return false;
     });
-    cj("#crm-transaction-selector-assign input[id^='mark_x_']").click( function() {
+    cj("#crm-transaction-selector-assign-{/literal}{$entityID}{literal} input[id^='mark_x_']").click( function() {
       enableActions('x');
     });
-    cj("#crm-transaction-selector-remove input[id^='mark_y_']").click( function() {
+    cj("#crm-transaction-selector-remove-{/literal}{$entityID}{literal} input[id^='mark_y_']").click( function() {
       enableActions('y');
     });
 
-    cj("#crm-transaction-selector-assign #toggleSelect").click( function() {
-      if (cj("#crm-transaction-selector-assign #toggleSelect").is(':checked')) {
-        cj("#crm-transaction-selector-assign input[id^='mark_x_']").prop('checked',true);
+    cj("#crm-transaction-selector-assign-{/literal}{$entityID}{literal} #toggleSelect").click( function() {
+      if (cj("#crm-transaction-selector-assign-{/literal}{$entityID}{literal} #toggleSelect").is(':checked')) {
+        cj("#crm-transaction-selector-assign-{/literal}{$entityID}{literal} input[id^='mark_x_']").prop('checked',true);
       }
       else {
-        cj("#crm-transaction-selector-assign input[id^='mark_x_']").prop('checked',false);
+        cj("#crm-transaction-selector-assign-{/literal}{$entityID}{literal} input[id^='mark_x_']").prop('checked',false);
       }
     });
-    cj("#crm-transaction-selector-remove #toggleSelects").click( function() {
-      if (cj("#crm-transaction-selector-remove #toggleSelects").is(':checked')) {
-        cj("#crm-transaction-selector-remove input[id^='mark_y_']").prop('checked',true);
+    cj("#crm-transaction-selector-remove-{/literal}{$entityID}{literal} #toggleSelects").click( function() {
+      if (cj("#crm-transaction-selector-remove-{/literal}{$entityID}{literal} #toggleSelects").is(':checked')) {
+        cj("#crm-transaction-selector-remove-{/literal}{$entityID}{literal} input[id^='mark_y_']").prop('checked',true);
       }
       else {
-        cj("#crm-transaction-selector-remove input[id^='mark_y_']").prop('checked',false);
+        cj("#crm-transaction-selector-remove-{/literal}{$entityID}{literal} input[id^='mark_y_']").prop('checked',false);
       }
     });
   }
@@ -181,7 +181,7 @@ function buildTransactionSelectorAssign(filterSearch) {
     var ZeroRecordText = '<div class="status messages">{/literal}{ts escape="js"}No Contributions found for your search criteria.{/ts}{literal}</li></ul></div>';
   }
 
-  crmBatchSelector1 = cj('#crm-transaction-selector-assign').dataTable({
+  crmBatchSelector1 = cj('#crm-transaction-selector-assign-{/literal}{$entityID}{literal}').dataTable({
   "bDestroy"   : true,
   "bFilter"    : false,
   "bAutoWidth" : false,
@@ -251,7 +251,7 @@ function buildTransactionSelectorRemove( ) {
   var columns = '';
   var sourceUrl = {/literal}'{crmURL p="civicrm/ajax/rest" h=0 q="className=CRM_Financial_Page_AJAX&fnName=getFinancialTransactionsList&snippet=4&context=financialBatch&entityID=$entityID&statusID=$statusID"}'{literal};
 
-  crmBatchSelector = cj('#crm-transaction-selector-remove').dataTable({
+  crmBatchSelector = cj('#crm-transaction-selector-remove-{/literal}{$entityID}{literal}').dataTable({
   "bDestroy"   : true,
   "bFilter"    : false,
   "bAutoWidth" : false,
index 5b6ff9a0d7c70a9542eccc262c4a9badbf652112..4318694293a33759822a20270c419ce307d5e2cc 100644 (file)
@@ -50,7 +50,7 @@
   </div>
 </div>
 <div class="form-layout-compressed">{$form.batch_update.html}&nbsp;{$form.submit.html}</div><br/>
-<table id="crm-batch-selector" class="row-highlight">
+<table id="crm-batch-selector-{$batchStatus}" class="row-highlight">
   <thead>
     <tr>
       <th class="crm-batch-checkbox">{$form.toggleSelect.html}</th>
@@ -91,7 +91,7 @@ CRM.$(function($) {
     var ZeroRecordText = {/literal}'<div class="status messages">{ts escape="js"}No Accounting Batches match your search criteria.{/ts}</div>'{literal};
     var sourceUrl = {/literal}'{crmURL p="civicrm/ajax/batchlist" h=0 q="snippet=4&context=financialBatch"}'{literal};
 
-    batchSelector = $('#crm-batch-selector').dataTable({
+    batchSelector = $('#crm-batch-selector-{/literal}{$batchStatus}{literal}').dataTable({
       "bFilter" : false,
       "bAutoWidth" : false,
       "aaSorting" : [],
@@ -137,7 +137,7 @@ CRM.$(function($) {
           }
         });
         checkedRows = [];
-        $("#crm-batch-selector input.select-row:checked").each(function() {
+        $("#crm-batch-selector-{/literal}{$batchStatus}{literal} input.select-row:checked").each(function() {
           checkedRows.push('#' + $(this).attr('id'));
         });
       },
@@ -149,7 +149,7 @@ CRM.$(function($) {
         return nRow;
       },
       "fnDrawCallback": function(oSettings) {
-        $('.crm-editable', '#crm-batch-selector').crmEditable();
+        $('.crm-editable', '#crm-batch-selector-{/literal}{$batchStatus}{literal}').crmEditable();
         $("#toggleSelect").prop('checked', false);
         if (checkedRows.length) {
           $(checkedRows.join(',')).prop('checked', true).change();
index 92d1db1f970752a60f141f5a64d224bb1a02cae3..a14c37f8596526dcc6664743980b5a6b99b011ba 100644 (file)
@@ -52,7 +52,7 @@
   <p></p>
   <div class="form-item">
   {strip}
-    <table id="crm-transaction-selector-remove" cellpadding="0" cellspacing="0" border="0">
+    <table id="crm-transaction-selector-remove-{$entityID}" cellpadding="0" cellspacing="0" border="0">
       <thead>
         <tr>
           <th class="crm-transaction-checkbox">{if $statusID eq 1}{$form.toggleSelects.html}{/if}</th>
index 1fe66e4672c43c13dd1f14f355be909305cce8ba..c39b0d015239afadcbd480dcb4648f051cddcab3 100644 (file)
@@ -67,7 +67,7 @@
 </table>
 </div>
 <br/>
-<table id="crm-group-selector">
+<table class="crm-group-selector">
   <thead>
     <tr>
       <th class='crm-group-name'>{ts}Name{/ts}</th>
@@ -105,7 +105,7 @@ CRM.$(function($) {
     .on('click', 'a.button, a.action-item[href*="action=update"], a.action-item[href*="action=delete"]', CRM.popup)
     .on('crmPopupFormSuccess', 'a.button, a.action-item[href*="action=update"], a.action-item[href*="action=delete"]', function() {
         // Refresh datatable when form completes
-        $('#crm-group-selector').dataTable().fnDraw();
+        $('.crm-group-selector').dataTable().fnDraw();
     });
 });
 
@@ -130,7 +130,7 @@ function buildGroupSelector( filterSearch, parentsOnlyArg ) {
     var sourceUrl = {/literal}'{crmURL p="civicrm/ajax/grouplist" h=0 q="snippet=4"}'{literal};
     var showOrgInfo = {/literal}"{$showOrgInfo}"{literal};
 
-    crmGroupSelector = cj('#crm-group-selector').dataTable({
+    crmGroupSelector = cj('.crm-group-selector').dataTable({
         "bFilter"    : false,
         "bAutoWidth" : false,
         "aaSorting"  : [],
@@ -230,7 +230,7 @@ function buildGroupSelector( filterSearch, parentsOnlyArg ) {
 }
 
 function setSelectorClass( parentsOnly, showOrgInfo ) {
-  cj('#crm-group-selector tr').each( function( ) {
+  cj('.crm-group-selector tr').each( function( ) {
     var className = cj(this).find('td:last-child').text();
     cj(this).addClass( className );
     var rowID = cj(this).find('td:nth-child(2)').text();
@@ -244,7 +244,7 @@ function setSelectorClass( parentsOnly, showOrgInfo ) {
 }
 
 // show hide children
-cj('#crm-group-selector').on( 'click', 'span.show-children', function(){
+cj('.crm-group-selector').on( 'click', 'span.show-children', function(){
   var showOrgInfo = {/literal}"{$showOrgInfo}"{literal};
   var rowID = cj(this).parents('tr').prop('id');
   var parentRow = rowID.split('_');
index 667e889d7b6af52fdde622d3a73423232598d858..14a7a7a34c0741641f9a659fa29d76d927a4291f 100644 (file)
@@ -25,7 +25,7 @@
 *}
 
 <div class="crm-mailing-selector">
-  <table id="contact-mailing-selector">
+  <table class="contact-mailing-selector">
     <thead>
     <tr>
       <th class='crm-mailing-contact-subject'>{ts}Subject{/ts}</th>
@@ -50,7 +50,7 @@
 
       var ZeroRecordText = {/literal}'{ts escape="js"}No mailings found{/ts}.'{literal};
 
-      oTable = $('#contact-mailing-selector').dataTable({
+      oTable = $('.contact-mailing-selector').dataTable({
         "bFilter": false,
         "bAutoWidth": false,
         "aaSorting": [],