Nice Easy JQuery - PullRequest
Новая
       3

Nice Easy JQuery

0 голосов
/ 29 марта 2011

У меня есть хорошая легкая проблема для вас здесь.

Это хороший простой скрипт навигации, который использует jQuery .load ().

Проблема в том, что на одной из этих страниц используется API Карт Google ...

Я нашел код из поста на этом форуме, который в основном позволял вам загружать карту по требованию.

Я полагаю, что если при нажатии на ссылку я вызову loadmap () и loadcript (), это сработает.

Проблема в том, что я некоторое время не использовал jQuery и совершенно забыл, как работать с цепочечными функциями ...

Так что в основном: я хочу, чтобы функция выполняла функцию .load, но затем вызывала и LoadMap (), и loadScript () .... 

<html>
<head>
    <title>
        Overcomming Crome 
    </title>
    <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $('.jNav').click(function(){
            $('#sandbox').load($(this).attr('href'));
            return false;
          });
        });

        function loadMap() {
          map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(37.4419, -122.1419), 6);
          map.addOverlay(new GMarker(map.getCenter()));
        }

        function loadScript() {
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.src = "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=loadMap";
          document.body.appendChild(script);
        }
    </script>

</head>
<body>
    <h1>
        Overcomming Crome
    </h1>
    <li><a href="page1.html" class="jNav">Load Page 1 to Sandbox</a></li>
    <li><a href="page2.html" class="jNav">Load Page 2 to Sandbox</a></li>
    <li><a href="page3.html" class="jNav">Load Page 3 to Sandbox</a></li>
    <div id="sandbox"></div>
</body>

Тогда это мой отредактированный код: 

<html>
    <head>
        <title>
            Overcomming Crome 
        </title>
        <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
              $('.jNav').click(function(){
                $('#sandbox').load($(this).attr('href'),function() {
                  loadMap();
                  loadScript();
                });
                return false;
              });
            });

            function loadMap() {
                alert("Function 1 loaded");
                map = new GMap2(document.getElementById("map"));
                map.setCenter(new GLatLng(37.4419, -122.1419), 6);
                map.addOverlay(new GMarker(map.getCenter()));
            }

            function loadScript() {
                alert("Function 2 loaded");
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=loadMap";
                document.body.appendChild(script);
            }
        </script>

    </head>
    <body>
        <h1>
            Overcomming Crome
        </h1>
        <li><a href="page1.html" class="jNav">Load Page 1 to Sandbox</a></li>
        <li><a href="page2.html" class="jNav">Load Page 2 to Sandbox</a></li>
        <li><a href="page3.html" class="jNav">Load Page 3 to Sandbox</a></li>
        <div id="sandbox"></div>
    </body>
</html>

Обратите внимание: «map» находится на page1.html .... Вы видите, что я пытаюсь сделать?

Ответы [ 5 ]

3 голосов
/ 29 марта 2011

Поскольку вы передаете &async=2 и &callback=loadMap в API карт Google, он автоматически вызовет функцию обратного вызова (т.е. loadMap) после загрузки. 

$('#sandbox').load($(this).attr('href'), function() {
    loadScript();
    // loadMap(); <-- unnecessary; and might throw JavaScript error
});
1 голос
/ 29 марта 2011

Решение не состоит в том, чтобы «последовательно соединять» функции, поскольку это все равно будет выполнять их по порядку. Необходимо дождаться загрузки внешних данных, прежде чем вызывать другие методы, передав функцию обратного вызова в load: 

$('#sandbox').load($(this).attr('href'), function() {
    loadScript();
    loadMap();
});
1 голос
/ 29 марта 2011

Вы имеете в виду передачу функции обратного вызова, например: 

$('#sandbox').load($(this).attr('href'), function() {
  loadMap();
  loadScript();
});

Это вызовет loadMap() и loadScript(), когда load() будет завершено.

1 голос
/ 29 марта 2011 
map = new GMap2(document.getElementById("map"));

у вас нет элемента с помощью карты идентификаторов

также функция загрузки имеет функцию обратного вызова, поэтому вы можете сделать: 

$('#sandbox').load($(this).attr('href'), function() {
  loadMap();
  loadScript();
});
0 голосов
/ 29 марта 2011

Ваш вызов функции load должен выглядеть следующим образом: 

$('#sandbox').load($(this).attr('href') function(){
    loadScript();
    loadMap();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...