0

Not able the search the content in visualforce when typing in the search box which is rendered from controller in list of wrapper...enter image description here

****Visualforce code:****

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> 


<script>
 /* j$ = jQuery.noConflict();
$ j$(document).ready( function () {
            var myTable = j$('[id$="myTable"]').DataTable({

            });
        });*/
 $(document).ready( function () {
           $('#pageid\\:frm\\:OfficeContactList\\:myTable').DataTable();
        });
</script>
<script>

function setFocusOnLoad() {} /function runsearch(){ var str= document.getelementById('{!$Component.frm.OfficeContactList.search_offcontacts.searchstr}').value; if(str.length>=2){ doSearchJs(); } else{ alert('Please Enter Atleast two characters'); } }/

  </script>
<apex:form id="frm">
    <apex:slds />

    <!--apex:actionFunction name="doSearchJs" action="{!initOfficeContacts}" rerender="frm"/-->




    <apex:pageBlock title="Office Contacts" id="OfficeContactList" >
        <apex:pageBlockSection id="search_offcontacts">

            <!--apex:inputText id="searchstr" value="{!searchstr}"/-->
        <!--apex:commandButton value="Search" onclick="runsearch();"/-->

        </apex:pageBlockSection>
        <apex:pageBlockButtons location="top">
            <apex:commandButton value="New" action="{!add}" reRender="OfficeContactList" status="busyMsgDiv"/>
            <apex:commandButton value="Save" action="{!save}" reRender="OfficeContactList" status="busyMsgDiv"/>
            <apex:actionStatus id="busyMsgDiv" startStyleClass="requiredLoaderBG" stopStyleClass="hidden" layout="block"/>
        </apex:pageBlockButtons>
        <apex:outputPanel layout="block" styleClass="tableWrapper" id="tableWrapper" rendered="{!hasContacts}">
            <apex:dataTable value="{!officeContacts}" var="ocw"  id="myTable">
                <apex:column headerValue="Action" width="20px">
                    <apex:commandLink style="font-size:12px; text-align:center;" value="Del"
                    immediate="true" action="{!delRow}" reRender="OfficeContactList" status="busyMsgDiv"> 
                        <apex:param value="{!ocw.rowIndex}" name="index" assignto="{!selectedIndex}"/>
                    </apex:commandLink>
                </apex:column>
                <apex:column headerValue="Name" > <apex:inputField required="true" value="{!ocw.officeContact.Name}" />   </apex:column>
                <apex:column headerValue="Type" > <apex:inputField value="{!ocw.officeContact.Type__c}" />   </apex:column>
                <apex:column headerValue="Phone" > <apex:inputField value="{!ocw.officeContact.Phone__c}" type="tel"/> </apex:column>
                <apex:column headerValue="Email"> <apex:inputField value="{!ocw.officeContact.email__c}" type="email" style="width:120px"/> </apex:column>
                <apex:column headerValue="Preferences"> <apex:inputField value="{!ocw.officeContact.Preferences__c}" style="width:120px" />   </apex:column>
                <apex:column headerValue="CORE Referral Manager" rendered="{!IF($Profile.Name =='SOS Profile', false , true)}"> <apex:inputField value="{!ocw.officeContact.CORE_Referral_Manager__c}" style="width:120px"  />   </apex:column>
                <apex:column headerValue="Account"><apex:outputField value="{!ocw.officeContact.Account__c}"/></apex:column>    

        </apex:dataTable>
        </apex:outputPanel>
        <apex:outputPanel rendered="{!hasContacts}" id="emptyBlock">
            <h4>There are no Office Contacts added. Please click New button to create.</h4>
        </apex:outputPanel>
    </apex:pageBlock>

body .bPageBlock{ border-left:none !important; border-right:none !important; border-top-width: 0px; !important; } body .bPageBlock .pbHeader{ padding-top: 0px !important; padding-bottom: 0px !important; padding-right: 0px !important; padding-left: 0px !important; }

body .bPageBlock .pbHeader .pbTitle{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 0px !important;
    padding-left: 5px !important;
}

body .bPageBlock .pbHeader .pbButton{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

body .bPageBlock .pbBody {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
}
.tableWrapper{
    float:left;
    overflow: auto;
    width:100%;
    height: 169px;
}
.requiredLoaderBG{
    background-color: rgb(71,71,71);
    opacity:0.7;
    filter:alpha(opacity=70);
    background-image:url('/img/loading.gif');
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1000;
}
.hidden{
    display:none;
}

  • Do you see any errors in the JavaScript console? – Keith C Feb 3 '20 at 8:34

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.