Apex Code Development You need to sign in to do that
Don't have an account?
Javascript Help + Help with changing Id's
Hi There,
I have a page which employs javascript remoting and other javascript functions. I am new to javascript and im still learning.
My biggest issue so far was the taking of values and inserting of values using javascript and field id's.
For me it seemed like nothing I tried or came across would allow me to properly reference any fields and fill them with values, until I came across this type of javascript reference ---- $j("[id$='modal_Bonus_Overtime_Commission']").val() ---------
This allowed me to reference a field and fill in its value using javascript, success!! Then I realised that I was not able to set checkbox fields in this manner.
I tried all manner of combinations, nothing allowed me to and then finally I inspected the element and found the long ID
Something along the lines of:
document.getElementById("j_id0:Block:j_id9:myform:ThePanel:j_id38:myModal:j_id67:FormBlock:j_id70:j_id177:j_id178:j_id187:j_id188:modal_Company_Car_Provided").checked = true;
Wallah I was back in business, but it seems that this type of Id will change itself occasionally and thus rende rmy entire page unusable.
Is there a better tag i can use when taking data froma nd inserting data into visualforce or html checkbox fields.
This is my page code:
I have a page which employs javascript remoting and other javascript functions. I am new to javascript and im still learning.
My biggest issue so far was the taking of values and inserting of values using javascript and field id's.
For me it seemed like nothing I tried or came across would allow me to properly reference any fields and fill them with values, until I came across this type of javascript reference ---- $j("[id$='modal_Bonus_Overtime_Commission']").val() ---------
This allowed me to reference a field and fill in its value using javascript, success!! Then I realised that I was not able to set checkbox fields in this manner.
I tried all manner of combinations, nothing allowed me to and then finally I inspected the element and found the long ID
Something along the lines of:
document.getElementById("j_id0:Block:j_id9:myform:ThePanel:j_id38:myModal:j_id67:FormBlock:j_id70:j_id177:j_id178:j_id187:j_id188:modal_Company_Car_Provided").checked = true;
Wallah I was back in business, but it seems that this type of Id will change itself occasionally and thus rende rmy entire page unusable.
Is there a better tag i can use when taking data froma nd inserting data into visualforce or html checkbox fields.
This is my page code:
<apex:page sidebar="True" docType="html-5.0" controller="Contact_EmploymentHistory" tabStyle="Contact" showHeader="True" >
<head>
<script type="text/javascript">
$j = jQuery.noConflict();
function getRemoteHistory(EditId) {
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.Contact_EmploymentHistory.getHistory}',
EditId,
function(result, event) {
if (event.status) {
// Get DOM IDs for HTML and Visualforce elements like this
$j("[id$='modal_Id']").val(result.Id);
$j("[id$='modal_Name']").val(result.Name);
$j("[id$='modal_Bonus_Overtime_Commission']").val(result.Bonus_Overtime_Commission__c);
$j("[id$='modal_Employer_Phone']").val(result.Employer_Phone__c);
$j("[id$='modal_Employment_Basis']").val(result.Employment_Basis__c);
$j("[id$='modal_Employment_Country']").val(result.Employment_Country__c);
$j("[id$='modal_Employment_Postcode']").val(result.Employment_Postcode__c);
$j("[id$='modal_Employment_State']").val(result.Employment_State__c);
$j("[id$='modal_Employment_Status']").val(result.Employment_Status__c);
$j("[id$='modal_Employment_Street_Name']").val(result.Employment_Street_Name__c);
$j("[id$='modal_Employment_Street_No']").val(result.Employment_Street_No__c);
$j("[id$='modal_Employment_Suburb']").val(result.Employment_Suburb__c);
$j("[id$='modal_Employment_Type']").val(result.Employment_Type__c);
$j("[id$='modal_Employment_Unit_No']").val(result.Employment_Unit_No__c);
$j("[id$='modal_Gross_Taxable_Salary_Wage']").val(result.Gross_Taxable_Salary_Wage__c);
$j("[id$='modal_Occupation']").val(result.Occupation__c);
var StartDateJava;
if (result.Start_Date__c != null) {
var StartDateJavaMili = new Date(Math.round(Number(result.Start_Date__c)));
StartDateJava = StartDateJavaMili.getUTCDate() + '/' + (StartDateJavaMili.getUTCMonth() + 1) + '/' + StartDateJavaMili.getUTCFullYear()
}else{
StartDateJava = "";
}
$j("[id$='modal_Start_Date']").val(StartDateJava);
var EndDateJava;
if (result.End_Date__c != null) {
var EndDateJavaMili = new Date(Math.round(Number(result.End_Date__c)));
var EndDateJava = EndDateJavaMili.getUTCDate() + '/' + (EndDateJavaMili.getUTCMonth() + 1) + '/' + EndDateJavaMili.getUTCFullYear()
}else{
EndDateJava = "";
}
$j("[id$='modal_End_Date']").val(EndDateJava);
if (result.On_Probation__c == true) {
document.getElementById($="modal_On_Probation").checked = true;
$j("[id$='modal_ProbationExpiryFieldGroup']").show();
} else {
$j("[id$='modal_ProbationExpiryFieldGroup']").hide();
}
if (result.Company_Car_Provided__c == true) {
document.getElementById("j_id0:Block:j_id9:myform:ThePanel:j_id38:myModal:j_id67:FormBlock:j_id70:j_id177:j_id178:j_id187:j_id188:modal_Company_Car_Provided").checked = true;
}
var ProbationExpiryJava;
if (result.Probation_Expiry__c != null) {
var ProbationExpiryJavaMili = new Date(Math.round(Number(result.Probation_Expiry__c)));
var ProbationExpiryJava = ProbationExpiryJavaMili.getUTCDate() + '/' + (ProbationExpiryJavaMili.getUTCMonth() + 1) + '/' + ProbationExpiryJavaMili.getUTCFullYear();
}else{
ProbationExpiryJava = "";
}
$j("[id$='modal_Probation_Expiry']").val(ProbationExpiryJava);
$j('#myModal').modal({
backdrop: 'static'
});
} else if (event.type === 'exception') {
document.getElementById("responseErrors").innerHTML =
event.message + "<br/>\n<pre>" + event.where + "</pre>";
$j('#myModal').modal({
backdrop: 'static'
});
} else {
document.getElementById("responseErrors").innerHTML = event.message;
}
}, {
escape: true
}
);
}
function updateWarehouse() {
var CompanyCar = false;
if (document.getElementById("j_id0:Block:j_id9:myform:ThePanel:j_id38:myModal:j_id67:FormBlock:j_id70:j_id177:j_id178:j_id187:j_id188:modal_Company_Car_Provided").checked == true) {
CompanyCar = true;
} else {
CompanyCar = false;
}
debugger;
alert( $j("[id$='modal_Probation_Expiry']").val());
var OnProbation = false;
if (document.getElementById("j_id0:Block:j_id9:myform:ThePanel:j_id38:myModal:j_id67:FormBlock:j_id70:j_id177:j_id178:j_id187:j_id188:modal_On_Probation").checked == true) {
OnProbation = true;
} else {
OnProbation = false;
}
var EH = {
Id: $j("[id$='modal_Id']").val(),
Name: $j("[id$='modal_Name']").val(),
Bonus_Overtime_Commission__c: $j("[id$='modal_Bonus_Overtime_Commission']").val(),
Employer_Phone__c: $j("[id$='modal_Employer_Phone']").val(),
Employment_Unit_No__c: $j("[id$='modal_Employment_Unit_No']").val(),
Employment_Street_No__c: $j("[id$='modal_Employment_Street_No']").val(),
Employment_Street_Name__c: $j("[id$='modal_Employment_Street_Name']").val(),
Employment_Suburb__c: $j("[id$='modal_Employment_Suburb']").val(),
Employment_State__c: $j("[id$='modal_Employment_State']").val(),
Employment_Postcode__c: $j("[id$='modal_Employment_Postcode']").val(),
Employment_Country__c: $j("[id$='modal_Employment_Country']").val(),
Employment_Type__c: $j("[id$='modal_Employment_Type']").val(),
Employment_Status__c: $j("[id$='modal_Employment_Status']").val(),
Occupation__c: $j("[id$='modal_Occupation']").val(),
Employment_Basis__c: $j("[id$='modal_Employment_Basis']").val(),
Gross_Taxable_Salary_Wage__c: $j("[id$='modal_Gross_Taxable_Salary_Wage']").val(),
Start_Date__c: DateFixer($j("[id$='modal_Start_Date']").val()),
End_Date__c: DateFixer($j("[id$='modal_End_Date']").val()),
Probation_Expiry__c: DateFixer($j("[id$='modal_Probation_Expiry']").val()),
Company_Car_Provided__c: CompanyCar,
On_Probation__c: OnProbation,
};
console.log(EH);
// Call the remote action to save the record data
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.Contact_EmploymentHistory.setHistory}',
EH,
function(result, event) {
if (event.status) {
alert("Status");
alert(result);
} else if (event.type === 'exception') {
alert("exception");
alert(result);
} else {
alert("special exception");
alert(result);
}
});
}
function DateFixer(DateConvert) {
var DateReturned;
if(DateConvert == ""){
DateReturned = "4127068800000";
}else{
var formattedDays = DateConvert.split("/");
var DateReturned = Date.UTC(formattedDays[2], ((formattedDays[1]) - 1), formattedDays[0], 0, 0, 0, 0);
}
return DateReturned;
}
function FieldRenderer() {
if (document.getElementById("j_id0:Block:j_id9:myform:ThePanel:j_id38:myModal:j_id67:FormBlock:j_id70:j_id177:j_id178:j_id187:j_id188:modal_On_Probation").checked == true) {
$j("[id$='modal_ProbationExpiryFieldGroup']").show();
} else {
$j("[id$='modal_ProbationExpiryFieldGroup']").hide();
};
if ($j("[id$='modal_Employment_Status']").val() != "Previous Employment") {
$j("[id$='modal_End_Date_FieldGroup']").hide();
} else {
$j("[id$='modal_End_Date_FieldGroup']").show();
};
if ($j("[id$='modal_Employment_Type']").val() == "PAYG" || $j("[id$='modal_Employment_Type']").val() == "Self Employed") {
$j("[id$='modal_RenderSection']").show();
} else if ($j("[id$='modal_Employment_Type']").val() == "Home Duties" || $j("[id$='modal_Employment_Type']").val() == "Unemployed" || $j("[id$='modal_Employment_Type']").val() == "Retired"){
$j("[id$='modal_RenderSection']").hide();
};
}
</Script>
<style>
div.hideCurrDate span.dateInput span.dateFormat{
display:none;
}
div.ct{
text-align:center;
}
</style>
</head>
<vs:importvisualstrap theme="default" />
<vs:visualstrapblock id="Block" >
<apex:pageMessages />
<apex:form id="myform">
<vs:panel title="Employment History Structure" type="primary" id="ThePanel" >
<vs:row >
<vs:column type="col-md-1">
<div style="text-align:center">
<apex:outputLabel >Number of Records</apex:outputLabel>
</div>
</vs:column>
</vs:row>
<vs:row >
<vs:column type="col-md-1">
<div align="center">
<apex:outputText id="NoRecords" value="{!Con.Number_of_Employment_Records__c}"/>
</div>
</vs:column>
</vs:row>
<br/><br/>
<!------------------------ MODAL ATTEMPT --------------------------->
<!--modal that will be displayed to the user-->
<vs:modal title="Employment History Information" id="myModal">
<apex:InputHidden id="modal_Id" value="{!SaveId}" />
<vs:formblock id="FormBlock" styleclass="form-horizontal">
<div id="responseErrors"></div>
<vs:formgroup id="FormGroup" >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Employment Type:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield id="modal_Employment_Type" styleClass="form-control" onchange="FieldRenderer();" Value="{!Con1History.Employment_Type__c}" html-placeholder="Employment Type"></apex:inputfield>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Employment Status:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Employment_Status__c}" onchange="FieldRenderer();" id="modal_Employment_Status" html-placeholder="Employment Status"/>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Start Date:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputtext styleClass="form-control" Value="{!Con1History.Start_Date__c}" id="modal_Start_Date" html-placeholder="Start Date"></apex:inputtext>
</vs:column>
</vs:formgroup>
<apex:outputPanel id="modal_End_Date_FieldGroup">
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
End Date:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.End_Date__c}" id="modal_End_Date" html-placeholder="End Date"></apex:inputfield>
</vs:column>
</vs:formgroup>
</apex:outputPanel>
<apex:outputPanel id="modal_RenderSection">
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Occupation:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Occupation__c}" id="modal_Occupation" html-placeholder="Occupation"></apex:inputfield>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Employment Basis:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Employment_Basis__c}" id="modal_Employment_Basis" html-placeholder="Employment Basis"></apex:inputfield>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Gross Taxable Salary/Wage:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Gross_Taxable_Salary_Wage__c}" id="modal_Gross_Taxable_Salary_Wage" html-placeholder="Gross Taxable Salary/Wage"></apex:inputfield>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Bonus/Overtime/ <br/> Commission:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Bonus_Overtime_Commission__c}" id="modal_Bonus_Overtime_Commission" html-placeholder="Bonus/Overtime/Commission"></apex:inputfield>
<div class="checkbox">
<apex:outputLabel >
<apex:inputfield Value="{!Con1History.Company_Car_Provided__c}" id="modal_Company_Car_Provided" /> Company Car Provided
</apex:outputLabel>
</div>
<div class="checkbox">
<apex:outputLabel >
<apex:inputCheckbox Value="{!Con1History.On_Probation__c}" onclick="FieldRenderer();" id="modal_On_Probation" > On Probation
</apex:inputCheckbox>
</apex:outputLabel>
</div>
</vs:column>
</vs:formgroup>
<apex:outputPanel id="modal_ProbationExpiryFieldGroup">
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;" >
<apex:outputLabel styleclass="control-label">
Probation Expiry:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Probation_Expiry__c}" id="modal_Probation_Expiry" html-placeholder="Probation Expiry" ></apex:inputfield>
</vs:column>
</vs:formgroup>
</apex:outputPanel>
<vs:formgroup id="Group" >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Employer:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield Value="{!Con1History.Name}" styleClass="form-control" id="modal_Name" html-placeholder="Employer"></apex:inputfield>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Employer Phone #:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Employer_Phone__c}" id="modal_Employer_Phone" html-placeholder="Employment Phone"></apex:inputfield>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Employment Unit No.:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Employment_Unit_No__c}" id="modal_Employment_Unit_No" html-placeholder="Employment Unit No."></apex:inputfield>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Employment Street No.:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Employment_Street_No__c}" id="modal_Employment_Street_No" html-placeholder="Employment Street No."></apex:inputfield>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Employment Street Name:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Employment_Street_Name__c}" id="modal_Employment_Street_Name" html-placeholder="Employment Street Name"></apex:inputfield>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Employment Suburb:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Employment_Suburb__c}" id="modal_Employment_Suburb" html-placeholder="Employment Suburb"></apex:inputfield>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Employment State:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Employment_State__c}" id="modal_Employment_State" html-placeholder="Employment State"></apex:inputfield>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Employment Postcode:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Employment_Postcode__c}" id="modal_Employment_Postcode" html-placeholder="Employment Postcode"></apex:inputfield>
</vs:column>
</vs:formgroup>
<vs:formgroup >
<vs:column type="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:center;">
<apex:outputLabel styleclass="control-label">
Employment Country:
</apex:outputLabel>
</vs:column>
<vs:column type="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<apex:inputfield styleClass="form-control" Value="{!Con1History.Employment_Country__c}" id="modal_Employment_Country" html-placeholder="Employment Country"></apex:inputfield>
</vs:column>
</vs:formgroup>
</apex:outputPanel>
<vs:formgroup style="margin-top:30px;">
<vs:column type="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<center>
<apex:commandButton value="Cancel" onclick="updateWarehouse();" styleClass="btn btn-danger"/>
<apex:commandButton value="Submit" Action="{!SaveHelper}" styleClass="btn btn-success"/>
</center>
</vs:column>
</vs:formgroup>
</vs:formblock>
</vs:modal>
<br></br>
<br></br>
<!------------------------ MODAL ATTEMPT --------------------------->
jQuery("[id$='modal_Bonus_Overtime_Commission']").prop('checked', true);[1] https://learn.jquery.com/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button/