[SalesForce] Find all elements ID starting with or Ending with using JQuery in Visualforce

I am trying to search all input elements that starts with a partcular set of characters such as 'idAcc' where my VF page has two inputfields with id = idAccFN and id= idAccLN respectively.

 <apex:inputField id="idAccFN" value="{!cr.FirstName__c}" />
 <apex:inputField id="idAccLN" value="{!cr.LastName__c}" />

I'm using the below JQuery syntax but thats working partially … Explained in comments below .. Kindly help.

 var j$ = jQuery.noConflict();
 j$(document).ready(function(){
    jQuery( 'input[id$=Name]' ).val('Foo');  // ID ending with Name working 
    jQuery( 'input[id^=idAcc]' ).val('Apu')  //Id starting with idAcc not working 
});

Best Answer

the Id you set gets prepended by VF, so you need to do a "contains" selector. And if you want each element on the page, you need to use a ".each", like this:

j$(document).ready(function(){
jQuery( 'input[id*=Name]' ).each(function(el){
  el.val('Foo'); // do something with the input here.
});

Related Solutions

[SalesForce] Visualforce rendered with jQuery

You can try to pack your jQuery code to the function and execute this function only if the panel is rendered:

<script>
function doStuff(){
    j$("[class$=costType]").find('input').bind("change", function(event, ui) {
        if(j$(this).val()=='Value'){
            j$("[class$=typeA]").closest('tr').css('display','none');
            j$("[class$=typeB]").closest('tr').css('display','');
        }
        else{
            j$("[class$=typeA]").closest('tr').css('display','');
            j$("[class$=typeB]").closest('tr').css('display','none');
        }
    });
}
</script>

<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!state}"/>
    ....
    <!-- put this definition to the end on the panel -->
    <script>
        doStuff();
    </script>
</apex:outputPanel>

[SalesForce] Using jQuery with apex:tabPanel in visualforce

The error happens here because of the conflict between jQuery and PrototypeScript libraries. To fix it just use jQuery's noConflict() function:

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

Load the jQuery library first (at the top of the page)
Use apex:includeScript instead of script tag
Then use noConflict() function
Read this great topic Using jQuery in a Visualforce Page from the developer force site

Yout page must look like this then:

<apex:page>
<apex:includeScript value="{!URLFOR($Resource.Scripts,'script/jquery-1.8.1.min.js')}" />

<script>
    jQuery.noConflict();

    // all other javascript stuff...
</script>

<apex:tabPanel switchType="client" tabClass="activeTab" inactiveTabClass="inactiveTab">
  <apex:tab label="Tab#1" id="tab1"></apex:tab>
  <apex:tab label="Tab#2" id="tab2"></apex:tab>
</apex:tabPanel>

Best Answer

Related Solutions

[SalesForce] Visualforce rendered with jQuery

[SalesForce] Using jQuery with apex:tabPanel in visualforce

Related Topic