• jpdel
  • NEWBIE
  • 0 Points
  • Member since 2010

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 2
    Questions
  • 1
    Replies

Hi, i'm having a problem getting jquery validation to workwithin an
ouputpanel that is rendered once a radio button is selected. Here is the
code:


<apex:page Controller="JP_SwitchController" showHeader="false">

    <apex:includeScript
        value="{!URLFOR($Resource.jquery, 'js/jquery-1.4.2.min.js')}" />
    <apex:includescript
        value="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" />
        
    <apex:define name="body">

        <apex:form id="commentForm3">

            <!-- JAVA SCRIPT BLOCK -->
            <script type="text/javascript">
    var j$ = jQuery.noConflict();
    j$(document).ready(function() {
                     
    /* Note: The jq() function is explained @ http://wp.me/pxPpB-8B */
    j$(jq(f)).validate();
            
    j$(jq(name)).rules("add",{
        required: true,
        minlength: 2
    });

    j$(jq(email)).rules("add",{
        required: true,
        email: true
    });
                                  
    j$(jq(phone)).rules("add",{
        required: true,
        phoneContact: true
    });
 
                        
    jQuery.validator.addMethod("phoneContact", function(pnumber) {
        var stripped = pnumber.replace(/[\(\)\.\-\ ]/g, '');
        if (isNaN(parseInt(stripped)) || !(stripped.length > 6)) {
            return false;
        }else{
            return true;
        }
    }, "Please specify a valid phone number");
    
    });
    
    
</script>
                
<script type="text/javascript">
    function jq(myid) { /* This function handles the colon in VisualForce Ids */
        return '#' + myid.replace(/(:|\.)/g,'\\\\$1');
    }
            
    var f = "{!$Component.commentForm3}";
</script>
<!-- JAVA SCRIPT BLOCK -->


            <apex:pageBlock>

                <apex:outputPanel>
                    <b>Switch type</b>
                </apex:outputPanel>
                <br />
                <apex:selectRadio layout="pageDirection" value="{!SwitchTypeResult}">
                    <apex:selectOptions value="{!SwitchTypes}" />
                    <apex:actionSupport event="onclick" action="{!selectSwitchType}"
                        rerender="Switch1, Switch2" />
                </apex:selectRadio>

                <script type="text/javascript"> <!-- This is a hack that helps JS chat to VF in a robust way -->
                    var j$ = jQuery.noConflict();
                    var name = "{!$Component.nameTemp}";
                </script>
                <apex:inputtext id="nameTemp" value="{!nameTemp}" />
                <br />
                
                <apex:outputPanel id="Switch1">

                    <apex:pageblock rendered="{!renderSwitch1}">

                <script type="text/javascript"> <!-- This is a hack that helps JS chat to VF in a robust way -->
                    var j$ = jQuery.noConflict();
                    var email = "{!$Component.email}";
                    var phone = "{!$Component.phoneNo}";
                </script>

                <apex:inputtext id="email" value="{!email}" />
                <br />
                <apex:inputtext id="phoneNo" value="{!phoneNumber}" />
                <br />
                        <apex:outputtext value="some switch 1 text here" />

                    </apex:pageblock >
                </apex:outputPanel>
                
                <apex:outputPanel id="Switch2">

                    <apex:pageblock rendered="{!renderSwitch2}">

                        <apex:outputtext value="some switch 2 text here" />

                    </apex:pageblock >
                </apex:outputPanel>                
                
            </apex:pageBlock>

        </apex:form>

    </apex:define>
</apex:page>

 

 

So with this code the validation works on nameTemp, but when i Hit the radiobutton with option Switch 1, the pageblock renders ok, but the jquery validaiton for email and phoneNo componets doesn't work.

Does anyone know how to get jquery validation working in this situation. I've tried debugging in firebug, but I'm not too sure whats happening, when I click on the fields within outputpanel switch1 , the validator code doesn't do anything. But I can see it hitting the breakpoints in the validator code for the nameTemp field outside the switch panels. Also when I move the email and phoneNumber fields outside the switch outputpanel, beside the nameTemp field then they work ok, so there is no problem with the fields or their validation rules.

Any help with this would be much appreciated as I'm out of ideas.

 

here is the controller code for the above example, in case anyone is interested in trying this out:

 

public class JP_SwitchController {

    public String phoneNumber { get; set; }

    public String renderSwitch1 ='false';
public String renderSwitch2 ='false';
        String SwitchTypeResult{get; set;}
    public String email { get; set; }

    public String nameTemp { get; set; }

    public String getrenderSwitch1 () {
        return renderSwitch1 ;
    }
    
        public String getrenderSwitch2() {
        return renderSwitch2;
    }
    public PageReference selectSwitchType() {
                renderSwitch1 = 'false';
                renderSwitch2 = 'false';
        if (getSwitchTypeResult() == 'Switch 1'){
            renderSwitch1 = 'true';
        }
        else
                renderSwitch2= 'true';
        return null;
      }

    public List<SelectOption> getSwitchTypes() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('Switch 1','Switch 1'));
        options.add(new SelectOption('Switch 2','Switch 2'));
        return options;
    }
   
    
    public String getSwitchTypeResult() {
        return SwitchTypeResult;
    }
    
    public void setSwitchTypeResult(String result) {
        this.SwitchTypeResult= result;
    }
}

  • November 08, 2010
  • Like
  • 0

Hi, I am pretty new to force.com. I am wondering how I could take an rss feed from an external site and display it using visual force. Is there any built in functionality for this. Or would I have to write an xml parser to populate salesforce objects, and then display using visualforce?

Regards,

jp

  • October 20, 2010
  • Like
  • 0

Hi, I am pretty new to force.com. I am wondering how I could take an rss feed from an external site and display it using visual force. Is there any built in functionality for this. Or would I have to write an xml parser to populate salesforce objects, and then display using visualforce?

Regards,

jp

  • October 20, 2010
  • Like
  • 0