jquery show not working with visualforce page

Question

Sorry for inconvenience. I tried to format the code but why i dont know here i am not able to post properly.

i have two pageblocks in visualforce page. 1st displays by default, 2nd pageblock should display only when i select "new employye" from dropdown menu. For this i experimented on some code, (this is working) but my original code is not working which is similar to experimented code... please help. Actually i need to work with if condition.

1st code (experimened and working)

<apex:page >
    <apex:form >

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            j$ = jQuery.noConflict();
        if(j$)
        {
            alert('jQuery Loded'); 
        }
        if(10==100)
        {

            j$(document).ready(function() {
                j$('div#example').show();
            });
        }

        </script>



        <div  id="example" style="display:none;">
            <apex:pageblock >If you click on the "Hide" button, I will disappear.</apex:pageblock></div>

        <button id="hide">Hide</button>
        <button id="show">Show</button>


    </apex:form>
</apex:page>

Original code With apex class and visualforce page:

        <script>
            $j = jQuery.noConflict();

        var a;
        function mydata()
        {
            a=document.getElementById('p1:f1:pb:my1').value;
            document.getElementById('p1:f1:pb:my2').value=a;

            if(a=='New Employee')
            {
                j$(document).ready(function() {
                    j$('div#hidden').show();
                });

            } }


        </script>
        <p>
            click here to see pageblock
        </p>
        <apex:pageblock title="Basic lead info" id="pb">
            <apex:outputlabel value="company name" />
            <apex:inputtext value="{!companyname}" /><br/>
            <apex:outputlabel value="lead last name" />
            <apex:inputtext value="{!lastname}" /><br/>
            <apex:outputlabel value="phone number" />
            <apex:inputtext value="{!phone}" /><br/>
            <apex:outputlabel value="Email" />
            <apex:inputtext value="{!email}" /><br/>
            <apex:outputlabel value="Source" />
            <apex:inputtext value="{!source}" /><br/>
            <apex:outputlabel value="Referer" />

            <apex:inputfield value="{!le.Reffered__c}" id="my1" onchange="mydata()" /><br/>
            <apex:inputhidden id="my2" value="{!referer}" />

        </apex:pageblock>
        <div id="hidden" style="display:none;">


            <apex:pageblock title="address info" id="pbid" >

                <apex:outputlabel value="street" />
                <apex:inputtext value="{!street1}" /><br/>
                <apex:outputlabel value="city" />
                <apex:inputtext value="{!city1}" /><br/>
                <apex:outputlabel value="state" />
                <apex:inputtext value="{!state1}" /><br/>
                <apex:outputlabel value="zip" />
                <apex:inputtext value="{!zip1}" /><br/>
                <apex:outputlabel value="country" />
                <apex:inputtext value="{!country1}" /><br/>


            </apex:pageblock></div>

        <apex:commandButton value="submit" action="{!myleaddata1}" />
    </apex:form>

</apex:page>





public class myleaddata {
    public string lastname{set;get;}
    public string companyname{set;get;}
    public string leadname{set;get;}
    public string phone{set;get;}
    public string email{set;get;}
    public string  source {set;get;}
    public string referer{set;get;}
    public string street1{set;get;}
    public string city1{set;get;}
    public string state1{set;get;}
    public string zip1{set;get;}
    public string country1{set;get;}


    public lead le{set;get;}


    public void myleaddata1()
    {
        if(referer == 'existing employee')
        {
            Opportunity opp=new Opportunity();
            opp.Name=lastname;
            opp.StageName='qualification';
            opp.LeadSource=source;
            opp.CloseDate=date.parse('8/10/2015');
            insert opp;

        }

        else
        {
            lead l1=new lead();
            l1.lastname=lastname;
            l1.Company=companyname;
            l1.Phone=phone;
            l1.email=Email;
            l1.LeadSource=source;
            l1.Reffered__c=referer;

            // address info part
            l1.PostalCode=zip1;
            l1.Street  =street1; 
            l1.City=city1;
            l1.state=state1;
            l1.PostalCode=zip1;
            l1.Country=country1;

            insert l1;
        }
    }
}

Answer 1

I am not an expert in JavaScript/jQuery so did not look at your code. But an alternate approach to selectively display/re-render components in VF page is by using native visualforce ajax based tags.

Here is an example: http://sfdcsrini.blogspot.com/2014/08/simple-ajax-example-using-visualforce.html

Answer 2

There may be other problems with your code, but one thing that you definitely don't need is your use of the onReady function.

You normally use an onReady function to set things up after the page loads. In your case you don't need to do this as you have hard-coded your onchange function to the select list.

Change your function to this:

function mydata(){
    var a=document.getElementById('p1:f1:pb:my1').value;
    document.getElementById('p1:f1:pb:my2').value=a;

    if(a=='New Employee'){
        j$('div#hidden').show();
    }
}

Also, check using your browser's javascript console that your getElementById function is returning what you think it is.