Where are you seeing the error?
I see nothing.
Can you let me know what’s in the stripped down/header footer?
I need to be able to reproduce your error to help you.
I’m going to try copying the generated by “bookings/maps/routes/5” into “test.php” and see if that helps
If you open the Fancy Box in it’s own tab, you’ll see all of the code.
As for the error, I posted the line number and error earlier. I use the error console in Safari, which displays the error and its location.
Hi,
If you open it in its own tab then you will see an error, I’m afraid, as the page loads in its own right and we have removed all of the JS includes.
The error you are seeing only says that jQuery has not been included.
You don’t see this error if you open “bookings/maps/routes/5” in the FancyBox however, as it can reference the jQuery from its parent page.
I did make some progress however.
At the end of your code in post#38 you have a load of JavaScript:
<script type="text/javascript">
$(document).ready(function() {
initialize();
});
...
I moved this into the main file and wrapped the call to initialize in a setTimeout() after the FancyBox had fired.
This worked as expected and the map loaded.
The problem now seems to be that you are trying to load the Google Maps into a <div> before the <div> actually exists in the DOM.
Keep the above code where it is for now, but try changing it to:
<script type="text/javascript">
$(document).ready(function() {
setTimeout(initialize, 3000);
});
Does that have any effect?
Hi Pullo, I’m confused.
You asked me to remove the header and footer, which I can’t do. So instead, I trimmed them down. But now you’re saying it’s because they don’t contain the references to JavaScript that Google Maps isn’t working. But if I’d removed the header and footer, that would have done the same thing.
I’ve done as you ask, but now I’m getting an error in “main.js — maps.static.com”.
I’ve also uploaded the changes, so you can see for yourself.
Hi,
I’m away from the PC for a few hours.
I’ll have a play with this this evening and post back then.
I appreciate that it must be quite frustrating, as we are quite close to sorting this out (I also appreciate that you don’t have unlimited time), but I am still confident 
Hey, don’t worry about my time. I’m more concerned with taking up yours!
Hi there,
So, the good news is, I’ve got it working.
This is what I’ve done:[LIST]
[]I have stripped everything out of your initial page apart from the input box where you can enter your postcode, the radio buttons where you can select the hotel and the “Journey Planner” button. The reason for this, is so that we can make a bare-bones working example, then slowly integrate it back into your framework, checking to see if it breaks at regular intervals.
[]I have moved the entire JavaScript pertaining to Google Maps out of the PHP file and into the first file.
[*]I discovered an “onComplete” call back function for FancyBox. I am now using this to call the initialize() function once the form has loaded in FancyBox
[/LIST]The page now works like this:
[LIST]
[]Enter your postcode into the input field, select your hotel, then press “Plan Route”.
[]This will shoot off an AJAX call to “test.php”, passing the postcode entered as the variable “s” and the postcode of the hotel as the variable “e”.
[]test.php will then display a form, with an empty holder for the map <div id="map" class="map"></div>.
[]Back in the original file, once FB has finished loading, the initialize() function will fire and will insert its code into the aforementioned div.
[*]When you click on “Calculate route” the route will be calculated and displayed.
[/LIST]Here’s the code:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Manage Bookings » Client Control Panel — To Book</title>
<style rel="stylesheet" type="text/css">@import url("http://www.yourdomain.com/library/styles/styles.css");</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://www.yourdomain.com/library/scripts/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="http://www.yourdomain.com/library/scripts/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>#fancybox-overlay{ position:fixed}</style>
</head>
<body>
<div id="application-surround">
<div id="application-container">
<div id="add">
<form action="http://www.yourdomain.com/bookings/add/5" method="post" accept-charset="utf-8" name="form-bookings" id="form-bookings" class="form-bookings">
<div id="column-central">
<fieldset>
<label for="post_code">Post Code †</label><br />
<input type="text" name="post_code" value="" id="post_code" class="post_code" />
<div id="map_routes_button">
<div id="button-link"><a class="fancybox button-link" id="button" href="test.php" title="Plan your journey">Journey Planner</a></div>
</div>
</fieldset>
</div> <!-- column-central -->
<div id="column-supplement">
<fieldset>
<div id="previewer">
<div class="column-left">
<div class="venue_item" id="venue_item_1_0">
<input type="radio" name="venue_id" class="button_1_0" id="radio_1_0" value="165" data-postcode="DE23 6AD"/>
<div><h5>INTERNATIONAL HOTEL, DERBY</h5></div>
</div> <!-- .venue_item -->
<div class="venue_item" id="venue_item_1_1">
<input type="radio" name="venue_id" class="button_1_1" id="radio_1_1" value="155" data-postcode="Postcode"/>
<div><h5>OTHER, TOWN/CITY</h5></div>
</div> <!-- .venue_item -->
<div class="venue_item" id="venue_item_1_2">
<input type="radio" name="venue_id" class="button_1_2" id="radio_1_2" value="164" data-postcode="CO7 7QY"/>
<div><h5>RAMADA, COLCHESTER</h5></div>
</div> <!-- .venue_item -->
</div> <!-- .column-left -->
</div> <!-- previewer --><!-- previewer -->
</fieldset>
</div> <!-- column-supplement -->
</form>
<div class="cleaner"></div>
</div> <!-- add -->
</div> <!-- booking -->
</div> <!-- application-container -->
<script type="text/javascript">
var la = '52.43564';
var lo = '-1.64363';
var venue = "To Book Limited";
var trans = google.maps.DirectionsTravelMode.DRIVING;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var latlng = new google.maps.LatLng(la,lo);
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT
}
};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: venue
});
}
function calcRoute() {
var start = document.getElementById("route-start").value;
var end = document.getElementById("route-end").value;
var request = {
origin: start,
destination: end,
travelMode: trans
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
if (status == 'ZERO_RESULTS') {
alert('No route could be found between the origin and destination.');
} else if (status == 'UNKNOWN_ERROR') {
alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');
} else if (status == 'REQUEST_DENIED') {
alert('This webpage is not allowed to use the directions service.');
} else if (status == 'OVER_QUERY_LIMIT') {
alert('The webpage has gone over the requests limit in too short a period of time.');
} else if (status == 'NOT_FOUND') {
alert('At least one of the origin, destination, or waypoints could not be geocoded.');
} else if (status == 'INVALID_REQUEST') {
alert('The DirectionsRequest provided was invalid.');
} else {
alert("There was an unknown error in your request. Requeststatus: \
\
"+status);
}
}
});
}
$("#button").click(function(ev) {
console.log("here");
s = $("#post_code").val();
e = $('input[name=venue_id]:checked').attr('data-postcode')
ev.preventDefault();
$.fancybox(this, {
ajax: {
type : "POST",
data : 's=' + s + '&e=' + e
},
onComplete: function(){
initialize();
}
});
});
</script>
</body>
</html>
test.php
<?php
$s = $_POST['s'];
$e = $_POST['e'];
?>
<div class="box-modal">
<h2>Route Planning</h2>
<div id="map-container">
<div id="map" class="map"></div>
</div>
<form action="/route" onSubmit="calcRoute(); return false;" id="form-route">
<fieldset>
<legend>Start</legend>
<div class="column-left">
<ol>
<li>Choose your mode of transport</li>
<li>Enter your address or post code</li>
</ol>
<ul id="transport">
<li><img id="trans-car" src="http://www.yourdomain.com/library/images/ui/transport/car.png" alt="Car" width="30" height="30" /></li>
<li><img id="trans-bus" src="http://www.yourdomain.com/library/images/ui/transport/bus.png" alt="Bus or Train" width="30" height="30" /></li>
</ul>
<dl>
<dt><label for="route-start">Start</label></dt>
<dd><input type="text" id="route-start" value="<?php echo $s; ?>"></dd>
<dt><label for="route-end">Destination</label></dt>
<dd><input type="text" id="route-end" value="<?php echo $e; ?>"></dd>
</dl>
<div id="button">
<input type="submit" name="submit" value="Plan Route" class="button">
</div> <!-- button -->
</div> <!-- .column-left -->
<div id="directions"></div>
<div class="cleaner"></div>
</fieldset>
</form>
<script type="text/javascript">
imgpath = 'http://www.yourdomain.com/library/images/ui/transport/';
document.getElementById('trans-car').onclick = function() {
trans = google.maps.DirectionsTravelMode.DRIVING;
this.src = imgpath+'car2.png';
if (document.getElementById('trans-bus').src == imgpath+'bus2.png') {
document.getElementById('trans-bus').src = imgpath+'bus.png';
}
}
document.getElementById('trans-bus').onclick = function() {
trans = google.maps.DirectionsTravelMode.TRANSIT;
this.src = imgpath+'bus2.png';
if (document.getElementById('trans-car').src == imgpath+'car2.png') {
document.getElementById('trans-car').src = imgpath+'car.png';
}
}
</script>
</div> <!-- box-modal -->
I have also uploaded a demo to my servers, just so you can see it in action.
I hope this helps you somewhat.
I don’t know how much of this you can implement using a framework, but hopefully this should give you a good understanding of the fundamentals and point you in the right direction.
Have you though of changing them from include to include_once calls - that will prevent them being included multiple times in the same page.
Felgall, hi.
As I explained earlier, I’m using a framework that does not permit those kind of changes.
Pullo, thanks for this.
While I couldn’t just strip it back to the bare bones, it worked almost straight away.
I’ve uploaded the changes.
So are we good?
I think we’re done, yes.
It’s even allowing more than one attempt, which it didn’t before.
In reality, no-one should want to change their own post code, but they may want to choose another hotel. So this allows them to do that.
Pullo, the client and myself have just done some testing in Internet Explorer (9 and 10) and it’s not working.
Fancy Box just loads like a web page and the post codes aren’t sent.
Hi there,
I just tested http://www.yourdomain.com/bookings/add/5 in Internet Explorer 7 - 10 and it worked fine in every one.
It must be an in browser setting.
Is it your browser or your clients?
Can you give me some more info about what is going wrong, as well as the browser version?
As I said in the original message, it’s Internet Explorer (9 and 10), and Fancy Box just loads like a web page and the post codes aren’t sent (which previously resulted in an “undefined” error, before I added back in the conditional statements to stop that).
We’re both testing independently.
Oops. Missed that
However, for me everything works as expected and I can’t reproduce your error.
This makes it kind of difficult to help you.
Could you detail the exact steps I need to take to reproduce the problem?
Oh, and just in case:
We are talking about the same page, aren’t we?
http://www.mydomain.com/bookings/add/5
I’m using my version, which is the only one they need to see.
And since it’s working for the client and myself in both Chrome and Safari, I expect the error is specific to Internet Explorer.
As for the steps, I’m just doing what is required.
I’ve just tried your own version and that doesn’t work in Internet Explorer either, doing the exact same as my own.
Ok, well that helps, because we cut out a lot of factors as to what could be going wrong (my page is essentially a very stripped down version of yours)
Nonetheless, I’m simply not able to reproduce your issue.
I could send you a screen shot of either page working in IE 9 /10, but that won’t help.
I would guess that based on the information we have now, there is some setting in your browser causing this behaviour.
I have a laptop with IE8 installed.
I’ll go check on that and post back in a bit.
Pullo, did you get my direct message from earlier?