Need help with Child Web Page Updating Parent Webpage in PHP and Javascript

Hello,

Need help with simple 2 page PHP / Javascript webpage application.

I have a parent webpage with a Google Map on it.  The map is populated with markers.  Each marker has an event listener which opens a child webpage.  The child webpage is essentially a combobox, a few text input fields, and a submit button.

Here's the challenge: I need to submit the child webpage's form to update my database AND change the marker color on the parent webpage without reloading the parent.

I was able to figure out updating the parent without reloading it, however, the submit button has me perplexed.  I can't seem to do both.

I'm attaching my files below.

Thank you for your time,
Jason


PARENT WEBPAGE
<?php 
//========================================================================================
// MAPS
//----------------------------------------------------------------------------------------
// Requires Authentication thru login.php
//========================================================================================

//-- SET TIMEZONE ----------------------------------
date_default_timezone_set('America/New_York');

//--- AUTHENTICATE ---------------------------------
include("header.php");

//--- WRITE HEADER ---------------------------------
writeheader("Maps");

?>
<H1>Maps</H1>
<div id="map" style="width: 800px; height: 600px;"></div>
<br/><br/>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript">
  var delay = 100;
  var infowindow = new google.maps.InfoWindow();
  var mapOptions = {
    zoom: 5,
    center: 'Binghamton, New York, United States',
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var geocoder = new google.maps.Geocoder(); 
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var bounds = new google.maps.LatLngBounds();

  function geocodeAddress(address, cid, d2dstatus, next) {
    geocoder.geocode({address:address}, function (results,status)
      { 
         if (status == google.maps.GeocoderStatus.OK) {
          var p = results[0].geometry.location;
          var lat=p.lat();
          var lng=p.lng();
          var url="http://www.squeezeoj.com/maps_d2d_popup.php?id="+cid;
          createMarker(lat,lng,url,d2dstatus);
          //alert(cid);
          //alert(d2dstatus);
        }
        else {
           if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
            nextAddress--;
            delay++;
          } else {
                        }   
        }
        next();
      }
    );
  }
 function createMarker(lat,lng,url,d2dstatus) {


   //---Define Google Map Markers...
   //   Code lifted from http://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default-dot-marker

   var pinColorRed = "990000";     // Red Pin with Black Dot
   var pinImageRed = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColorRed,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));

   var pinColorBlue = "000099";     // Blue Pin with Black Dot
   var pinImageBlue = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColorBlue,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));

   var pinColorGreen = "009900";     // Green Pin with Black Dot
   var pinImageGreen = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColorGreen,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));

   var pinColorYellow = "FFFF00";     // Yellow Pin with Black Dot
   var pinImageYellow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColorYellow,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));

   //---Decide What Color Each Pin will be based on Door-To-Door Status...
   var myColor = pinImageGreen
   switch(d2dstatus)
   {
   case 'Not Visited': 
     myColor = pinImageGreen;
     break;
   case 'Not Home': 
     myColor = pinImageYellow;
     break;   
   case 'Never Return': 
     myColor = pinImageRed;
     break;   
   case 'Talked With': 
     myColor = pinImageBlue;
     break;   
   }

   //---Create Marker in Correct Color and Add Event Listener...
   var marker = new google.maps.Marker({
     position: new google.maps.LatLng(lat,lng),
     icon: myColor,
     map: map,
     url: url,
           });
   google.maps.event.addListener(marker, 'click', function() {

   //---Open Window, Populate with HTML and Tie-Back to Maps Page...
   window.open(this.url,'_blank');

    var button = win.document.getElementById('mySubmit');    // DOES NOT WORK!!!
    
    //---This will Change the Color of the Marker in the Parent Window and Close this Child Window...
    button.onclick = function() {
      var myColor = win.document.getElementById('d2d_status').value;
      switch(myColor)
      {
      case 'Talked With': 
        marker.setIcon(pinImageBlue);
        break;   
      case 'Not Home': 
        marker.setIcon(pinImageYellow);
        break;   
      case 'Never Return': 
        marker.setIcon(pinImageRed);
        break;   
      case 'Not Visited Yet': 
        marker.setIcon(pinImageGreen);
        break;
      }
      win.close();
    }

   });

   bounds.extend(marker.position);

 }

<?php

//--- ESTABLISH SQL CONNECTION ---------------------------------
$con = mysql_open_con();

