+ Start a Discussion
ChizChiz 

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.

Best Answer chosen by Admin (Salesforce Developers) 
ChizChiz

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 functiononclick="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

Chamil MadusankaChamil Madusanka

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

 

ChizChiz

Page not found
Sorry, the page you were looking for in the blog Salesforce World does not exist.


chamil wrote:

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

 


 

Chamil MadusankaChamil Madusanka

 

 

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.

kiranmutturukiranmutturu

 alert('{!$Component.map_canvas}');.. try to give the single quotes in the alert.. and try..

kiranmutturukiranmutturu

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>
     
ChizChiz

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 functiononclick="initialize22('{!$Component.map_canvas}');" ) instead of using it directly in script section (

<script type="text/javascript">

 function initialize22() {

  alert({!$Component.map_canvas2});

 }

</script>

).

This was selected as the best answer
ChizChiz

Kiran, thanks a lot for help!