+ Start a Discussion
Alo SenAlo Sen 

calling a jQuery function in visual force


<apex:pageBlockSectionItem rendered="{!recurrenceTrue}">
<apex:outputLabel >End Date</apex:outputLabel> <apex:inputfield value="{!newEvent.Date__c}" required="true" id="alo" onchange="checkValue2()" />
</apex:pageBlockSectionItem>

input4 is a checkbox and input5 is a date field

<script>

function checkValue2(){ if(jQuery('[id$=alo]').val() != null && jQuery('[id$=alo]').val() != '')
{
jQuery('[id$=input4]').hide();
jQuery('[id$=input5]').hide();
}

</script>

When a new date is chosen in the newEvent.Date__c field it should hide the checkbox(input4) and another datefield(input5).These elements are under separate PageBlockSectionItem.

The funny part is last evening everything was working and this morning this function is not working and I have not changed anything. Is there a way to see in the log if this function got called and executed? Is there a difference in save and quicksave?
I have other jQuery functions in this vf page as well. I have one question regarding this - should i have this under separate script tag?
 
Best Answer chosen by Alo Sen
John PipkinJohn Pipkin
Alo, 

You are missing a } at the end. 
Your function:
function checkValue2(){ if(jQuery('[id$=alo]').val() != null && jQuery('[id$=alo]').val() != '')
{
jQuery('[id$=input4]').hide();
jQuery('[id$=input5]').hide();
}

Should be changed to:

function checkValue2(){ if(jQuery('[id$=alo]').val() != null && jQuery('[id$=alo]').val() != '')
{
jQuery('[id$=input4]').hide();
jQuery('[id$=input5]').hide();
}
}

Hope that helps. If you are using Chrome, you can also debug and use breakpoints with javascript console.

All Answers

John PipkinJohn Pipkin
Alo, 

You are missing a } at the end. 
Your function:
function checkValue2(){ if(jQuery('[id$=alo]').val() != null && jQuery('[id$=alo]').val() != '')
{
jQuery('[id$=input4]').hide();
jQuery('[id$=input5]').hide();
}

Should be changed to:

function checkValue2(){ if(jQuery('[id$=alo]').val() != null && jQuery('[id$=alo]').val() != '')
{
jQuery('[id$=input4]').hide();
jQuery('[id$=input5]').hide();
}
}

Hope that helps. If you are using Chrome, you can also debug and use breakpoints with javascript console.
This was selected as the best answer
Alo SenAlo Sen
Oh you are so right. Thank you so much.
Alo SenAlo Sen
I have a followup question regarding date format. When input5.hide is called it hides the field but leaves the formatting for the date link. I can use this code below to take care of the side effect of the hide function but that also means that this formatting affects all the date field. 
<style>
      .dateFormat { display: none; }
 </style>
So the question was if this can be achieved inside the jQuery function just for one particular field? 
John PipkinJohn Pipkin
I personally have a somewhat limited knowledge of jquery so I do not know. Sorry.