3

When I try to pass Java Script value into Apex:input filed no value is passed. But it works in regular html input field. Please help! . Below is my code. Which as both Apex:input & just input.

<apex:stylesheet value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery-1.9.1.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'jquery.mobile-1.3.0.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'cordova.force.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'backbone/underscore-1.4.4.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'force.entity.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.MobileSample_Resources_jQueryMobile, 'SObjectData.js')}"/>
<apex:form > 
    <head>
    <title>Cases</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <c:RemoteTK />

    <script type="text/javascript">
        var $j = jQuery.noConflict(); 
        var client = new remotetk.Client();
        Force.init(null,null,client,null);

        var Case = new SObjectData();
        Case.errorHandler = displayError;

        $j(document).ready(function() {
            regBtnClickHandlers();
            getAllCase();
        });

        function getAllCase() {
            Case.fetch('soql','SELECT Id, AccountId, caseNumber, OwnerId, Reason, Status, Subject  from case LIMIT 100',function() {
                showCase(Case.data());
            });
        }

         function showCase(records) {    
            $j('#cList').empty();
            $j.each(Case.data(),


                function() {
                var newLi = $j('<li></li>');

                var newLink = $j('<a id="' +this.Id+ '" data-transition="flip">' +this.CaseNumber+ ' '+this.Subject+ '</a>');
                newLink.click(function(e) {
                    e.preventDefault();
                    $j.mobile.showPageLoadingMsg(); 
                    $j('#subject').val(Case.findRecordById([this.id]).Subject);
                    $j('#cName').val(Case.findRecordById([this.id]).OwnerId);
                    $j('#status').val(Case.findRecordById([this.id]).Status);                        
                    $j('#reason').val(Case.findRecordById([this.id]).Reason);
                    $j('#cNumber').val(Case.findRecordById([this.id]).CaseNumber);
                    $j('#CASEId').val(Case.findRecordById([this.id]).Id);
                     var jstat = "Closed"; 
                    $j('#error').html('');

                    $j.mobile.changePage('#detailpage', {changeHash: true});
                });
                newLi.append(newLink);            
                newLi.appendTo('#cList');
              //  x++;
              });

            $j.mobile.hidePageLoadingMsg();
            $j('#cList').listview('refresh');
        }      

         function addUpdateContact(e){
            e.preventDefault();
            var cId = $j('#CASEId').val();
            var record = Case.findRecordById(cId);
            if(record == null) { //new record
                record = Case.create();
            } 
            record.OwnerId = $j('#cName').val();
            record.Reason = $j('#reason').val();
            record.Status = $j('#status').val();
            record.Subject  = $j('#subject').val();


            Case.sync(record,successCallback);
        }

       function deleteContact(e){
            e.preventDefault();
            Case.remove(Case.findIndexById($j('#CASEId').val()),successCallback);
        }

        function successCallback(r){
            getAllCase();
            $j.mobile.changePage('#listpage', {changeHash: true});
        }

        function displayError(e){
            console.log(e);
            $j('#error').html(e[0].message);
        }

       function regBtnClickHandlers() {
            $j('#add').click(function(e) {
                e.preventDefault();
                $j.mobile.showPageLoadingMsg();
                $j('#cName').val('');
                $j('#reason').val('');
                $j('#status').val(''); 
                $j('#subject').val(''); 
                $j('#error').html('');                    
                $j.mobile.changePage('#detailpage', {changeHash: true});
                $j.mobile.hidePageLoadingMsg();            
            });

            $j('#save').click(function(e) {
               addUpdateContact(e);
            });

            $j('#delete').click(function(e) {
               deleteContact(e);
            });
        }
    </script>    
</head>

<body>    
    <div data-role="page" data-theme="b" id="listpage">                
        <div data-role="header" data-position="fixed">
            <h2>Case</h2>
            <a href='#' id="add" class='ui-btn-right' data-icon='add' data-theme="b">Add</a>
        </div>
        <div data-role="content" id="contactList">            
            <ul id="cList" data-filter="true" data-inset="true" data-role="listview" 
                data-theme="c" data-dividertheme="b">
            </ul>
        </div>
    </div>

    <div data-role="page" data-theme="b" id="detailpage">
        <div data-role="header" data-position="fixed">
            <a href='#listpage' id="back2ContactList" class='ui-btn-left' data-icon='arrow-l' data-direction="reverse" data-transition="flip">Back</a>
            <h1>Contact Details</h1>
        </div>
        <div data-role="content">  

        <apex:pageBlock title="My Case Details" mode="edit">                              
            <apex:pageBlockSection columns="1">
                <apex:inputField id="id" value="{!Case.Id}" />
                <apex:inputField id="Status" value="{!Case.Status}"   label="Test Status" />
                <apex:inputField id="subject" value="{!Case.Subject}"  />
                <apex:inputField id="reason" value="{!Case.Reason}"  />   
           <div data-role="fieldcontain">
                <label for="subject">Subject:</label>
                <input name="subject" id="subject"/>
            </div>

           <div data-role="fieldcontain">
                <label for="status">Status:</label>
               <input name="status" id="status" value="{!Case.Status}"/>
            </div>

            </apex:pageBlockSection>
