Apex Code Development You need to sign in to do that
Don't have an account?
Chiz JavaScript integration into VF page
Here is a code:
<apex:page id="thePage" standardController="Contact">
<script src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false"
type="text/javascript">
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<apex:pageBlock id="mapBlock" title="Map">
<apex:outputPanel title="map_canvas title" id="map_canvas" onclick="initialize22();" layout="block" style="width:100%; height:100%">
Click here to view map
</apex:outputPanel>
</apex:pageBlock>
<apex:pageBlock title="My Contact Details">
<apex:outputPanel id="map_canvas2" onclick="alert('{!$Component.map_canvas2}');" layout="block" style="width:100%; height:100%">
<p>Hello, {!contact.FirstName}!</p>
</apex:outputPanel>
</apex:pageBlock>
<apex:detail relatedList="false" />
<script type="text/javascript">
function initialize22() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
alert({!$Component.map_canvas});
var map = new google.maps.Map(document.getElementById({!$Component.map_canvas}),
myOptions);
alert("Map loaded!");
}
</script>
</apex:page>In initialize22 function I can't get id of the element 'map_canvas'. If I post alert in attribute 'onclick' of '
apex:outputPanel' tag it will display. But in JS written separate - no. It's undefined.
Maybe I post JavaScript in wrong place?
Tested in Firefox 4, Chrome and IE 9.
OK.
I'll explaine the rool of integrating JavaScript into VisualForce page.
You can use call {!$Component.map_canvas} directly in script section, i.e.:
<script type="text/javascript"> function initialize22() { alert({!$Component.map_canvas2}); } </script>Instead you MUST pass this expression to function which is called in onclick(for example) event attribut in apex tag. I mean:
<apex:outputPanel id="map_canvas" onclick="initialize22('{!$Component.map_canvas}');"> Click here to view map </apex:outputPanel> <script type="text/javascript"> function initialize22(map_canvas_id) { alert(map_canvas_id); } </script>It will work for last example.
I hope my topic will help someone else.
Just pass expression which get component's id ( {!$Component.map_canvas} ) to JavaScript's function ( onclick="initialize22('{!$Component.map_canvas}');" ) instead of using it directly in script section (
<script type="text/javascript">
function initialize22() {
alert({!$Component.map_canvas2});
}
</script>
).
All Answers
Hi,
Get an idea from following link;
http://salesforceworld.blogspot.com/2011/06/javascript-with-visualforce-pages.html
If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.
Chamil's Blog
Page not found
Sorry, the page you were looking for in the blog Salesforce World does not exist.
http://salesforceworld.blogspot.com/2011/06/javascript-with-visualforce-pages.html
OR
go t my blog Chamil's Blog
http://salesforceworld.blogspot.com
There is a topic called javascript with visualforce.
If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.
alert('{!$Component.map_canvas}');.. try to give the single quotes in the alert.. and try..
if not with the above post try this
<apex:page id="thePage" standardController="Contact"> <script src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"> </script> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <apex:pageBlock id="mapBlock" title="Map"> <apex:outputPanel title="map_canvas title" id="map_canvas" onclick="initialize22();" layout="block" style="width:100%; height:100%"><script>var vid = document.getElementById('{!$component.map_canvas}'); </script> Click here to view map </apex:outputPanel> </apex:pageBlock> <apex:pageBlock title="My Contact Details"> <apex:outputPanel id="map_canvas2" onclick="alert('{!$Component.map_canvas2}');" layout="block" style="width:100%; height:100%"> <p>Hello, {!contact.FirstName}!</p> </apex:outputPanel> </apex:pageBlock> <apex:detail relatedList="false" /> <script type="text/javascript"> function initialize22() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; alert(vid); var map = new google.maps.Map(document.getElementById({!$Component.map_canvas}), myOptions); alert("Map loaded!"); } </script>OK.
I'll explaine the rool of integrating JavaScript into VisualForce page.
You can use call {!$Component.map_canvas} directly in script section, i.e.:
<script type="text/javascript"> function initialize22() { alert({!$Component.map_canvas2}); } </script>Instead you MUST pass this expression to function which is called in onclick(for example) event attribut in apex tag. I mean:
<apex:outputPanel id="map_canvas" onclick="initialize22('{!$Component.map_canvas}');"> Click here to view map </apex:outputPanel> <script type="text/javascript"> function initialize22(map_canvas_id) { alert(map_canvas_id); } </script>It will work for last example.
I hope my topic will help someone else.
Just pass expression which get component's id ( {!$Component.map_canvas} ) to JavaScript's function ( onclick="initialize22('{!$Component.map_canvas}');" ) instead of using it directly in script section (
<script type="text/javascript">
function initialize22() {
alert({!$Component.map_canvas2});
}
</script>
).
Kiran, thanks a lot for help!