SitePoint Sponsor

User Tag List

Page 2 of 4 FirstFirst 1234 LastLast
Results 26 to 50 of 77
  1. #26
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Ok, I've done that, but that only leaves me with the option of viewing the source code.
    Isn't there some PHP code which generates that HTML?

  2. #27
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP is minimal; I'm only using it to build the form, and initialise the post code values.

    For the sake of completeness, here's the code for the page in question:
    Code:
    <?php
    	$attributes['route'] = array(
    		'name' => 'form-route',
    		'id' => 'form-route',
    		'class' => 'form-route'
    	);
    ?>
    			<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="<?php echo config_item('base_url'); ?>library/images/ui/transport/car.png" alt="Car" width="30" height="30" /></li>
    								<li><img id="trans-bus" src="<?php echo config_item('base_url'); ?>library/images/ui/transport/bus.png" alt="Bus or Train" width="30" height="30" /></li>
    							</ul>
    							<script type="text/javascript">
    								imgpath = '<?php echo config_item('base_url'); ?>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>
    							<dl>
    								<dt><label for="route-start">Start</label></dt>
    								<dd><input type="text" id="route-start" value=""></dd>
    								<dt><label for="route-end">Destination</label></dt>
    								<dd><input type="text" id="route-end" value=""></dd>
    							</dl>
    							<div id="button">
    								<?php $button = array ('name' => 'submit', 'value' => 'Plan Route', 'class' => 'button'); echo form_submit($button); ?>
    							</div> <!-- button -->
    						</div> <!-- .column-left -->
    						<div id="directions"></div>
    						<div class="cleaner"></div>
    					</fieldset>
    				</form>
    				<script type="text/javascript">
    					document.getElementById('route-start').value = "<?php echo $_POST['s']; ?>";
    					document.getElementById('route-end').value = "<?php echo $_POST['e']; ?>";
    				</script>
    			</div> <!-- box-modal -->
    			<script type="text/javascript">
    				$(document).ready(function() {
    					initialize(); 
    				});
    				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: \n\n"+status);
    							}
    						}
    					});
    				}
    			</script>

  3. #28
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Sorted!
    That helps a lot.
    I've got to scoot out now, but I'll have a look at this when I get back and I'll post back later.

  4. #29
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Ok, I've had a look at it.
    In addition to the PHP code you posted you must be doing something like this:

    PHP Code:
    <?php include (TEMPLATEPATH 'header.php' ); ?>
    ...
    The code you posted
    ...
    <?php include (TEMPLATEPATH 'footer.php' ); ?>
    Remove both the header and footer includes. You don't need them.
    You can just have "bookings/maps/routes/5" return a lump of HTML to display in FancyBox.
    As it is you are having "bookings/maps/routes/5" return a complete page (with JavaScript includes).
    Including these JavaScripts in your page for a second time is causing things to break.

  5. #30
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The application can't function without the header and footer; they're essential.

    Where are you seeing a duplication of JavaScript?

  6. #31
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    I'm not suggesting that you move them from your main page, but they are not necessary for the PHP script sitting behind "bookings/maps/routes/5" which you want to display in the FancyBox (unless of course you want to load this page directly elsewhere in your app).

    To see what I mean:
    Select the post code (per the instructions you sent me), then right-click the "Journey Planner" button and open it in a separate tab.
    Then look at the page source.

    I see:

    url: www.yourdomain/bookings/maps/routes/5

    HTML Code:
    <!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>Journey &raquo; Client Control Panel &mdash; To Book</title>
        <style rel="stylesheet" type="text/css">
          @import url("http://www.yourdomain/library/styles/styles.css");
        </style>
        <link rel="stylesheet" type="text/css" href="http://www.yourdomain/library/styles/anytime.css" />
        <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 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <!-- Load ScrollTo -->
        <script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
        <!-- Load LocalScroll -->
        <script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
        <script type="text/javascript" src="http://www.yourdomain/library/scripts/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
        <script type="text/javascript" src="http://www.yourdomain/library/scripts/anytime.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      </head>
      <body>
        <div id="application-surround-modal">
          <div id="application-container-modal">
          <div class="box-modal">
            <h2>Route Planning</h2>
    Whereas the PHP code you posted starts:

    Code:
    <?php
      $attributes['route'] = array(
        'name' => 'form-route',
        'id' => 'form-route',
        'class' => 'form-route'
      );
    ?>
    <div class="box-modal">
      <h2>Route Planning</h2>
      <div id="map-container">
        <div id="map" class="map"></div>
      </div>
    If I view the page source of www.yourdomain/bookings/maps/routes/5, copy the HTML from between the two <body> tags into "test.php" (so, minus the JS includes etc) and have that open in FancyBox, then everything works as expected.

  7. #32
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see what you mean, but it's not possible to do that because of the framework.

    I discovered, through testing, that some users can't "see" Fancy Box, and the floating windows open as regular windows or tabs in their web browser. If I didn't include the headers and footers, those windows and tabs wouldn't function properly.

    Also, I use the same principle throughout the entire application without any problems. I even use Google Maps in a Fancy Box elsewhere, with no errors.

    I may need to send you additional sign-in details to see what I mean.

  8. #33
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Forbes View Post
    I see what you mean, but it's not possible to do that because of the framework.
    Does this mean that it's the framework inserting the header and footer and you have no way to influence this in your code?
    This would be unfortunate.

    Quote Originally Posted by Forbes View Post
    Also, I use the same principle throughout the entire application without any problems. I even use Google Maps in a Fancy Box elsewhere, with no errors.
    It's not Google Maps that's causing things to crash, I think it's the fact that you are re-including jQuery and/or FancyBox (as you are getting errors which would point to this, such as "Uncaught TypeError: Property 'undefined' of object #<Object> is not a function").

  9. #34
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I included some styling to function name references.

    I've created a switch in the way the "views" (analogous to the include() and require() functions) so that the various links, scripts and styles can be controlled, and it appears to be working, although the default location still isn't loading.

    Slowly but surely, things are coming together.
    Last edited by Forbes; Feb 8, 2013 at 05:24. Reason: Formatting

  10. #35
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to be clear, I use a Fancy Box to manage a location finder which uses Googles Maps. As far as I'm aware, there are no errors.

  11. #36
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Having trimmed down the scripts, links, and styles to the bare minimum, I've found that the error relates to line 64 in the Fancy Box file:

    Code:
    $(document).ready(function() {
    However, the edit file which uses exactly the same code does not have any similar error.

  12. #37
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Currently when I look at the page, I see either just a bit of Google maps, or nothing (depending on which location I chose).
    But, at least we've now made FancyBox behave as it should

    Could you post the complete PHP code from "bookings/maps/routes/5", unless it hasn't changed, in which case I'll copy it from your previous post.

  13. #38
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In addition to trimming the header, I added a few conditional statements to handle the lack of post codes, if the visitor opens the page in a window or tab:
    Code:
    <?php
        $attributes['route'] = array(
            'name' => 'form-route',
            'id' => 'form-route',
            'class' => 'form-route'
        );
    
    
        if (!empty($_POST['s'])):
            $s = $_POST['s'];
        else:
            $s = '';
        endif;
    
    
        if (!empty($_POST['e'])):
            $e = $_POST['e'];
        else:
            $e = '';
        endif;
    
    
    ?>
                <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="<?php echo config_item('base_url'); ?>library/images/ui/transport/car.png" alt="Car" width="30" height="30" /></li>
                                    <li><img id="trans-bus" src="<?php echo config_item('base_url'); ?>library/images/ui/transport/bus.png" alt="Bus or Train" width="30" height="30" /></li>
                                </ul>
                                <script type="text/javascript">
                                    imgpath = '<?php echo config_item('base_url'); ?>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>
                                <dl>
                                    <dt><label for="route-start">Start</label></dt>
                                    <dd><input type="text" id="route-start" value=""></dd>
                                    <dt><label for="route-end">Destination</label></dt>
                                    <dd><input type="text" id="route-end" value=""></dd>
                                </dl>
                                <div id="button">
                                    <?php $button = array ('name' => 'submit', 'value' => 'Plan Route', 'class' => 'button'); echo form_submit($button); ?>
                                </div> <!-- button -->
                            </div> <!-- .column-left -->
                            <div id="directions"></div>
                            <div class="cleaner"></div>
                        </fieldset>
                    </form>
                    <script type="text/javascript">
                        document.getElementById('route-start').value = "<?php echo $s; ?>";
                        document.getElementById('route-end').value = "<?php echo $e; ?>";
                    </script>
                </div> <!-- box-modal -->
                <script type="text/javascript">
                    $(document).ready(function() {
                        initialize(); 
                    });
                    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: \n\n"+status);
                                }
                            }
                        });
                    }
                </script>

  14. #39
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    I've copied that to "test.php" which is the file I am sending the AJAX request to locally (would be "bookings/maps/routes/5" for you).
    However, when I go through the steps detailed previously (enter postcode etc), FancyBox opens and I see:

    Route Planning
    Start
    Choose your mode of transport
    Enter your address or post code

    But no Google Maps (i.e. the map doesn't display at all and I can't reproduce your issue).

    Is your framework adding anything else to the file?

    When I do the same thing on the live site, then examine what pops up in FancyBox using Chrome's Dev Tools, I see:

    HTML Code:
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Journey  Client Control Panel — To Book</title>
    <style rel="stylesheet" type="text/css">
      @import url("http://www.yourdomain/library/styles/styles.css");
    </style>
    <div id="application-surround-modal">
    <div id="application-container-modal">
    			<div class="box-modal">
    				<h2>Route Planning</h2>
    all of which is missing from the PHP you posted.

    I just need to be able to reproduce your error.

  15. #40
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I said earlier, I've stripped the header down, yet I see an error on line 64.

    However, the error doesn't happen on the location finder that I mentioned earlier.

  16. #41
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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

  17. #42
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  18. #43
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code 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:

    Code JavaScript:
    <script type="text/javascript">
      $(document).ready(function() {
        setTimeout(initialize, 3000);
      });

    Does that have any effect?

  19. #44
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #45
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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

  21. #46
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, don't worry about my time. I'm more concerned with taking up yours!

  22. #47
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    So, the good news is, I've got it working.

    This is what I've done:
    • 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
    The page now works like this:
    • 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.
    Here's the code:

    index.html

    Code:
    <!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 &raquo; Client Control Panel &mdash; 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 &dagger;</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: \n\n"+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

    Code:
    <?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.

  23. #48
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Forbes View Post
    You asked me to remove the header and footer, which I can't do.
    Have you though of changing them from include to include_once calls - that will prevent them being included multiple times in the same page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  24. #49
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Felgall, hi.

    As I explained earlier, I'm using a framework that does not permit those kind of changes.

  25. #50
    It's been real... Forbes's Avatar
    Join Date
    Dec 2004
    Location
    Yorkshire, England
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •