5

I have a big dilema. I want to load a .html file which contains javascript(google maps) code to render the div inside it.

maps.html look like this :

    <script type="text/javascript">
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }

    return vars;
}
</script>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[




var hash = getUrlVars();

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(hash['lat'],hash['lng']),
        zoom: 14,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;


      downloadUrl("xmlout_carol.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length+1; i++) {
          var name = markers[i].getAttribute("nume");
          var address = markers[i].getAttribute("adresa");
          var type = markers[i].getAttribute("id");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<font face='Tahoma' style='font-size:12px;'><div style='min-width:230px;'><b>" + name + "</b> <br/>" + address +"<a target='_top'  href='../statii.php?id=" + type + "'><img style='float:right; border:0px; margin-left: 40px;'  src='go.png' /></a><div/></font>";
          var tip = markers[i].getAttribute("tip");
          var icon = customIcons[tip] || {};

          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
           // shadow: 'shaddow.png'
          //shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'mouseover', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
      google.maps.event.addListener(map, 'click', function() {
        infoWindow.close(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>

  </script>

  <body onload="load()">
    <div id="map" style="width: 900px; height: 500px"></div>
  </body>

this script render the map to the div.map

What i want to do is to load this .html into a div that is contained in another .php file like this :

$("div#insert_here").load("maps.html?lat=xxx&long=yyy");

It output the div contained in maps.html but with no map no java.

So the question is... How do I load a .html file using jquery in another .php file if the .html file already contains javascripts to output data to the div in .html file ???

Thanks a lot !

KJYe.Name
  • 16,969
  • 5
  • 48
  • 63
pufos
  • 2,890
  • 8
  • 34
  • 38
  • Nothing in your code suggests you're using jQuery, only the last part of your question... Have you looked at [`$.get`](http://api.jquery.com/jQuery.get/) at all? – Wesley Murch Apr 14 '11 at 19:04
  • And this is just another reason why it's bad to have JavaScript code mixed with markup. – Eli Apr 14 '11 at 19:08
  • This is what google is doing to display maps on your site. And i have already tried `$.get('maps.html?lat=xxx&long=yyy', function(data) { $("div#mapa_google").html(data); });` and not working. – pufos Apr 14 '11 at 19:10
  • How do i send GET variables or any variable to an external `.js` file using jquery`s `getScript()` ?? – pufos Apr 14 '11 at 19:27

3 Answers3

1

Instead of loading a file which has both HTML and JavaScript in it, can you load the JavaScript with the page initially, make an ajax call for the HTML, and call the JavaScript once the ajax request is complete? This will solve a lot of headaches with this issue.

Eli
  • 17,397
  • 4
  • 36
  • 49
  • Look i have quite a lot of files ... I thought of that but the question is why this won't work with juqery`s `.load()` or `.get()` functions native. – pufos Apr 14 '11 at 19:16
  • 1
    `load` and `get` and don't evaluate JS, only `getScript` and `getJSON` will (I think). You are essentially just inserting ineffective markup. – Eli Apr 14 '11 at 19:18
  • and because i have GET variables sent to that page .. how will i send 2 variables to that `.js` file ? (using `$.getScript("maps/google_statii.js", function(){ load(); });` – pufos Apr 14 '11 at 19:24
1

As the others said, load JS particularly, or do the eval() function ;).

That parses the JS and makes it possible to be executed initially.

Martin Bories
  • 1,067
  • 17
  • 37
0

I dont use load and get much it almost always seems better to use $.ajax or $.post (more flexibility, I also suggest calling json and using the dataType:"json". Again more flexible).

Use callbacks after success to run the javascript you need once the ajaxed html is loaded into the page. You call use beforeSend to load script you need (although unless there is a good reason just add those scripts to the page along with everything else (more robust/cacheable)).

If google_statii.js needs dynamic variables one way would be use hidden inputs on the page with values populated server side and then call them within the script.

ie. var x = $("input#myHiddenVariable");

Matt2012
  • 130
  • 1
  • 8