//--- BUILD SQL ----------------------------------------------
$strSelect = "SELECT `CID`,`First`,`Last`,`Street1`,`Street2`,`City`,`State`,`Zip`,`D2D_Status`";
$strFrom = "FROM `Citizens`";
$strOrder = "ORDER BY First, Last";
$strSQL = "$strSelect $strFrom $strOrder";

//--- GET DATA FROM DATABASE ---------------------------------
$result = mysql_query($strSQL);
$num_rows = mysql_num_rows($result);

//--- PRINT RESULTS AS TABLE ---------------------------------
if ($num_rows == 0)
{
echo("No Citizens");
}
else
{
//---Display Results...
$i=1;
$myLocations = "  var locations = [";
$myURLs = "  var urls = [";
$myD2DStatus = "  var d2dstatus = [";
while($row = mysql_fetch_array($result))
  {
  $varID = $row['CID'];
  $varFirst = $row['First'];
  $varLast = $row['Last'];
  $varStreet1 = $row['Street1'];
  $varStreet2 = $row['Street2'];
  $varCity = $row['City'];
  $varState = $row['State'];
  $varZip = $row['Zip'];
  $varD2DStatus = $row['D2D_Status'];
  if ($i <> $num_rows)
  {
    $myLocations = $myLocations . "'"."$varStreet1,"."$varCity,"."$varState"." $varZip"."',";
    $myURLs = $myURLs."'"."$varID"."',";
    $myD2DStatus = $myD2DStatus."'"."$varD2DStatus"."',";
  }
  else
  {
    $myLocations = $myLocations . "'"."$varStreet1,"."$varCity,"."$varState"." $varZip"."'";
    $myURLs = $myURLs."'"."$varID"."'";
    $myD2DStatus = $myD2DStatus."'"."$varD2DStatus"."'";
  }
  $i=$i+1;

//--- DEBUG: Use only First Record in Table ---//
//$myURLs = $myURLs."'"."$varID"."'";
//break;
//---------------------------------------------//
  }
}
$myLocations = $myLocations . "  ];";
$myURLs = $myURLs . "  ];";
$myD2DStatus = $myD2DStatus . "  ];";
echo $myLocations."\n";
echo $myURLs."\n";
echo $myD2DStatus."\n";

//--- CLOSE SQL CONNECTION ------------------------------------
mysql_close($con);

?>

  var nextAddress = 0;
  function theNext() {
    if (nextAddress < locations.length) {
      setTimeout('geocodeAddress("'+locations[nextAddress]+'","'+urls[nextAddress]+'","'+d2dstatus[nextAddress]+'",theNext)', delay);
      nextAddress++;
    } else {
      map.fitBounds(bounds);
    }
  }
  theNext();

</script>

<?php  include("footer.php"); ?>

Open in new window



CHILD WEBPAGE:
<?php 
//========================================================================================
// DOOR-TO-DOOR POPUP FORM
//----------------------------------------------------------------------------------------
// Requires Authentication thru login.php
// Action is Performed by maps_d2d_popup_action.php
//========================================================================================

//-- SET TIMEZONE ----------------------------------
date_default_timezone_set('America/New_York');

//--- AUTHENTICATE ---------------------------------
include("header.php");

//--- WRITE HEADER ---------------------------------
writeheader("Door-To-Door Popup");

//--- GET PARAMETERS -----------------------------------------
$varID = $_GET['id'];

//--- ESTABLISH SQL CONNECTION ---------------------------------
$con = mysql_open_con();

//--- BUILD SQL ----------------------------------------------
$strSelect = "SELECT `First`,`Last`,`Street1`,`Street2`,`City`,`State`,`Zip`,`D2D_Status`,`D2D_Timestamp`,`D2D_Bring_Sign`,`D2D_Has_Sign`,`D2D_Follow_Up`,`D2D_Notes`";
$strFrom = "FROM `Citizens`";
$strWhere = "WHERE `CID` = '$varID'";
$strSQL = "$strSelect $strFrom $strWhere";

//--- GET DATA FROM DATABASE ---------------------------------
$result = mysql_query($strSQL);
$num_rows = mysql_num_rows($result);

