function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
gazzer82gazzer82 

Custom Page, with Javascript/Google issue?

I have a custom page that is making a call out to the gogle maps API and displaying a map.

 

I am slo using the API to calculate the mileage betweent two location, and would like to update that info in a text field on the page, first parts works, second part doesn't. Here is the code i am am using.

 

If i look at the error log in Chrome is, Uncaught TypeError: Cannot set property 'innerHTML' of null?

 

Thanks

 

Gareth

 

 

<apex:page standardController="Opportunity">
<apex:pageBlock >
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Complex</title>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body style="font-family: Arial; font-size: 13px; color: red;">
<div id="map" style="width: 647px; height: 318px;"></div>

<script type="text/javascript">

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var startPostcode = "{!Opportunity.Warehouse_Postcode__c}";
var endPostcode = "{!Opportunity.R2_Shipping_Post_Code__c}";
var distanceInMeters;
var distanceInMiles;
var durationInSeconds;
var durationInMinutes;
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);

var request = {
origin: startPostcode,
destination: endPostcode,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {

distanceInMeters = response.routes[0].legs[0].distance.value;
distanceInMiles = Math.floor(distanceInMeters / 1609.344);
durationInSeconds = response.routes[0].legs[0].duration.value;
durationInMinutes = Math.floor(durationInSeconds / 60);


directionsDisplay.setDirections(response);
document.getElementById('00Nb0000004zOiz_ileinner').innerHTML = distanceInMiles;

}
});


</script>
</body>
</html>
</apex:pageBlock>
</apex:page>

gazzer82gazzer82

Also, if i execute the follwing in the development console in Chrome then the element does get updated. I am assuming this is come kind of DOM path related issue?

 

document.getElementById('00Nb0000004zOiz_ileinner').innerHTML = '989';

 

Thanks

 

Gareth
Puja_mfsiPuja_mfsi

Hi,   

This means "document.getElementById('00Nb0000004zOiz_ileinner')" return NULL i,e, there is no element with the ID  "00Nb0000004zOiz_ileinner" .

OR when the java script is call then the element is no display in your VF page,that's why developer always prefer java script code at the end of code.

 

Please let me know if u have any problem on same and if this post helps you please throw KUDOS by click on star at left.

 

 

 
Avidev9Avidev9
Seems like you are updating a field in standar layout. Well few things are you using the page as a inline VF page ?

Probably the inline VF page wont be able to access the components of standard layouts as VF pages are served from different domain. And due to cross domain policies JS are not allowed to access anythign from diff domain.
gazzer82gazzer82

Hi Avidev,

 

Yes i am trying to update a field in a standard page from a VF page being displayed in and i-frame.

 

So, what would the way around it be, to create the field i want to update progmatically within the custom VF page and update that instead.

 

In which case, is there any way to map that field to the fetched record and save it for future use? We may also need to complete other calculations based on the value returned so it would need to be saved for the next page render?

 

Apologies for the stupid questions, still getting my head around the way everything works with SF!

 

Thanks

 

Gareth
Avidev9Avidev9
Well how about committing the value to DB ? by doing an UPDATE using a actionFunction. This will make sure you have data in the field

By the way when you are assigning value using JS to the field its just changing the HTML and there is no change @Object/DB