Creating a div refresh button

travicross · February 24, 2011

I am working on a website for my landscape architecture master's thesis centered around the Google Earth API. Through out the site I have various test questions that I pass along as hidden fields from page to page to be entered into my database at the end. My problem is: I am trying to create a button that refreshes my Google earth div container ("APEarth") without refreshing the whole page. Currently, the button refreshes the whole page creating null entries for all the previous test questions. Any help would be greatly appreciated. My code is below. Just as a side note, my skills are very limited, so specific coding help would be greatly appreciated.

<?php /*?>The items below are all the AP Elements in the Design View that make up the website <?php */?>

<!--

#APBody {

position:absolute;

left:0px;

top:0px;

width:1000px;

height:700px;

z-index:1;

margin-top: 12pt;

margin-left: 12pt;

}

#APUpperTitleBlock {

position:absolute;

left:0px;

top:0px;

width:1000px;

height:50px;

z-index:2;

}

#APBottomTitleBlock {

position:absolute;

left:0px;

width:1000px;

height:50px;

z-index:6;

bottom: 0px;

}

#APEarth {

position:absolute;

top:73px;

width:800px;

height:577px;

z-index:4;

right: 0px;

border-color: #000;

border-width: 2 px;

}

#ApContinue {

position:absolute;

left:0px;

top:51px;

width:1000px;

height:18px;

z-index:8;

text-align: right;

}

#APLayers {

position:absolute;

left:0px;

top:73px;

width:200px;

height:576px;

z-index:9;

font-family: Arial, "Arial Bold", "Arial Bold Italic", "Arial Black", "Arial Italic";

font-size: 14px;

font-weight: bold;

}

-->

</style>

<title>Scenario Three</title>

<!--

#APBody #APLayers p {

font-weight: normal;

font-family: Arial, "Arial Bold", "Arial Bold Italic", "Arial Black", "Arial Italic";

}

#GoogleEarthReset {

position:absolute;

left:4px;

top:4px;

width:192px;

height:13px;

z-index:1;

}

-->

</style>

<!--

function MM_openBrWindow(theURL,winName,features) { //v2.0

window.open(theURL,winName,features);

}

//-->

</script>

<?php /*?>Begin hidden pretest answers<?php */?>

<?php /*?>Begin hidden Scearnio One Test answers<?php */?>

<?php /*?>Begin hidden Scenario Two Test answers<?php */?>

<?php /*?>Continue to Scenario Three Button<?php */?>

</form>

</div>

<p>

<br />

<a href="GEHelpVideo.html" target="_blank">Google Earth Help Video</a><a href="GEHelpVideo.html"></a></p>

</form>

<p><strong>Introduction: </strong></p>

<p><em>Problem and/or Opportunity Identification:</em></p>

<p>The Big Hollow drainage-way provides a unique opportunity for dense development. Its proximity to the urban core of State College and The Pennsylvania State University allows for continuity of development and alternative transportation. It also contains the necessary infrastructure to accomodate new development. </p>

<p><em>Goal Establishment:<br />

</em><br />

1. Expand and enhance the availability of different housing types and<br />

<br />

2. Expand and enhance urban district growth with new commercial and industrial development.</p>

</div>

</div>

<?php /*?>End Design View Elements<?php */?>

<?php /*?>The following is the codefor Google Earth on GoDaddy.com<?php */?>

//Google Earth HTML

var ge;

google.load("earth", "1");

function init() {

google.earth.createInstance('APEarth', initCB, failureCB);

}

function initCB(instance) {

ge = instance;

ge.getWindow().setVisibility(true);

// add a navigation control

ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

// add an overview map

ge.getOptions().setOverviewMapVisibility(true);

//add the status bar

ge.getOptions().setStatusBarVisibility(true);

//add the scale legend

ge.getOptions().setScaleLegendVisibility(true);

ge.getOptions().setUnitsFeetMiles(true);

// add some standsard google earth layers

ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);

ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

//add Big Hollow Well data KML File

