+ Start a Discussion
MIKE_DAYMIKE_DAY 

Help with APEX Page and JavaScript - Task Tracking App

Hi Guys,

 

I have created an Apex page which, using Javascript, can query the Task Object from a UserId (Task Owner) and Date (Activity Date) entered on the Apex page. When a Commandbutton is clicked the Javascript function will bring back all the Tasks found and all the related Account information.  This will then produce a google route map of the users completed tasks that day, starting and ending at the Users Home address (User Postcode).

 

All of the below works fine and the map is produced, but only after I click the command button twice as the first click will not recognise the data a user has entered on the page. By the second click it has cached the entry somehow and the data can be passed to the function.

 

Does anyone know how I can get the field entries to pass to the function first time? 

 

CODE:

 

<apex:page standardController="Task" sidebar="false" showHeader="false">
<apex:includeScript value="/soap/ajax/20.0/connection.js" />
<script type="text/javascript">
var previousOnload = window.onload;
window.onload = function()
{
if (previousOnload)
{
previousOnload;
}
init();
}

function init()
{
sforce.connection.sessionId = '{!$Api.Session_ID}';
}


function Tracker(U,D){
var Uid = "'"+U+"'";
var maps;
var gurl = "http://maps.google.com/maps?q=from:";
var day= D.slice(0,2);
var month=D.slice(3,5);
var year=D.slice(6,10);
var newdate = year+"-"+month+"-"+day;
alert("User ID:"+Uid+"Date: "+D);

 

var Acc= sforce.connection.query("Select Account.Name, Account.BillingPostalCode, Time_On__c, Time_Off__c from Task where OwnerId = "+Uid+" AND ActivityDate = "+ newdate +" AND Status = 'Closed' ORDER BY LastModifiedDate ");
var ex = Acc.getArray("records");
   if (ex.length < 1) { alert("There are no Tasks to be Mapped");
   } else {

var usrq= sforce.connection.query("Select User.Postalcode from User where User.Id = "+Uid+" ");
var usr = usrq.getArray("records"); 

var maps = usr[0].PostalCode+" (Home)"+"+to:+";
for (var a=0; a < ex.length; a++) { //for all records   
maps = maps+ex[a].Account.BillingPostalCode+" ("+ ex[a].Account.Name + " "+ ex[a].Time_On__c +" - " + ex[a].Time_Off__c +") "+"+to:+";
    }
maps = maps + usr[0].PostalCode + " (Home)";
window.open(gurl+maps,"frame","menubar=1,resizable=1,scrollbars=1,width=900,height=600");
  }
}
</script>

<apex:outputPanel id="Track">
<apex:form id="thisForm">
<apex:pageBlock title="Field Tracker" mode="edit">
<apex:pageBlockButtons >
<apex:commandButton value="Start Tracking" onClick="Tracker('{!Task.OwnerId}','{!Task.ActivityDate}') "/>
</apex:pageBlockButtons>
<apex:pageBlockSection title="Please enter a User and Date:" columns="2">
<apex:inputField label="User" id="UserID" value="{!Task.OwnerId}" />
<apex:inputField label="Date" id="Date" value="{!Task.ActivityDate}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:outputPanel>

</apex:page>

 

There are 2 custom fields Time_On__c and Time_Off__C which are pretty self explanitory but if you need any more details on this please let me know.

 

PS: If anyone can help me get the map into an iframe on the page instead of a new window that would be a bonus.

 

Thanks as always

 

Mike

Best Answer chosen by Admin (Salesforce Developers) 
MIKE_DAYMIKE_DAY

GOT IT!!!

 

The Script needed to be wrapped inside the Form tags and I could then pass the document components into the function.  The ID element behind the OwnerID field did not yest exisit so I had to query it first and as I had it wrapped up there was not need to initialise.

 

All working and thank you for pointing me in the right direction.

 


<apex:page standardController="Task" sidebar="false" showHeader="false">

<apex:includeScript value="/soap/ajax/20.0/connection.js" />
<apex:form id="thisForm">
<script type="text/javascript">

