Changeset 313 for trunk/npemap.org.uk


Ignore:
Timestamp:
Nov 4, 2006, 3:32:55 PM (14 years ago)
Author:
David Sheldon
Message:

use ajax for submissions.

Location:
trunk/npemap.org.uk
Files:
2 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/npemap.org.uk/cgi/bad-postcode.fcgi

    r300 r313  
    6262    if ($sth->execute($cgi->param('postcode'), $ENV{'REMOTE_ADDR'}, $cgi->param('reason') || undef, $cgi->param('email') || undef)) {
    6363        print "Content-type: text/html\n\n";
    64         print "<html><head><title>Thank you</title></head>\n";
    65         print "<body><p>Thank you for reporting the bad post code!</p>\n";
    66         print "<p>$returnlink</p>\n";
    67         print "</body></html>";
     64        print "<body><p>Thank you for reporting that post code bad</p>\n";
    6865        next REQUEST;
    6966    } else {

  • trunk/npemap.org.uk/cgi/submit.fcgi

    r300 r313  
    3737REQUEST: while ($cgi = new CGI::Fast) {
    3838
    39     # If we're given return URL parameters, basic sanity check to stop
    40     # funny business
     39my $returnlink = '';
    4140   
    42     my $returnlink = '<a href="' . $returnBaseURL . '/tiles/map.html">Go back to the map</a>';   
    43 
    44     if (defined $cgi->param('easting') and ($cgi->param('easting') =~ /\d+/) and
    45         defined $cgi->param('northing') and ($cgi->param('northing') =~ /\d+/) ) {
    46         $returnlink = '<a href="' . $returnBaseURL . '/tiles/map.html#' . int($cgi->param('easting')/1000). ",".int($cgi->param('northing')/1000)  . ',1">Go back to the map</a>';
    47     }
    4841
    4942
    … …  
    136129    if ($sth->execute($outward, $inward, $cgi->param('postcode1'), $cgi->param('postcode2'), $easting, $northing, $ENV{'REMOTE_ADDR'}, $ENV{'HTTP_USER_AGENT'})) {
    137130        print "Content-type: text/html\n\n";
    138         print "<html><head><title>Thank you</title></head>\n";
    139         print "<body><p>Thank you for telling us where your post code is!</p>\n";
    140         print "<p>$returnlink</p>\n";
    141         print $googleAnalytics;
    142         print "</body></html>";
     131        print "<p>Thank you for telling us where your post code is!</p>\n";
    143132        # Any extra actions
    144133        build_home_stats($dbh);

  • trunk/npemap.org.uk/static/tiles/grid.css

    r297 r313  
    172172  list-style: url('../images/blue-marker.gif');
    173173}
     174
     175div#spinner {
     176  font-size: 75%;
     177  font-family: sans-serif;
     178}
     179
     180#spinner p {
     181 margin-top: 0.5em;
     182}
     183
     184div#status {
     185  height: 2em;
     186  background-color: #DDFF9b;
     187  border: 1px solid black;
     188  margin-top: 0.5em;
     189  font-size: 75%;
     190  font-family: sans-serif;
     191}
     192
     193#status p {
     194 margin-top: 0.5em;
     195 margin-left: 1em;
     196}

  • trunk/npemap.org.uk/static/tiles/map.html

    r297 r313  
    1212<script src="jsr_class.js" type="text/javascript"></script>
    1313<script src="jscoord-1.1.1.js" type="text/javascript"></script>
    14 <script src="connection.js" type="text/javascript"></script>
     14<script src="prototype.js" type="text/javascript"></script>
    1515<!-- Our functions -->
    1616<script src="mapTiles.js" type="text/javascript"></script>
    … …  
    5151         </table>
    5252
    53                 <div>
    54                 </div>
    55          <span class='hidden' id="spinner">Loading...</span>
    5653
    5754                <div><span style="display: none" id="permalink"></span>
    … …  
    7572    <ul><li class="blue"><a href="http://www.freethepostcode.org">freethepostcode.org</a> data</li><li class="green">our data</li></ul>
    7673        </div>
     74  <div id="spinner" class="status">
     75    <p>Status... </p>
     76  </div>
    7777</div>
    7878  <div id="postcode_detail_window">
    … …  
    8484    <a href="#" id="bad">Problem?</a>
    8585    <div class="report_form" id="report_form">
    86       <form method="post" action="../../cgi/bad-postcode.fcgi">
     86      <form method="post" action="../../cgi/bad-postcode.fcgi" id="bad_form">
    8787      <input type="hidden" name="postcode" id="postcode_id_detail" />
    8888      <label for="reason"><span title="Why you think it is incorrect">Problem:</span></label>
    … …  
    9696  </div>
    9797  <div id="postcode_form">
    98   <form method="post" action="../../cgi/submit.fcgi">
     98  <form method="post" action="../../cgi/submit.fcgi" id="postcode_submit">
    9999    <div class="close"><a href="javascript:closePostcodeWindow()" title="close">X</a></div>
    100100                <div><span id="location"></span></div>
    … …  
    126126  <div id="map">
    127127  </div>
     128
     129  <div id="status" name="status" style="display: none">
     130    <p>&nbsp;</p>
     131  </div>
    128132</div>
    129133<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">

  • trunk/npemap.org.uk/static/tiles/mapTiles.js

    r297 r313  
    5151var postcodeFormElement;
    5252var mainPageElement;
    53 var spinnerElement;
    54 
    55 
    56 // From prototype
    57 function $() {
    58   var results = [], element;
    59   for (var i = 0; i < arguments.length; i++) {
    60     element = arguments[i];
    61     if (typeof element == 'string')
    62       element = document.getElementById(element);
    63     results.push(element);
    64   }
    65   return results.length < 2 ? results[0] : results;
    66 }
    6753
    6854
    … …  
    10288   var lat = Math.round(latlong.lat*10000) / 10000;
    10389   var lng = Math.round(latlong.lng*10000) / 10000;
     90   
    10491
    10592    $('location').innerHTML = easting + ', ' + northing + " (" + lat + ", " + lng + ")";
    … …  
    114101
    115102}
     103
     104
     105YAHOO.util.Event.addListener('postcode_submit', 'submit', submitPostcodeAjax);
     106
     107function submitPostcodeAjax(e) {
     108  var el = $('postcode_submit');
     109  var data = Form.serialize(el);
     110  Element.show('status');
     111  $('status').innerHTML = "<p>Submitting postcode "+ $F('postcode1') + " " + $F('postcode2') + "...</p>";
     112 new Ajax.Request(el.getAttribute("action"), {
     113           method:"post",
     114           postBody:data,
     115           onComplete: function(o) {drawExisting(); updateStatus(o);  }
     116 });
     117 closePostcodeWindow();
     118 YAHOO.util.Event.preventDefault(e);
     119}
     120
     121var updateStatus = function(o) {
     122  $('status').innerHTML = o.responseText;
     123}
     124
    116125
    117126
    … …  
    204213function fixZoomButton() {
    205214  if(zoomLevel == 1) {
    206     $('zoomin_enabled').style.display= 'none';
    207     $('zoomin_disabled').style.display= '';
    208     $('showHideMarkers').style.display= '';
     215    Element.hide('zoomin_enabled');
     216    Element.show('zoomin_disabled');
     217    Element.show('showHideMarkers');
    209218        } else {
    210     $('zoomin_enabled').style.display = '';
    211     $('zoomin_disabled').style.display = "none";
    212     $('showHideMarkers').style.display= 'none';
     219    Element.show('zoomin_enabled');
     220    Element.hide('zoomin_disabled');
     221    Element.hide('showHideMarkers');
    213222  }
    214223}
    … …  
    249258                postcodeFormElement = $('postcode_form');
    250259    mainPageElement = $('main_page');
    251     spinnerElement = $('spinner');
    252260
    253261    updateShowMarkers();
    … …  
    336344        if (shouldWeShowMarkers()) {
    337345                var url = "../../cgi/get-postcodes.fcgi";
    338                 url += "?mineasting=" + minEasting + "000&maxeasting="  + maxEasting + "000&minnorthing=" + minNorthing + "000&maxnorthing=" + maxNorthing+"000";
    339                 var callback = {
    340                         success: successHandler ,
    341                         failure: failHander
    342                         }
     346                var params = "mineasting=" + minEasting + "000&maxeasting="  + maxEasting + "000&minnorthing=" + minNorthing + "000&maxnorthing=" + maxNorthing+"000";
    343347               
    344348                removeMarkers();
    345                 spinnerElement.className = 'loading';
    346                 spinnerElement.innerHTML = 'Loading...';
     349    $('spinner').innerHTML = "<p>Loading....</p>";
    347350                needCalibration = true;
    348351               
    349                 YAHOO.util.Connect.asyncRequest('GET', url, callback); 
    350   }
     352    var myAjax = new Ajax.Request(url, {
     353        method: 'get',
     354        parameters: params,
     355        onComplete: successHandler,
     356        onFailure: failHander
     357    });
     358       
     359  }
     360}
     361var successHandler = function(o){
     362  eval(o.responseText); 
     363}
     364
     365var failHander = function(o) {
     366  // Don't do anything
     367  $('spinner').innerHTML = '<p class="error">Problem showing existing data.</p>';
    351368}
    352369
    … …  
    369386
    370387function completeMarkers() {
    371         spinnerElement.className = 'hidden';
    372 }
    373 
    374 var successHandler = function(o){
    375   eval(o.responseText); 
    376 }
    377 
    378 var failHander = function(o) {
    379   // Don't do anything
    380   spinnerElement.className = 'error';
    381   spinnerElement.innerHTML = 'Problem showing existing data.';
    382 }
     388        $('spinner').innerHTML = "&nbsp;";
     389}
     390
    383391
    384392var markers = new Array();
    … …  
    588596  $('report_form').style.display = 'block';
    589597  $('bad').style.display = 'none';
     598  $('reason').focus();
    590599  return false;
     600}
     601
     602YAHOO.util.Event.addListener('bad_form', 'submit', submitBadPostcodeAjax);
     603
     604function submitBadPostcodeAjax(e) {
     605  var el = $('bad_form');
     606  var data = Form.serialize(el);
     607  Element.show('status');
     608  $('status').innerHTML = "<p>Submitting bad postcode...</p>";
     609 new Ajax.Request(el.getAttribute("action"), {
     610           method:"post",
     611           postBody:data,
     612           onComplete: updateStatus 
     613 });
     614 hideMarkerWindow();
     615 YAHOO.util.Event.preventDefault(e);
    591616}
    592617
Note: See TracChangeset for help on using the changeset viewer.