Выполнить JavaScript из составного компонента - PullRequest
Новая
       3

Выполнить JavaScript из составного компонента

1 голос
/ 15 июня 2011

Добрый день, у меня проблема, которая раздражала меня уже пару часов. Это очень прямо вперед. Я пытаюсь вызвать / выполнить JavaScript, когда составной компонент отображается. Как то, что вы можете сделать с тегом html body и onload.

Как я могу сослаться на встроенный JavaScript для выполнения? 

<cc:implementation>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" />
    <div id="#{cc.clientId}" >

        <div id="map_canvas" style="width: 850px; height: 350px; padding: 1px; border: darkblue" />

        <script>init();</script>

        <script type="text/javascript">
            var map = null;
            function init() {
                var latlng = new google.maps.LatLng(51.5001524, -0.12623619);
                var myOptions = {
                    zoom: 7,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            }
        </script>
    </div>
    </cc:implementation>

Я пробовал с this.init (), # {cc.clientId} .init (). Но JS не может быть найден в контексте. Если я выполняю его из компонента JSF / ajax, он прекрасно работает, просто "init ();"

1 Ответ

5 голосов
/ 15 июня 2011

Вы звоните init() до того, как функция была определена.

Поставьте вызов после определения функции. 

<script type="text/javascript">
    var map = null;
    function init() {
        var latlng = new google.maps.LatLng(51.5001524, -0.12623619);
        var myOptions = {
            zoom: 7,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
</script>
<script>init();</script>

Или просто избавьтесьвызова функции и просто выполнить его напрямую.Он будет работать так же, как и после того, как будет определено <div id="map_canvas">. 

<script type="text/javascript">
    var map = null;
    var latlng = new google.maps.LatLng(51.5001524, -0.12623619);
    var myOptions = {
        zoom: 7,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
</script>

Не связано с конкретной проблемой: у вас есть еще один недостаток дизайна в вашем композитесоставная часть.Этот компонент нельзя использовать более одного раза в одном представлении.В результате вы получите несколько элементов <div id="map_canvas"> в HTML.Наличие нескольких элементов с одинаковым id в HTML недопустимо.Исправьте это соответственно: 

<div id="#{cc.clientId}_map_canvas" ...>

и 

... document.getElementById("#{cc.clientId}_map_canvas") ...
...