var href1 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Scenario3Wells.kml';

google.earth.fetchKml(ge, href1, function(kmlObject) {

if (kmlObject)

ge.getFeatures().appendChild(kmlObject);});

//add Big Hollow existing zoning KML File

var href3 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Scenario3ExLanduse.kml';

google.earth.fetchKml(ge, href3, function(kmlObject) {

if (kmlObject)

ge.getFeatures().appendChild(kmlObject);});

//add Big Hollow proposed zoning KML File

var href4 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Scenario3PropLanduse.kml';

google.earth.fetchKml(ge, href4, function(kmlObject) {

if (kmlObject)

ge.getFeatures().appendChild(kmlObject);});

//add Big Hollow Video Placemark KmL File

// var href5 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Landuse_Conflict_Video.kml';

// google.earth.fetchKml(ge, href5, function(kmlObject) {

// if (kmlObject)

// ge.getFeatures().appendChild(kmlObject);});

//add Big Hollow Existing Buildings KML File

var href6 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Scenario3ExBuildings.kml';

google.earth.fetchKml(ge, href6, function(kmlObject) {

if (kmlObject)

ge.getFeatures().appendChild(kmlObject);});

//add Big Hollow Proposed Buildings KML File

var href7 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Scenario3PropBuildings.kml';

google.earth.fetchKml(ge, href7, function(kmlObject) {

if (kmlObject)

ge.getFeatures().appendChild(kmlObject);});

//add Big Hollow Potential Sinkhole KML File

var href8 = 'http://www.iecoplanningstudio.com/Google_Earth_Files/Potential_Sinkhole.kml';

google.earth.fetchKml(ge, href8, function(kmlObject) {

if (kmlObject)

ge.getFeatures().appendChild(kmlObject);});

///--------------------------------------------------------------------------------------------------------

//Test Placemark

var placemark = ge.createPlacemark('');

// Define a custom icon.

var icon = ge.createIcon('');

icon.setHref('http://maps.google.com/mapfiles/kml/shapes/movies.png');

var style = ge.createStyle(''); //create a new style

style.getIconStyle().setIcon(icon); //apply the icon to the style

placemark.setStyleSelector(style); //apply the style to the placemark

// Set the placemark's location.

var point = ge.createPoint('');

point.setLatitude( 40.800827);

point.setLongitude(-77.881896);

placemark.setGeometry(point);

// Add the placemark to Earth.

ge.getFeatures().appendChild(placemark);

placemark.setName('Land Use Video!');

google.earth.addEventListener(placemark, 'click', function(event) {

// prevent the default balloon from popping up

event.preventDefault();

var balloon = ge.createHtmlStringBalloon('');

balloon.setFeature(placemark); // optional

balloon.setMaxWidth(400);

// YouTube video embed... the in the beginning is a fix for IE6

balloon.setContentString(

' <object width="400" height="300"><param name="movie" '

+ 'value="

+ '<param name="allowFullScreen" value="true"/>'

+ '<embed src="http://www.youtube.com/watch?v=oN3TNoRudfE?hl=en&fs=1" '

+ 'type="application/x-shockwave-flash" allowfullscreen="true" '

+ 'width="400" height="300"></embed></object>');

ge.setBalloon(balloon);

});

///--------------------------------------------------------------------------------------------------------

//Get the Current View

var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);

//Set New Latitude and Longitude

lookAt.setLatitude(40.794709);

lookAt.setLongitude(-77.887323);

lookAt.setRange(10000);

// Add to the current tilt

lookAt.setTilt(lookAt.getTilt() + 60);

//Update View

ge.getView().setAbstractView(lookAt);

}

function failureCB(errorCode) {

}

google.setOnLoadCallback(init);

//End Google Earth Coding

</script>

litebearer · February 24, 2011

Just a thought... Perhaps using ajax to just refresh the one div

Sign In

Creating a div refresh button

Recommended Posts

travicross

Link to comment

Share on other sites

litebearer

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information