how to use external javascript function in visualforce

Question

javscript file :

uploaded in static resource:

<script>    
function clearValue(){
 document.getElementById('{!$Component.page1:form1:autocomplete1}').value='';
 document.getElementById('{!$Component.page1:form1:autocomplete2}').value='';
 document.getElementById('{!$Component.page1:form1:autocomplete3}').value='';
 document.getElementById('{!$Component.page1:form1:autocomplete4}').value='';
 document.getElementById('{!$Component.page1:form1:autocomplete5}').value='';
 document.getElementById('{!$Component.page1:form1:autocomplete6}').value='';
 document.getElementById('{!$Component.page1:form1:autocomplete7}').value='';
 document.getElementById('{!$Component.page1:form1:autocomplete8}').value='';
 document.getElementById('{!$Component.page1:form1:autocomplete9}').value='';
 document.getElementById('{!$Component.page1:form1:autocomplete10}').value='';
 document.getElementById('{!$Component.page1:form1:auto1}').value='';
 document.getElementById('{!$Component.page1:form1:auto2}').value='';
 document.getElementById('{!$Component.page1:form1:auto3}').value='';
 document.getElementById('{!$Component.page1:form1:auto4}').value='';
 document.getElementById('{!$Component.page1:form1:auto5}').value='';
 document.getElementById('{!$Component.page1:form1:auto6}').value='';
 document.getElementById('{!$Component.page1:form1:auto7}').value='';
 document.getElementById('{!$Component.page1:form1:auto8}').value='';
 document.getElementById('{!$Component.page1:form1:auto9}').value='';
 document.getElementById('{!$Component.page1:form1:teja1}').value='';
 document.getElementById('{!$Component.page1:form1:teja2}').value='';
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator1}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator2}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator3}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator4}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator5}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator6}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator7}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator8}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator9}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator10}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator11}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator12}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator13}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator14}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator15}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator16}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator17}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator18}') ,'Like');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator19}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator20}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator21}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator22}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:operator23}') ,'Equal');
setOptionSelected(document.getElementById('{!$Component.page1:form1:inputtext18}') ,'None');
setOptionSelected(document.getElementById('{!$Component.page1:form1:inputtext19}') ,'None');
setOptionSelected(document.getElementById('{!$Component.page1:form1:inputtext24}') ,'None');
}        
function setOptionSelected(mySelObj, myValue){
  for(var i=0,sL=mySelObj.length;i<sL;i++){
    if(mySelObj.options[i].text == myValue){
      mySelObj.selectedIndex = i;
      break;
    }
  }
}
</script>

visualforcepage :

<a href="#" onClick="clearValue()"><apex:commandButton value="New Search" styleClass="input"/></a>
<apex:includeScript value="{!$Resource.Javasscript_for_customreport}"/>

The problem my visualforce page has many javascript/jquery .It taking 15 to 20 sec for loading a page .I want to reduce this time to certain at-least 10 sec .So i am transferring my java script code to external file to do.

Any suggestions /ideas regarding this

Thanks in advance.

Answer 1

First thing is when you upload a javascript function which bind a expression using visualforce way. It would not work. Visualforce only renders expressions when they are on page.

document.getElementById('{!$Component.page1:form1:autocomplete1}').value=''; on page will work but in static resource as a part of javascript file won't work. You will find it as it is written.

Using jquery referencing a visualforce element is easy bit not in javascript. For this you have to use classes to reference the element.

Sample Example:

You have a select option (using class name to reference)

<apex:selectList id="firstuser_right" styleclass="autocomplete1" value="{!SelectedAvailableFields}" multiselect="true" size="5">
   ....
</apex:selectList>

You can get/set the value of the element as:

document.getElementsByClassName('autocomplete1')[0].value='';

This would work on visualforce page as well as in static resource javascript file. Use jquery to make changes in bulk. This would save time of execution.

In jquery you can clear all values like this:

$(".myClass").val('');