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>
Best Answer
When you are referencing visualforce fields in your page it's recommended you either use
!$Component.FieldIdor 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: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:your input field element ID becomes
page:form:pageBlock:test.So now you can either reference it by
#page:form:pageBlock:testor{!$Component.test}