Nice Easy jQuery_问答_开发者_运维开发者技术经验分享

I have a nice easy problem for you here.

This is a nice easy navigation script that uses the jQuery .load().

Problem is one of these pages uses the Google Maps API...

I found some code from a post on this forum that basically allowed you to load a map on demand.

I figure if I trigger loadmap() and loadscript() when a link is clicked this would work.

Problem being I haven't uses jQuery in a while and have completely forgot how to daisy chain functions...

So basically: I want the function to do the .load function but then call both LoadMap() and 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>

Then this is my edited code:

<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>
            Overcomm开发者_如何学Cing 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>

Please note: "map" is on page1.html.... Can you see what I am trying to do?

Since you pass &async=2 and &callback=loadMap to the Google maps API, it will automatically call the callback function (i.e. loadMap) once loaded.

$('#sandbox').load($(this).attr('href'), function() {
    loadScript();
    // loadMap(); <-- unnecessary; and might throw JavaScript error
});

map = new GMap2(document.getElementById("map"));

you don't have any element by the id map

also the load function has a callback so you can do:

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

The solution isn't to 'daisy chain' the functions, as that would still execute them in order. You need to wait until the external data is loaded before calling the other methods, by passing in a callback function to load:

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

You mean passing a callback function, like:

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

This will call loadMap() and loadScript() when load() is completed.

Your call to load function should look like this:

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

Nice Easy jQuery

精彩评论

关注公众号

热门标签

图文推荐

Nice Easy jQuery

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：