0

I am using jquery data table in my vf. when the page loads for the first or when we refresh the page the vf performs normally and the data table is visible as normal.

However when i perform some action associated with the data table like selecting the records of the data table and doing any dml operation or when i click the show button ,the jquery view is not reflecting in the vf. like the table looks conjusted,no colum sorting ,no row entries,no dynamic search.

Here is the code :

<apex:page controller="LicenseOptimizerControllerrj2"   sidebar="false">
<link href="{!URLFOR($Resource.LB4Res, '/LB4Res/jquery.dataTables.css')}" rel="stylesheet" media="screen"/>  
<apex:includeScript value="{!URLFOR($Resource.LB4Res, 'LB4Res/jquery-1.11.1.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.LB4Res, 'LB4Res/jquery.dataTables.min.js')}"/>

<script>

j$ = jQuery.noConflict();
j$(document).ready( function () {
var shifttable = j$('[id$="Userstable"]').dataTable({
});
});

</script> 

<script type="text/javascript">

        function startLoading(){
            $('#load_scrl').css('top', $(document).scrollTop() + 200);
            $('.loadingBox').show();
        }
        function endLoading(){
             $('.loadingBox').hide();
        }



            </script>

<style>
        .overlay {
            display: none;
            height: 100%;
            left: 0;
            position: fixed;
            top: 0;
            opacity: 0.3;
            -moz-opacity: 0.3;
            width: 100%;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            filter: alpha(opacity=30);
            background: #000;
            -khtml-opacity: 0.3;
            z-index: 1000;
        }
        .loader {
            background: url('/img/loading32.gif') scroll no-repeat 0 0;
            width: 32px;
            height: 32px;
            position: absolute;
            left: 50%;
        }


         .buttonshow{
   border-top: 1px solid #90ae6a;
   background: #91af6a;
   background: -webkit-gradient(linear, left top, left bottom, from(#91af6a), to(#91af6a));
   background: -webkit-linear-gradient(top, #91af6a, #91af6a);
   background: -moz-linear-gradient(top, #91af6a, #91af6a);
   background: -ms-linear-gradient(top, #91af6a, #91af6a);
   background: -o-linear-gradient(top, #91af6a, #91af6a);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,0) 0 2px 0;
   text-shadow: rgba(0,0,0,0) 0 1px 0;
   color: #000000;
   font-size: 25px;
   font-family: Book Antiqua, Palatino, Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.buttonshow:hover {
   <!--border-top-color: #337ab7; -->
   background: #337ab7;
   color:#FFFFFF;
   }
 .buttonshow:active {
 <!--  border-top-color: #91af6a; -->
   background: #337ab7;
         color:#FFFFFF
   } 

        .buttonDeactivate{
   border-top: 1px solid #90ae6a;
   background: #91af6a;
   background: -webkit-gradient(linear, left top, left bottom, from(#91af6a), to(#91af6a));
   background: -webkit-linear-gradient(top, #91af6a, #91af6a);
   background: -moz-linear-gradient(top, #91af6a, #91af6a);
   background: -ms-linear-gradient(top, #91af6a, #91af6a);
   background: -o-linear-gradient(top, #91af6a, #91af6a);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,0) 0 2px 0;
   text-shadow: rgba(0,0,0,0) 0 1px 0;
   color: #000000;
   font-size: 25px;
   font-family: Book Antiqua, Palatino, Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.buttonDeactivate:hover {
  <!-- border-top-color: #FF3300; -->
  background: #FF3300;  
   color:#FFFFFF
;
   }
.buttonDeactivate:active {
 <!--  border-top-color: #91af6a; -->
   background: #FF3300;
         color:#FFFFFF
   } 

        .buttonActivate{
   border-top: 1px solid #90ae6a;
   background: #91af6a;
   background: -webkit-gradient(linear, left top, left bottom, from(#91af6a), to(#91af6a));
   background: -webkit-linear-gradient(top, #91af6a, #91af6a);
   background: -moz-linear-gradient(top, #91af6a, #91af6a);
   background: -ms-linear-gradient(top, #91af6a, #91af6a);
   background: -o-linear-gradient(top, #91af6a, #91af6a);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,0) 0 2px 0;
   text-shadow: rgba(0,0,0,0) 0 1px 0;
   color: #000000;
   font-size: 25px;
   font-family: Book Antiqua, Palatino, Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.buttonActivate:hover {
  <!-- border-top-color: #FF3300; -->
  background: #5cb85c;  
   color:#FFFFFF
;
   }
      .buttonActivate:active {
 <!--  border-top-color: #91af6a; -->
   background: #5cb85c;
         color:#FFFFFF
   } 



    </style>
    <apex:form id="page-form" >



        <apex:pageBlock title="Manage Users Licenses" id="pb"   >
            <apex:pagemessages />
            <apex:pageBlockSection title="Search Citeria" id="ustatus" columns="8" collapsible="false" >



                 <apex:selectList value="{!strProfileType}" size="5" multiselect="true"  label="Profile Name" title="Profile Name"  >
                    <apex:selectOptions value="{!ProfileType}"/>
                </apex:selectList>


           <apex:selectList value="{!strShiftType}" multiselect="true"  size="5"  label="Shift Types" title="Users"   >
                    <apex:selectOption itemValue="Regular" itemLabel="Regular"/>                
                    <apex:selectOption itemValue="Afternoon" itemLabel="Afternoon"/>
                    <apex:selectOption itemValue="Evening" itemLabel="Evening"/>
                    <apex:selectOption itemValue="Night" itemLabel="Night"/>
                    <apex:selectOption itemValue="na" itemLabel="NA"/>               
                </apex:selectList>

                <apex:selectList value="{!blStatusValue}" size="2"   label="Status" title="Status"  >
                    <apex:selectOption itemValue="true" itemLabel="Active"/>
                    <apex:selectOption itemValue="false" itemLabel="Inactive"/>
                </apex:selectList>





                <div id="load_scrl" class="loadingBox loader" style="display:none"> </div>
                <div class="loadingBox overlay"> </div>
            <apex:actionStatus onstart="startLoading();" onstop="endLoading();" id="loadStatus" />
            <apex:commandButton action="{!refresh}" value="Show" status="loadStatus" rerender="pb"  styleClass="buttonshow"/>

            </apex:pageBlockSection>

        <apex:pageBlock >
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="Userstable" style="margin-top:20px;">
            <thead>
                <tr>
            <th>Select user</th>
                    <th>Custom Users</th>
                    <th>ProfileName</th>
                    <th>Shift_Type Name</th>
                    <th>Start_Time</th>
                    <th>End_Time</th>
                    <th>Status__c</th>
                </tr>
            </thead>

 <tbody>
                <apex:repeat value="{!users}" var="c">
                    <tr>
             <td> <apex:inputCheckbox value="{!c.checked}"/> </td>
                        <td>{!c.cat.Name__c}</td>
                        <td>{!c.cat.ProfileName__c}</td>
                        <td>{!c.cat.Shift_Type__c}</td>

                        <td>{!c.cat.Start_Time__c}</td>
                         <td>{!c.cat.End_Time__c}</td>
                        <td>
                            {!c.cat.Status__c}
                        </td>


                  </tr>
                 </apex:repeat>
            </tbody>
        </table>

         <br/>
        <br/>
        </apex:pageBlock>








            <center>
              <!--  <apex:commandButton status="fetchStatus"  value="Refresh" action="{!refresh}" title="Refresh Page"/> -->

                <apex:commandButton value="Activate Users"  status="loadStatus"    action="{!activate}" rendered="{!blActivateButton}" reRender="pb" styleClass="buttonActivate"  />
                <apex:commandButton id="Deactivate" value="Deactivate Users" status="loadStatus" action="{!deactivate}" rendered="{!blDeactivateButton}" reRender="pb" styleClass="buttonDeactivate"  /> 
            </center>

            </apex:pageBlock>

            <apex:pageBlock id="userdetailinfo" rendered="{!blShowUserDetail}"  >
                <apex:detail relatedList="false" title="false"  subject="{!iduser}" />   
            </apex:pageBlock> 

    </apex:form> 




</apex:page>
  • 1
    Instead of putting the ALL code to the question, you better highlight only the problem areas of it.At the moment I believe no one will look at this question because it is just unreadable... – Sergej Utko Mar 11 '15 at 12:23
  • When sorting/search breaks that's a clear indicator that datatables.js threw an exception. Is there anything in your JS console? – Rick Schmidt Mar 11 '15 at 12:52
  • @ Rick Schmidt there are no exceptions.i am newbiee to jquery. i believe there is some basic fundamental concept. it is something like on page load the jqeruy works well. but on button submission on vf, the page is not able to load the jquery ui. – chops Mar 11 '15 at 13:30
  • adding more like, the jquery script is working on page load , however the when i do some event in the page the refresh is done on some part of the page and that part is not having jquery UI. – chops Mar 11 '15 at 14:11
  • @Chops. Here you can do this steps to observe what is happening. 1) write some alert statement right in the beginhing of the button method or which ever the action method you are expecting to know weather it is invoking or not. 2) After clicking the button right click on the UI and select inspect element and you will land on the console and start going through it you may find some thing mess causing the problem. – Suresh Mar 11 '15 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.