+ Start a Discussion
StevevStevev 

Using jQuery in Apex

I want to provide my users a broader experience with the UI than is provided by the standard UI (not meant as a criticism it does a good job).

 

As the platform is opening up with the Google Visualization API I figure that I should be able to do the same using the jQuery library and the datePicker feature. I've written a simple example that shows 2 date fields. The first is a standard javascript text field implementation using the jQuery library (this also makes sure I'm picking up the library successfully). The second is  the Birthdate field for a Contact. I applied the id and style but is not overriding the standard implementation. Anyone implemented this?

 

 

<apex:page id="thePage" standardController="Contact">

<!-- Load libraries -->

<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker();
  });
  </script>
</head>
  
  <apex:form >
  <apex:pageBlock>
  
  <apex:pageblockSection>
  <div type="text" id="datepicker" style="font-size:62.5%;"></div> 
  
  </apex:pageblockSection>
  </apex:pageBlock>
  <apex:pageBlock>
  
  <apex:pageblockSection>
  <apex:inputfield value="{!Contact.Birthdate}" id="datepicker" style="font-size:62.5%;"/>
  <apex:pageBlockSectionItem />
  </apex:pageblockSection>
  </apex:pageBlock>
  
  </apex:form>
</apex:page>

 I have seen some examples where the library is uploaded as a static resource but I don't think that should be necessary when using an Open Source library unless there is some security concerns. Any ideas would be appreciated.

 

Best Answer chosen by Admin (Salesforce Developers) 
StevevStevev

Your suggestion worked and I managed to override the calendar. I also added a weekday ony option (which doesn't make sense in the context of birth date of course but just to prove the idea). I also removed the default date. I put the style in a style library and uploaded to the Static Resources.

 

The code looks as follows:

 

 

<apex:page id="thePage" standardController="Contact">
<!-- Load libraries -->
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>  
  <script>
  $(document).ready(function() {
<!--    $("#datepicker").datepicker();  -->
    $('span[class~="dateOnlyInput"] input').removeAttr('onfocus').datepicker({ beforeShowDay: $.datepicker.noWeekends });    
    $('.dateFormat').empty()
  });
  </script>
</head> 
  <apex:form>
  <apex:pageBlock >

  <apex:pageblockSection >
  <apex:inputfield value="{!Contact.Birthdate}" id="datepicker" styleClass="JQueryDate"/>
  <apex:pageBlockSectionItem />
  </apex:pageblockSection>
  </apex:pageBlock>

  
  </apex:form>

</apex:page>

 

 

The one problem I had was the font-size appears to not be picked up by the code. The solution was to add a body tag with the font size:

 

<body style="font-size:62.5%;">

 

 

Another option is to add a theme but I need to explore that further. Hopefully this is useful anecdotal information.

 

Thanks to sfdcfox

 

 

All Answers

sfdcfoxsfdcfox

The style attribute of inputField only affects the input tag of the entire generated code (which includes a label and a span). Furthermore, the Force.com platform mangles the id attribute of a generated field, thus causing your code to fail to pick up the field correctly. In fact, it is that very mangling that is allowing your code to run correctly, because duplicate id values are not allowed in a form in Visualforce (well, they are allowed to be duplicated on normal HTML tags, but not for tags in the apex, c, or managed-package-name namespaces, but you should not do that anyways because it is not standards compliant).

 

To override the default date field mechanisms, you'll probably want to do the following:

 

$('span[class~="dateOnlyInput"] input').removeAttr('onfocus').datepicker();

First, I find input fields thus mangled by Salesforce, then I remove their default onfocus attribute (which is the default behavior picklist), then I call datepicker() to attach the new behavior. Note that the "current-day" selector will still work as expected. You can remove that element separately if you desire. Alternatively, you can use the styleClass attribute of the inputField tag to give the date-picker input field a specific class you can select them by.

 

Edit: You can remove the current-day links using:

 

 

$('.dateFormat').empty()

 

 

StevevStevev

Your suggestion worked and I managed to override the calendar. I also added a weekday ony option (which doesn't make sense in the context of birth date of course but just to prove the idea). I also removed the default date. I put the style in a style library and uploaded to the Static Resources.

 

The code looks as follows:

 

 

<apex:page id="thePage" standardController="Contact">
<!-- Load libraries -->
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>  
  <script>
  $(document).ready(function() {
<!--    $("#datepicker").datepicker();  -->
    $('span[class~="dateOnlyInput"] input').removeAttr('onfocus').datepicker({ beforeShowDay: $.datepicker.noWeekends });    
    $('.dateFormat').empty()
  });
  </script>
</head> 
  <apex:form>
  <apex:pageBlock >

  <apex:pageblockSection >
  <apex:inputfield value="{!Contact.Birthdate}" id="datepicker" styleClass="JQueryDate"/>
  <apex:pageBlockSectionItem />
  </apex:pageblockSection>
  </apex:pageBlock>

  
  </apex:form>

</apex:page>

 

 

The one problem I had was the font-size appears to not be picked up by the code. The solution was to add a body tag with the font size:

 

<body style="font-size:62.5%;">

 

 

Another option is to add a theme but I need to explore that further. Hopefully this is useful anecdotal information.

 

Thanks to sfdcfox

 

 

This was selected as the best answer