Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

Wednesday, August 23, 2017

CSS Styles/Scripts Are Not Working in Salesforce Force.com Sites

If your styles/scripts are working perfectly in Sandbox and Production preview but if it's not working on Force.com sites which has hosted publicly on Sales force server below points might be the issue.

Your page is referring to some external CSS/JS files:

<apex:page>
 <head>
 <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
<apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" /> 
</head>
<apex:form>
  ----
  ----
</apex:form>
</apex:page>

If your referring any styles/scripts from external sources with out storing them in Static Resource you will end up with problem Please store that files in Statistic resource and then use it then it will work in Force.com sites as well.


<apex:page>
 <head>
  <apex:includeScript value="{!$Resource.dataTableJS}"/>
  <apex:stylesheet value="{!$Resource.dataTableCSS}" />
</head>
<apex:form>
  ----
  ----
</apex:form>
</apex:page>


Your Static Resource is File not accessible publicly



If your using any static resource in your page and if that static resource is not accessible publicly (Cache Control set to Private) then styles will not reflect in Force.com sites.So mark your Static resources cache control as Public



Hope this helps you...Enjoy!


Saturday, July 1, 2017

How to Check Whether All Check Boxes Selected Or Not in Visual Force Page Using Jquery

In my previous post we have discussed about how to check whether at least one check box is checked or not in visual force it's very easy using Jquery .In this post we are going to know about how to check whether all check boxes has selected or not? using Jquery .Please use the below code snippet to check this functionality.

Sample Source Code:


function selectionCheck(selClass)
   {
          
     var chbxClass = '.'+selClass; // selClass is styleclass name for all your checkbox
  
 if ($(chbxClass+':checked').length == $(chbxClass).length) 
        {
        
          alert('You have selected all records for Action'));           
            
        }
  
 else
 {
  alert('You haven't selected all records'); 
 }
     
  }



Thanks for visiting..hope this helps you!

Monday, April 3, 2017

How To Allow Only Numbers in Phone Number Field in Visual Force Page

If your trying to restrict your phone number field to accept only Numbers in visual force page you can use the below simple JavaScript code to achieve this easily.

Java Script Code:
<script>

function isNumber(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
}

</script>

<apex:inputfield value="{!c.Phone__c}" id="boPhone" onkeypress="return isNumber(event)"/>



Thanks for visiting..hope this helps you!

Tuesday, March 28, 2017

How To Check Whether at Least One Check Box Checked or Not? Using JQuery

If you want to know whether at least one check box is checked or not in visual force it's very easy using Jquery .Please use the below code snippet to check this functionality.

Sample Source Code:


function selectionCheck(selClass)
   {
          
        var chbxClass = '.'+selClass; // selClass is styleclass name for all your checkbox
          
        if($(chbxClass).is(':checked'))
  {
   alert('You have selected one or more records');
  }
                
        else
        {
            alert('Please select at least one record');
            return false;
        }
  }


In the above code if you see we are one jQuery method called is() ,this method will loop through the all the list and returns true if at least one record has checked among the list otherwise it will return false.


Thanks for visiting..hope this helps you!



Wednesday, January 4, 2017

How to pass parameters from JavaScript to Controller in Salesforce

If you want to send more than one parameter from javaScript to Apex controller in your class,no worries it can be done easily .Please follow the below snippet to achieve the same.

Sample VisualForce Page

<apex:page>
  <apex:form>
    <apex:pageblock>
   <select id="dropDownId"/>
   <apex:commandButton value="Update" onclick="validate();return false;" />
 </apex:pageblock>
 
  <apex:actionFunction name="updateRecords" action="{!performUpdate}" 
                              reRender="resultPanel,errMsg" status="statusSaveTrip">
        <apex:param id="status" name="selStatus" value="" />
        <apex:param id="renerTabId" name="renderTabId" value="" />
        <apex:param id="phone" name="phone" value="" /> 
    </apex:actionFunction>
  </apex:form>
</apex:page>

<script>
  function validate(dropDownId )
  {
    //Some processing here
  updateRecords(param1 value,param2 value,param3 value);
  }
</script>

Sample Apex Controller

public class SampleController
{
   public SampleController()
   {
   
   }
   
   public pagereference performUpdate()
    {
     System.debug('..entered...performUpdate..');     
     String selDropdownVal=Apexpages.currentPage().getParameters().get('selStatus');
     String tableIdtoRender = Apexpages.currentPage().getParameters().get('renderTabId');
     String phone = Apexpages.currentPage().getParameters().get('phone');
     System.debug('..selDropdownVal...'+selDropdownVal+'..'+tableIdtoRender+'..'+phone);
   }
}


Thanks for visiting..hope this helps you!

How to add pick list field values dynamically in visual force

If we want to add picklist values at run time in visual force it can be done very easily by using <apex:selectOptions> tag .Their might be a situation where you need to go with html 'select ' tag to form the picklist. In this situations if you want add values to it run time their is no in built attributes as we follows in visual force tags.To achieve this we need to use some scripting .In this example I'm going to show with the help of jQuery.

Sample code snippet:


<apex:page>
 <apex:includeScript value="//code.jquery.com/jquery-1.11.1.min.js"/>
  <apex:form id="formId">
    <apex:pageblock>
   <select id="dropDownId">
   <apex:commandButton value="Update" onclick="addPicklistValues('dropDownId');return false;" rerender="formId"/>
 </apex:pageblock>
  </apex:form>

<script>
  function addPicklistValues(dropDownId )
  {
  var dropId = '#'+dropDownId;
  $(dropId).find('option').remove().end().append('<option value="-None-">--None--</option>','<option value="Approved">Approved</option>','<option value="Rejected">Rejected</option>');
              
  }
</script>
</apex:page>

Thanks for visiting..hope this helps you!

Tuesday, January 3, 2017

Jquery to check that checkbox is selected or not in visual force

If you wanna check whether a checkbox is selected or not in visual force please use the below jQuery snippet.

jQuery code snippet:


 function updateSelRecords(checkboxid or checboxstleclas)
    {
        var chbxClassId = '.'+checboxstleclas; // if your receiving checkbox styleclas
                     or 
        var chbxClassId = '#'+checkboxid; //if your receiving checboxId
  
        if($(chbxClassId).prop('checked'))
         {
      
           alert('Checkbox selected');
         }
         
        else
        {
         alert('Please select at least one record');
           return null;
        }
    }



Thanks for visiting...!

Monday, January 2, 2017

How to select all check boxes in visual force page using Jquery class attribute

If you want to select all records in a table we can do it very simply by using tag name but there are some situations where we have 4 tables and clicking on All check box in one table should select only the records related to that table not the all table records.

To achieve that we need to have a unique identifier for each table record but unfortunately in sales force Id of any vf tag can't be a dynamic so we can't use ID here .There is one more attribute called 'styleclass' in visual force tags which can be a dynamic.Now we are using this class attribute to differentiate the table records and we will use jQuery to achieve this functionality.

Sample code snippet:

<apex:repeat value="{!listSer}" var="sr">
  <apex:pageBlockTable value="{!listWrapCase}" var="caseWrap" id="pgbId">
                          
   <apex:column >
     <apex:facet name="header" >
       <input type="checkbox" onclick="selectAllCheckboxes(this,'{!sr}chbxId')"/>
    </apex:facet>
  
   <apex:outputPanel >
     <apex:inputCheckbox value="{!caseWrap.isSelect}" styleClass="{!sr}chbxId"/>
   </apex:outputPanel>
  </apex:column>  
  
  <apex:column >
    <apex:facet name="header" >CaseId</apex:facet> 
    <apex:outputLabel value="{!caseWrap.cs.CaseNumber}" />
 </apex:column>
   
 </apex:pageBlockTable>
</apex:repeat>

Jquery snippet:


<script type="text/javascript">  
     
      function selectAllCheckboxes(obj,receivedInputclass){
      
        $('.'+receivedInputclass).trigger('click');
      }
</script>


Thank you!

Friday, July 15, 2016

How To Remove Length Menu Option From DataTables

Length menu option in Data Table will be used to decide how many number of rows to show in a single page .Please look at the below image to see the length menu


Solution:

To remove the that option we have to use below snippet of code

$(document).ready(function() {
    $('#htmlTableId').DataTable( {
        "bInfo" : false ,
         "bLengthChange" : false
    } );
} );


Output:



Thanks for visiting...Enjoy!

Thursday, January 21, 2016

How to Highlight the selected row in a table in Salesforce Visual Force Page

If you are looking to highlight the selected row in a page block table in visualforce page.To do thos just add the below code snippet to your visualforce page to differentiate the selected row color among the rest of the rows/records in same page block table.

Visual Force Page:
<apex:page standardController="account" recordSetVar="accounts" sidebar="false" showHeader="false">  
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>  
<apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"/>  
   <script>  
     function highlightElem(elem){  
       $('tr').removeClass('ui-state-highlight');  
       $(elem).parent().addClass('ui-state-highlight');  
     }  
   </script>  
     <apex:form >  
       <apex:pageBlock >  
         <apex:pageBlockTable value="{!accounts}" var="a">  
           <apex:column value="{!a.name}" onclick="highlightElem(this)"/>  
            <apex:column value="{!a.BillingState}" onclick="highlightElem(this)"/>  
             <apex:column value="{!a.owner.name}" onclick="highlightElem(this)"/>  
         </apex:pageBlockTable>  
       </apex:pageBlock>  
     </apex:form>    
 </apex:page>  

OutPut:



Note:

1 . If you want to change the Highlighted color write your won style class and add that one script.

Enjoy....!!