</apex:pageBlock>



            <h2 style="color:red" id="error"></h2><br/>
            <input type="hidden" id="cNumber" />
            <input type="hidden" id="cName" />
            <button id="save" data-role="button" data-icon="check" data-inline="true" data-theme="b" class="save">Save</button>
            <button id="delete" data-role="button" data-icon="delete" data-inline="true" class="destroy">Delete</button>
        </div>    
    </div>  
</body>   
</apex:form>

Improve this question
1
  • Inspect the element on the page. You will notice that the Salesforce components prepend extra stuff on the Id fields. You can grab the correct values by class or do the work serverside.
    – dphil
    Commented Aug 14, 2014 at 18:52

2 Answers 2

Reset to default
3

When you are referencing visualforce fields in your page it's recommended you either use !$Component.FieldId or alternatively you can assign an ID to each of the parent elements and that way you can avoid the random salesforce ID prefixes. So let's say you have something like this:

<apex:page>
    <apex:form>
        <apex:pageBlock>
            <apex:inputField id="test" />
        </apex:pageBlock>
    </apex:form>
</apex:page>

In this case your ID for the input field will be something like j_id0:j_id1:j_id2:test. However if you assign ID's to all of the elements:

<apex:page id="page">
    <apex:form id="form">
        <apex:pageBlock id="pageBlock">
            <apex:inputField id="test" />
        </apex:pageBlock>
    </apex:form>
</apex:page>

your input field element ID becomes page:form:pageBlock:test.

So now you can either reference it by #page:form:pageBlock:test or {!$Component.test}

Improve this answer
2
  • Its not working. Even though I use input field I pass the value to this input field from JavaScript & user can change this input for example status for a case. JavaScript reference(passingvalue) $j('{!$Component.form.pageblock.blocksec.status}').val(Case.findRecordById([this.id]).Status) Apex input field which get value from JavaScript coded <apex:form id ="form" > <apex:pageBlock title="My Case Details" mode="edit" id="pageblock" > <apex:pageBlockSection columns="1" id="blocksec"> <apex:inputfield id="status" value="{!Case.Status}" />
    – user11013
    Commented Aug 18, 2014 at 14:25
  • Please let me know what I am doing wrong
    – user11013
    Commented Aug 18, 2014 at 14:29
2

For various reason visual force is adding its own ID's to the ID you specified for the fields. One of the reasons is that not all of the elements in your dom have ID's so to ensure uniqueness VF prepends its own mdxxx structure to the id.

Simply modify your selectors to use $j('[id$={YOURID}]').val(xxx);

Which says, select the element that has an ID ending with {YOURID}

You should probably make it more specific by including the parent element in the selector as well since this selector with out the parent will match both an id="myid" and id="id" so keep that in mind when using this approach

Improve this answer
5
  • Hello Eric, I am not sure whether I follow you correctly. I getting the data for Jquery & populating in the list. Once the user click the list a change page appears which contain the data I got from the Java Script. When I Pass the value to html input field it works but when I pass the same value to apex input field it does not work. for example Status filed. This statement works: <input name="status" id="status" />
    – user11013
    Commented Aug 14, 2014 at 19:22
  • Hello Eric, I am not sure whether I follow you correctly. I getting the data for Jquery & populating in the list. Once the user click the list a change page appears which contain the data I got from the Java Script. When I Pass the value to html input field it works but when I pass the same value to apex input field it does not work. for example Status filed. This statement works: <input name="status" id="status" /> but below statement does not work <apex:inputField id="Status" value="{!Case.Status}" /> . Can you please provide sample code for this issue.
    – user11013
    Commented Aug 14, 2014 at 19:29
  • Read my explanation. Visualforce adds characters to you <apex:input field with the id="Status"> so your ID is no longer Status but something like jd0:Status. As for the sample code, I already provided what you need to do.
    – Eric
    Commented Aug 14, 2014 at 19:31
  • Thanks Eric it works. But the fields which have dropdown like status does not change when I click different cases. If I click the first case where the status is OPEN it stays the same for other cases. But the text field works fine. any thoughts on this. $j('[id$=status]').val(Case.findRecordById([this.id]).Status)
    – user11013
    Commented Aug 14, 2014 at 20:46
  • Select Lists are not simple test fields and require different selectors. Read up on jQuery Selectors. Oh and best practice is in the answer by Bachovski
    – Eric
    Commented Aug 15, 2014 at 2:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .