+ Start a Discussion
Vandana Rattan 4Vandana Rattan 4 

Weird JQuery issue

I am creating VF page to upload and save attachments. Issue I am facing is that when I include jquery-1.9.1.min.js the filename and body are not getting set in controller. When I remove this the attachments are uploaded fine. Has anyone faced such issue? Kindly suggest.

VF Code:
 
<apex:page standardController="Case" extensions="NERController" showHeader="false" standardStylesheets="false" docType="html-5.0" applyBodyTag="false" applyHtmlTag="true">
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
    <apex:includeScript id="script2" value="{!URLFOR($Resource.ChargentCases__CreditCardJS, 'bililiteRange.js')}" loadOnReady="false"/>
    <apex:stylesheet value="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <!--<apex:includeScript value="https://code.jquery.com/jquery-1.9.1.min.js"/>-->
    
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
    <apex:includeScript value="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"/>
    <meta http-equiv="X-Frame-Options" content="deny" />
    
    <style>

    .inactiveTab { background-color: white; color:black; background-image:none}
        
    .header {
    	background-color: lightgray;
        text-align: left;
        color: black;
        font-size: 20px;
        height: 100px;
                /*margin-bottom: 20px;*/
    }
    .activeTab {
    	background-color: #e6dead;
        text-align: left;
        color: black;
        font-size: 15px;
        height: 20px;
        font-family: Open Sans;
        font-weight: bold
        
    }
    .ui-btn-text{
    	text-align: left;
    }
    
        
	.requiredBlock {background-color: transparent; }

	.requiredBlock::before { content: "*"; font-size: 1.5em; font-weight: bold;  color: #c00; }
        
    .inner{
    	display: block;
        position: relative;
       	margin: .5em 0;
        padding: 0;
        background-clip: padding-box;
        border-radius: 1em;
        border: 1px solid #ccc;
        background: #eee;
        font-weight: bold;
        color: #222;
    	text-shadow: 0 1px 0 #fff;
        background-image: linear-gradient( #fff,#f1f1f1 );
        z-index: 1;
    	width: 100%;
        -webkit-user-select: none;
     }
        
    
        .ChooseFileContainer {
        position:relative;
        display:inline;
        }
        
        .OverlayButton {
        position:absolute;
        left:5px;
        right:0;
        } 
    </style>

    
    
    <apex:form id="frm" style="width: 100%; height:100%; background-color: white; display: inline-block; text-align: center;">  
        <apex:outputPanel id="all" layout="block" style="display: inline-block; text-align: left; width:80%;">
            <apex:outputPanel id="header" layout="block" style="background-color: white;">
        
                <!-- This is a Header block. Paste your APEX or HTML code here. -->
        
                <!-- APEX image example: -->
                <!--<apex:image value="{!URLFOR($Resource.ChargentBase__ChargentStyling, 'img/Chargent.png')}" style="display: block; margin: 0 auto; margin-bottom: 20px;"/> <!-- height="100px" width="410px"  -->
                <apex:image url="{!$Resource.NERBanner}" style="display: block; "/>
                </apex:outputPanel>
            <br></br>
 <apex:tabPanel switchType="client" selectedTab="regEligibility" id="tabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">

<apex:tab label="About You" name="abtYou1" id="abtYou" style="background-color: white;" >
                    
							
                            <apex:outputPanel layout="block" styleClass="headersmall">
                            <h1><apex:outputText value="About You" style="font-family:Open Sans; font-weight:bold;"/></h1>
                             <apex:outputLabel value="Photo Identification" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;"/>
                                
                              </apex:outputPanel>
                    			<br></br>
                             <!--<apex:outputPanel layout="block" styleClass="requiredBlock">-->
                             <div class = "ChooseFileContainer">
                                 <apex:outputLabel value="Please upload a copy of a Primary identification document:" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="nerchck8"/>
                                <apex:inputFile value="{!fileBody}" filename="{!fileName}" />
                                     
                                 <!--<input id="CustomChooseFileButton" type="text" size="23" name="CustomChooseFileButton" value="Choose File" class="OverlayButton btn" />-->
                                 
                                </div>
                                <!--<apex:outputLabel value="Photo Identification" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;"/>-->
                    			<!--</apex:outputPanel>-->
							<br></br>
                             <apex:outputPanel layout="block" styleClass="requiredBlock">
                             	<div class = "ChooseFileContainer">
                                 <apex:outputLabel value="Please upload a Passport-style photo:" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="nerchck8"/>
                                <apex:inputFile value="{!fileBody}" filename="{!fileName}" style="padding-left:65px" />
                                     
                                 <!--<input id="CustomChooseFileButton" type="text" size="23" name="CustomChooseFileButton" value="Choose File" class="OverlayButton btn" />-->
                                 
                                </div>
                    			</apex:outputPanel>
                                <!--<input id="CustomChooseFileButton" type="text" size="23" name="CustomChooseFileButton" value="Upload Object Names File" class="OverlayButton btn" />-->
                                <!--<br></br>
                             	<apex:outputPanel layout="block" styleClass="requiredBlock" id="primID">
                                <apex:outputText value="Please upload a copy of Primary identification document:" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
                                <apex:actionRegion >
                             	<apex:inputFile value="{!myfile.body}" filename="{!myfile.Name}" style="padding-left:65px" />
                                    
                             	<apex:commandButton value="Upload" action="{!upload}"/>
                                    </apex:actionRegion>
                                    </apex:outputPanel>
                             
                             	<apex:outputPanel layout="block" styleClass="requiredBlock" id="pptPhoto">
                                <apex:outputText value="Please upload a Passport-style photo:" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
                                <apex:actionRegion >
                             	<apex:inputFile value="{!myfile.body}" filename="{!myfile.Name}" style="padding-left:65px" />
                                
                             	<apex:commandButton value="Upload" action="{!upload}"/>
                                    </apex:actionRegion>
                                    </apex:outputPanel>
                             </div>
                        <!--<apex:selectList id="stateWorkingIn" value="{!case.Australian_state_primarily_working_in__c}" title="Are you a Member of Engineers Australia" size="1" />-->
                        <!--</apex:outputPanel>
						<apex:actionRegion >-->
						<br></br>
						<html>
                        <table style="width:100%">
                            
                       <tr style="width=100%;">
                           <td style="align:left;width:20%;"><apex:commandButton id="contAbtYouBtn" value="Continue" action="{!upload}"/></td>
                           <td><apex:commandLink value="Previous" style="font-family:Open Sans; font-weight:bold;"/></td>
                           
                           <!--<td style="align:right;width:20%;"><apex:commandButton id="subBtn" value="Submit" action="{!upload}"/></td>-->
                            </tr>
                       </table>
				</html>
                   
<!--</apex:actionRegion>-->
                      
				</apex:tab>

        <script type="text/javascript">
	$j = jQuery.noConflict();

	

	$j = (function(){
              // script that triggers the click of the standard
              // choose file button 
              $('#CustomChooseFileButton').click( function(e) {
                                       $('input[type="file"]').click();});
                                       // script to hide the blinking cursor
                                      $('input[type="text"]').mousedown(function(e) { 
                                        e.preventDefault();
                                       $(this).blur();
                                       return false;
                                 });
         });
	</script>
</apex:page>

Controller:
 
public class NERController {
    
    public ApexPages.StandardController standardContactController;
    public String selectedTab;
    public Case objCase;
    public boolean val1 {get;set;}    
    public boolean val2 {get;set;} 
    public boolean val3 {get;set;} 
    public boolean val4 {get;set;} 
    public blob fileBody {get;set;}
        public String fileName {get;set;}
   // Public Attachment myfile{get;set;}
    public List<SelectOption> types{
        get{
             System.debug('In getTypes>>>>>');
            types = new List<SelectOption>();
             Schema.sObjectType sobject_type = objCase.getSObjectType();
            Schema.DescribeSObjectResult sobject_describe = sobject_type.getDescribe();
             Map<String, Schema.SObjectField> field_map = sobject_describe.fields.getMap();
            List<Schema.PicklistEntry> pick_list_values = field_map.get('Evidence_of_Engineering_qualification__c').getDescribe().getPickListValues();
            
            //List<selectOption> options = new List<selectOption>();
    
               for (Schema.PicklistEntry a : pick_list_values) {
                          types.add(new selectOption(a.getLabel(), a.getValue()));
              }
            System.debug('types>>>>>' + types);
          return types;
        }
        set;}
    
    /*public String getFileName()
    {
    	return this.fileName;
    }
    
    public void setFileName(String fileName)
    {
    this.fileName = fileName;
    }
    
    public Blob getFileBody()
    {
    return this.fileBody;
    }
    
    public void setFileBody(Blob fileBdy)
    {
    this.fileBody = fileBdy;
    //setFileSize(this.attach.size());
    }
    
    /*Public Attachment myfile{
        get {
          if (myfile == null)
            myfile = new Attachment();
          return myfile;
        }
        set{
            System.debug('in set fillllllllllleeeeee'+ myfile);
        }
  }*/
    /*Public Attachment getmyfile()
    {
        myfile = new Attachment();
        return myfile;
    }*/
    
    public NERController.NERController(ApexPages.StandardController controller){
        standardContactController = controller;
        this.objCase =(Case) controller.getRecord();
        //myfile = new Attachment();
        selectedTab = 'regEligibility';
        //System.debug('myfile >>>>' + myfile);
    }
    
    public string getselectedtab() {
     return selectedtab;
  	}
    
    public boolean getistab1disabled() {
    	return selectedTab <> 'regEligibility';
  	}

  	public boolean getistab2disabled() {
    	return selectedTab <> 'nerAreas';
  	}
    
    public boolean getistab3disabled() {
    	return selectedTab <> 'abtYou';
  	}
    
     public boolean getistab4disabled() {
    	return selectedTab <> 'qual';
  	}

  	public void enabletab1() {
    	selectedtab = 'regEligibility';
  	}

  	public void enabletab2() {
    	selectedtab = 'nerAreas';
  	}
    
    public void enabletab3() {
    	selectedtab = 'abtYou';
  	}
    
    public void enabletab4() {
    	selectedtab = 'qual';
  	}
    
    public void find(){
       System.debug('in find>>>>'); 
        System.debug('in find>>>> val1' + val1); 
    }
    
    public ApexPages.Pagereference upload()
    {
        
         Id caseId = createCase();
        System.debug('caseId>>' + caseId);
        System.debug('fileBody>>' + this.fileBody);
        System.debug('fileName>>' + this.fileName);
		//myfile.parentId = caseId;
        Attachment a = new Attachment();
        a.body = this.fileBody;
        a.name = this.fileName;
        a.parentId = caseId;
         //myfile.ParentId = caseId;
        //myfile.Body = attach;
        //myfile.Name = fileName;
         /* insert the attachment */
        Database.SaveResult result = Database.insert (a);
        return null;
    }   
    
    public Id createCase(){
        System.debug('In craete Case' );
        
        Id ftRecTypeId = [SELECT Id from recordType where name='National Engineering Register' and sObjectType='Case' LIMIT 1].id;
        //List<Contact> lstct = [Select Id from Contact where EA_Member_No__c=: msaCase.Applicatnt_s_EA_ID__c LIMIT 1];
        //System.debug('lstct>>' + lstct[0].Id);
        //Id ctId = [Select Id from Contact where EA_Member_No__c=: msaCase.Applicatnt_s_EA_ID__c LIMIT 1].Id;
        //Id gatewayId = [Select Id frokm ChargentBase__Gateway__c where Name='eWay Gateway' LIMIT 1].Id;
         Case insCase = new Case();
       
             insCase.RecordTypeId = ftRecTypeId;
            insCase.Status = 'New';
            insCase.Origin = 'Web';
            
           
            insert insCase;
       
        return insCase.Id;
    }
    
   /* public List<SelectOption> getTypes(){
        System.debug('In getTypes>>>>>');
    	 Schema.sObjectType sobject_type = case.getSObjectType();
        Schema.DescribeSObjectResult sobject_describe = sobject_type.getDescribe();
         Map<String, Schema.SObjectField> field_map = sobject_describe.fields.getMap();
        List<Schema.PicklistEntry> pick_list_values = field_map.get('Evidence_of_Engineering_qualification__c').getDescribe().getPickListValues();
        
        //List<selectOption> options = new List<selectOption>();

           for (Schema.PicklistEntry a : pick_list_values) {
                      types.add(new selectOption(a.getLabel(), a.getValue()));
          }
        System.debug('types>>>>>' + types);
      return types;
        
    }*/
    
    

}


Thanks,
Vandana
 
Best Answer chosen by Vandana Rattan 4
Vandana Rattan 4Vandana Rattan 4
For anyone who faces similar issue:

I used html controls to resolve this issue instead of apex.
 
<div class="uploadBox9">
                                        <table cellpadding="0" cellspacing="0" class="uploadTable9">
                                            <tr>
                                                <td><input type="file" multiple="false" id="filesInput9" name="file" /></td>
                                                <td class="buttonTD9">
                                                    <input id="uploadButton9" type="button" title="Upload" class="btn" value=" Upload " onClick="prepareFileUploads(this);"/>
                                                    <input id="clear9" type="button" title="Clear" class="btn" value=" Clear " onClick="clearFiles(this);"/>
                                                </td>
                                            </tr>
                                        </table>
                     	<apex:outputText id="errStatDec" value="Error: Please select a file to upload" style="color:red;display:none;font-family:Open Sans;"/>
                                    </div>

 

All Answers

James LoghryJames Loghry
Looking at your Visualforce page, you're setting jQuery no conflict as $j, but then referencing the selectors and methods with $ instead.  This is likely throwing a javascript error.  The javascript error should show up in the developer console of your browser if you have it open.

Try fixing the $ selectors to $j and see if that fixes your issue.  You can also add debugger; statements in your javascript to set breakpoints, which will help with debugging your jquery statements too.
Vandana Rattan 4Vandana Rattan 4
Hi James,

Thank you for your reply. I replaced all the instances of $ with $j. But that didn't solve the issue either. In console I only get GET https://login.salesforce.com/17181/logo180.png 404 (Not Found). I tried putting in the console.log statements in javascript too but none comes in console. Any idea what could be the issue?

Regards,
Vandana
Vandana Rattan 4Vandana Rattan 4
For anyone who faces similar issue:

I used html controls to resolve this issue instead of apex.
 
<div class="uploadBox9">
                                        <table cellpadding="0" cellspacing="0" class="uploadTable9">
                                            <tr>
                                                <td><input type="file" multiple="false" id="filesInput9" name="file" /></td>
                                                <td class="buttonTD9">
                                                    <input id="uploadButton9" type="button" title="Upload" class="btn" value=" Upload " onClick="prepareFileUploads(this);"/>
                                                    <input id="clear9" type="button" title="Clear" class="btn" value=" Clear " onClick="clearFiles(this);"/>
                                                </td>
                                            </tr>
                                        </table>
                     	<apex:outputText id="errStatDec" value="Error: Please select a file to upload" style="color:red;display:none;font-family:Open Sans;"/>
                                    </div>

 
This was selected as the best answer