function Tracker(){
sforce.connection.sessionId = '{!$Api.Session_ID}';
var u = "'"+document.getElementById('{!$Component.pageblockid.txtOwner}').value+"'";
var D = document.getElementById('{!$Component.pageblockid.txtDate}').value;
var maps;
var gurl = "http://maps.google.com/maps?q=from:";
var day= D.slice(0,2);
var month=D.slice(3,5);
var year=D.slice(6,10);
var newdate = year+"-"+month+"-"+day;
var usrq= sforce.connection.query("Select User.Id, User.Postalcode from User where User.Name = "+u+" ");
var usr = usrq.getArray("records");
var uid = "'"+usr[0].Id+"'";
var Acc = sforce.connection.query("Select Account.Name, Account.BillingPostalCode, Time_On__c, Time_Off__c from Task where OwnerId = "+uid+" AND ActivityDate = "+ newdate +" AND Status = 'Closed' ORDER BY LastModifiedDate ");
var ex = Acc.getArray("records");
   if (ex.length < 1) { alert("There are no Tasks to be Mapped");
   } else {
var maps = usr[0].PostalCode+" (Home)"+"+to:+";
for (var a=0; a < ex.length; a++) { //for all records   
maps = maps+ex[a].Account.BillingPostalCode+" ("+ ex[a].Account.Name + " "+ ex[a].Time_On__c +" - " + ex[a].Time_Off__c +") "+"+to:+";
    }
maps = maps + usr[0].PostalCode + " (Home)";
window.open(gurl+maps,"frame","menubar=1,resizable=1,scrollbars=1,width=900,height=600");
  }
}
</script>
<apex:pageBlock title="Tracker" id="pageblockid">
Enter Username and Date:
<apex:inputField id="txtOwner" value="{!Task.OwnerId}" />
<apex:inputField id="txtDate" value="{!Task.ActivityDate}" />
</apex:pageBlock>
<apex:pageBlock>
<apex:commandButton onclick="javascript&colon;return Tracker();" value="Start Tracking"/>
</apex:pageBlock>
</apex:form>
</apex:page>




All Answers

mast0rmast0r

Hi Mike,

 

i think you need to add return false after your function in the button, or add an reRender="none" tag. Without that your page will be just reloaded on the button click:

 

<apex:commandButton value="Start Tracking" onClick="Tracker('{!Task.OwnerId}','{!Task.ActivityDate}'); return false; "/>

 

or

 

<apex:commandButton value="Start Tracking" onClick="Tracker('{!Task.OwnerId}','{!Task.ActivityDate}');" reRender="none"/>

 

MIKE_DAYMIKE_DAY

Hi mast0r,  

 

Thanks,  I think that may be the reason why this function is only working on the second click as the refresh seems to semi-commit the data onto the page.  I tried your mods but get the same result so is there a way to mimic the two clicks (refresh then run the feature)?

 

Mike 

mast0rmast0r

I would try to use the jQuery ready() function to initialize:

 

 jQuery(document).ready(function() {
   init();
 });
MIKE_DAYMIKE_DAY

GOT IT!!!

 

The Script needed to be wrapped inside the Form tags and I could then pass the document components into the function.  The ID element behind the OwnerID field did not yest exisit so I had to query it first and as I had it wrapped up there was not need to initialise.

 

All working and thank you for pointing me in the right direction.

 


<apex:page standardController="Task" sidebar="false" showHeader="false">

<apex:includeScript value="/soap/ajax/20.0/connection.js" />
<apex:form id="thisForm">
<script type="text/javascript">

function Tracker(){
sforce.connection.sessionId = '{!$Api.Session_ID}';
var u = "'"+document.getElementById('{!$Component.pageblockid.txtOwner}').value+"'";
var D = document.getElementById('{!$Component.pageblockid.txtDate}').value;
var maps;
var gurl = "http://maps.google.com/maps?q=from:";
var day= D.slice(0,2);
var month=D.slice(3,5);
var year=D.slice(6,10);
var newdate = year+"-"+month+"-"+day;
var usrq= sforce.connection.query("Select User.Id, User.Postalcode from User where User.Name = "+u+" ");
var usr = usrq.getArray("records");
var uid = "'"+usr[0].Id+"'";
var Acc = sforce.connection.query("Select Account.Name, Account.BillingPostalCode, Time_On__c, Time_Off__c from Task where OwnerId = "+uid+" AND ActivityDate = "+ newdate +" AND Status = 'Closed' ORDER BY LastModifiedDate ");
var ex = Acc.getArray("records");
   if (ex.length < 1) { alert("There are no Tasks to be Mapped");
   } else {
var maps = usr[0].PostalCode+" (Home)"+"+to:+";
for (var a=0; a < ex.length; a++) { //for all records   
maps = maps+ex[a].Account.BillingPostalCode+" ("+ ex[a].Account.Name + " "+ ex[a].Time_On__c +" - " + ex[a].Time_Off__c +") "+"+to:+";
    }
maps = maps + usr[0].PostalCode + " (Home)";
window.open(gurl+maps,"frame","menubar=1,resizable=1,scrollbars=1,width=900,height=600");
  }
}
</script>
<apex:pageBlock title="Tracker" id="pageblockid">
Enter Username and Date:
<apex:inputField id="txtOwner" value="{!Task.OwnerId}" />
<apex:inputField id="txtDate" value="{!Task.ActivityDate}" />
</apex:pageBlock>
<apex:pageBlock>
<apex:commandButton onclick="javascript&colon;return Tracker();" value="Start Tracking"/>
</apex:pageBlock>
</apex:form>
</apex:page>




This was selected as the best answer