//--- DISPLAY RESULTS ----------------------------------------
if ($num_rows == 0)
{
   echo("No Citizen with ID = $varID");
}
else
{
  $i=1;
  while($row = mysql_fetch_array($result))
  {
    $varFirst = $row['First'];
    $varLast = $row['Last'];
    $varStreet1 = $row['Street1'];
    $varStreet2 = $row['Street2'];
    $varCity = $row['City'];
    $varState = $row['State'];
    $varZip = $row['Zip'];
    $varD2DStatus = $row['D2D_Status'];
    $varD2DTimestamp = $row['D2D_Timestamp'];
    $varD2DBringSign = $row['D2D_Bring_Sign'];
    $varD2DHasSign = $row['D2D_Has_Sign'];
    $varD2DFollowUp = $row['D2D_Follow_Up'];
    $varD2DNotes = $row['D2D_Notes'];

    $i=$i+1;
  }

}

//--- CLOSE SQL CONNECTION ------------------------------------
mysql_close($con);


//--- OUTPUT ----------------------------------------------------
?>
<form name="mainform" id="mainform">

<table width="100%">

<tr><td style="vertical-align:top; text-align:right; font-weight:bold;"></td><td><div style="text-align:left; font-weight:normal;"><input type="hidden" name="cid" id="cid" size="5" value="<?php echo $varID; ?>"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Name:</div></td><td><div style="text-align:left; font-weight:normal;"><?php echo $varFirst . " " . $varLast; ?></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Address:</div></td><td><div style="text-align:left; font-weight:normal;"><?php echo $varStreet1 . ", " . $varCity . ", " . $varState . " " . $varZip; ?></div></td></tr>

<tr><td colspan="2"><hr></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Status:</div></td><td><div style="text-align:left; font-weight:normal;"><select name="d2d_status" id="d2d_status">
  <option value="Not Home"<?php If ($varD2DStatus == "Not Home") { echo " SELECTED"; }; ?>>Not Home</option>
  <option value="Talked With"<?php If ($varD2DStatus == "Talked With") { echo " SELECTED"; }; ?>>Talked With</option>
  <option value="Never Return"<?php If ($varD2DStatus == "Never Return") { echo " SELECTED"; }; ?>>Never Return</option>
  <option value="Not Visited"<?php If ($varD2DStatus == "Not Visited") { echo " SELECTED"; }; ?>>Not Visited</option>
</select></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Date/Time:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="d2d_timestamp" id="d2d_timestamp" size="20" value="<?php echo $varD2DTimestamp; ?>"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Bring Sign:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="checkbox" name="d2d_bring_sign" id="d2d_bring_sign"<?php If ($varD2DBringSign) {echo " CHECKED";}; ?>></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Has Sign:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="checkbox" name="d2d_has_sign" id="d2d_has_sign"<?php If ($varD2DHasSign) {echo " CHECKED";}; ?>></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Follow Up:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="checkbox" name="d2d_follow_up" id="d2d_follow_up"<?php If ($varD2DFollowUp) {echo " CHECKED";}; ?>></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Notes:</div></td><td><div style="text-align:left; font-weight:normal;"><textarea name="d2d_follow_up" id="d2d_follow_up" rows="4" cols="40"><?php echo $varD2DNotes; ?></textarea></div></td></tr>

<tr><td colspan=2>&nbsp;</td></tr>

<tr><td><div>&nbsp;</div></td><td><div><input type="button" name="mySubmit" id="mySubmit" value="Submit" style="display:block; width:200;"></div></td></tr>

</table>

</form>

<?php  include("footer.php"); ?>

Open in new window

SqueezeOJAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Before you start you need to consider getting off the MySQL library - it is deprecated and no longer supported in later versions of PHP. You should consider using the MySQLi or PDO libraries.

With respect tor your request you have a few options

1. Your child window submits its data via an AJAX request. The return from the AJAX call is a status and a marker colour. You can then update the parent in .done() / success call.

2. You submit your form to a backend script that processes it and sends back whatever you need to confirm the operation - as part of this you output the javascript necessary to update the parent window.

3. You use either of the methods above to submit the form data - and in the parent have an AJAX function that polls the server for changes.

I could not (at first glance) see where you were updating the parent in your current setup or where you were attempting to process the submitted form data - did I miss something or did you leave those out?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
SqueezeOJAuthor Commented:
Thanks for the ideas.  I'm going to modernize mySQL and introduce AJAX.  I've been avoiding both because I haven't web-programmed in awhile, but this project has legs and it's worth the investment.  Thanks for pointing me in the right direction.
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.