CODEWITHSUNDEEP
phpjqueryincludeload
circey
circey

Reputation: 2042

php include works, jquery .load does not

Why does this work:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="graph">
<? include('sites/test.php') ?>
</div>
</body>

But this does not:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="graph">
</div>
<script>
$(document).ready(function() {         
    $('#graph').load('sites/test.php');    
});
</script>
</body>

Here is test.php if required:

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="./data.js"></script>
<div id="text" style="width:500px;height:500px;position:relative;border:1px solid red;">
<div id="map_canvas" style="border:1px solid green;"></div>
</div>

<script type="text/javascript">
var map;
function initialize() {
    var myLatlng = new google.maps.LatLng(-36.42,145.704);
    var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.SATELLITE }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // Create polygon overlays from site data in file data.js included above
    // Overlays are defined by a set of coordinates
    // We will also be setting up an infowindow with the site name
    // The infowindow will be designed to point to the 'center' of each site so we calculate the 'centroid' of each overlay in the code below as well
    var overlay;
    var number_of_overlays = 29;

    for (var k = 0; k < number_of_overlays; k++) {
        var pk = primaryKeys[k];
        var verticesArray = new Array((eval("siteVertices_" + pk).length) / 2);
        var m = 0;
        var centroidLat = 0;
        var centroidLng = 0;

        for (var n = 0; n < eval("siteVertices_" + pk).length; n += 2)
        {
            verticesArray[m] = new google.maps.LatLng(eval("siteVertices_" + pk)[n], eval("siteVertices_" + pk)[n + 1]);
            m = m + 1;
            centroidLat += eval("siteVertices_" + pk)[n];
            centroidLng += eval("siteVertices_" + pk)[n + 1];
        }

        var cent = new google.maps.LatLng(centroidLat/m, centroidLng/m);

        var overlay = new google.maps.Polygon({
            paths: verticesArray,
            strokeColor: "#FF0000",
            strokeOpacity: 0.5,
            strokeWeight: 1,
            fillColor: "#FF0000",
            fillOpacity: 0.20,
            position: cent,
            map:map });

        attachInfoWindow(overlay, k);
    }
}

function attachInfoWindow(overlay, number) {
  var infowindow = new google.maps.InfoWindow({ content: siteNames[number] });
  google.maps.event.addListener(overlay, 'click', function() { infowindow.open(map, overlay); });
}
    window.onload=initialize;
</script>

I really need to use jquery for a click event and can't understand why .load won't work.

MTIA!

EDIT - Apologies for the vagueness of "not working"! The initialize function does not seem to uhmmm... initialize. So the window.onload=initialize appears to work using include, but does not seem to work using .load.

I hope this is clearer.

Upvotes: 0

Views: 2033

Answers (3)

Ian Wood
Ian Wood

Reputation: 6573

window.onload=initialize;

that will execute on the browser triggering that event - as you load in via jquery that event has long passed. Simply change that line to:

initialize();

Upvotes: 1

alex
alex

Reputation: 490143

I'd say because the PHP script will look at its working path to include the path, whilst the JavaScript will look at the URL path.

Upvotes: 0

Christian
Christian

Reputation: 28125

If you give your code another look, the .load is done after the documents loads. Whereas the include is instantaneous.

This has many side-effects. I urge you to view the browser generated source for more details.

For one thing, you can't use <link/> tags in the body. Another thing, if Google Maps API makes use of document.ready functionality, it won't work any more.

Upvotes: 0

Related Questions