1. 首页
  2. 问答
  3. 将mySQL数据加载到表格中

将mySQL数据加载到表格中

2011-08-19 152 views
1

我正在使用下面的PHP和AJAX代码填充显示存储在mySQL数据库中的给定位置的各种标记的地图。将mySQL数据加载到表格中

标记正确显示，但我希望能够做的是填充我的表单上的字段与来自数据库的关联数据，以便每个标记点击时，字段将显示数据有效性那个标记。

PHP代码

< 
?php 
require("phpfile.php"); 

// Start XML file, create parent node 

$dom = new DOMDocument("1.0"); 
$node = $dom->createElement("markers"); 
$parnode = $dom->appendChild($node); 

// Opens a connection to a MySQL server 

$connection=mysql_connect ("hostname", $username, $password); 
if (!$connection) { die('Not connected : ' . mysql_error());} 

// Set the active MySQL database 

$db_selected = mysql_select_db($database, $connection); 
if (!$db_selected) { 
die ('Can\'t use db : ' . mysql_error()); 
} 

// Select all the rows in the markers table 

$query = "SELECT findid, locationid, findosgb36lat, findosgb36lon, dateoftrip, findcategory, findname, finddescription, pasref, findimage, additionalcomments FROM finds WHERE `locationid` = '2'"; 

$result = mysql_query($query); 
if (!$result) { 
die('Invalid query: ' . mysql_error()); 
} 

header("Content-type: text/xml"); 

// Iterate through the rows, adding XML nodes for each 

while ($row = @mysql_fetch_assoc($result)){ 
// ADD TO XML DOCUMENT NODE 
$node = $dom->createElement("marker"); 
$newnode = $parnode->appendChild($node); 
$newnode->setAttribute("findid",$row['findid']); 
$newnode->setAttribute("locationid",$row['locationid']); 
$newnode->setAttribute("findosgb36lat",$row['findosgb36lat']); 
$newnode->setAttribute("findosgb36lon",$row['findosgb36lon']); 
$newnode->setAttribute("dateoftrip",$row['dateoftrip']); 
$newnode->setAttribute("findcategory",$row['findcategory']); 
$newnode->setAttribute("findname",$row['findname']); 
$newnode->setAttribute("finddescription",$row['finddescription']); 
$newnode->setAttribute("pasref",$row['pasref']); 
$newnode->setAttribute("findimage",$row['findimage']); 
$newnode->setAttribute("additionalcomments",$row['additionalcomments']); 

} 

echo $dom->saveXML(); 

?>

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" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Finds Per Location</title> 
     <link rel="stylesheet" href="css/findsperlocationstyle.css" type="text/css" media="all" /> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script> 
     <script type="text/javascript"> 
      var customIcons = { 
      Artefact: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      Coin: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      Jewellery: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      } 
      }; 

      // Creating a LatLngBounds object 
      var bounds = new google.maps.LatLngBounds(); 

      function load() { 
      var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
      zoom:14, 
      mapTypeId: 'satellite' 
      }); 

      // Change this depending on the name of your PHP file 
      downloadUrl("phpfile.php", function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      var bounds = new google.maps.LatLngBounds(); 
      for (var i = 0; i < markers.length; i++) { 
      var findid = markers[i].getAttribute("findid"); 
      var locationid = markers[i].getAttribute("locationid"); 
      var dateoftrip = markers[i].getAttribute("dateoftrip"); 
      var findcategory = markers[i].getAttribute("findcategory"); 
      var findname = markers[i].getAttribute("findname"); 
      var finddescription = markers[i].getAttribute("finddescription"); 
      var pasref = markers[i].getAttribute("pasref"); 
      var findimage= markers[i].getAttribute("findimage"); 
      var additionalcomments= markers[i].getAttribute("additionalcomments"); 
      var point = new google.maps.LatLng( 
      parseFloat(markers[i].getAttribute("findosgb36lat")), 
      parseFloat(markers[i].getAttribute("findosgb36lon"))); 
      var icon = customIcons[findcategory] || {}; 
      var marker = new google.maps.Marker({   
      map: map, 
      position: point, 
      title: 'Click to view details', 
      icon: icon.icon, 
      shadow: icon.shadow 
      }); 
      bounds.extend(point); 
      map.fitBounds(bounds); 
      } 
      }); 
      } 

      function downloadUrl(url, callback) { 
      var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

      request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
      } 
      }; 

      request.open('GET', url, true); 
      request.send(null); 
      } 

      function doNothing() {} 

      </script> 
</head> 
      <body onLoad="load()"> 
      <form name="findsperlocation" id="findsperlocation"> 
       <p align="left"><label>Location id<br /> 
       </label> 
       </p> 
       <div> 
       <div align="left"> 
        <input name="locationid" type="text" id="locationid" value="2" readonly="readonly"/> 
       </div> 
       </div> 
       <p align="left"><label>Date of Trip<br /> 
       </label> 
       </p> 
       <div> 
       <div align="left"> 
        <input name="dateoftrip" type="text" id="dateoftrip" readonly="readonly"/> 
       </div> 
       </div> 
       <p align="left"> 
       <label></label> 
       <label>Find Category</label> 
       </p> 
       <div> 
       <div align="left"> 
        <input name="findcategory" type="text" id="findcategory" size="10"readonly="readonly"/> 
       </div> 
       </div> 
       <p align="left"> 
       <label>Find Name</label> 
       </p> 
       <div> 
       <div align="left"> 
        <input name="findname" type="text" id="findname" size="35" readonly="readonly"/> 
       </div> 
       </div> 
       <p align="left"><label>Find Description</label>&nbsp;</p> 
       <div> 
       <div align="left"> 
        <input name="finddescription" type="text" id="finddescription" size="100"readonly="readonly"/> 
       </div> 
       </div> 
       <p align="left"> 
       <label> 
       <label>PAS Ref. </label> 
       </p> 
       <div> 
       <div align="left"> 
        <input name="pasref" type="text" id="pasref" readonly="readonly"/> 
       </div> 
       </div> 
       <p align="left"><label>Additional Comments</label> 
       </p> 
       <div> 
       <div align="left"> 
        <textarea name="additionalcomments" cols="50" rows="12" id="additionalcomments" readonly="readonly"></textarea> 
       </div> 
       </div> 
       <p align="left"><br /> 
       </label> 
       </p> 
       <div> 
       <div align="left"></div> 
       </div> 
      </form> 
      <div id="map"></div> 
      </body> 
</html>

我觉得我一半那里，因为我mangaing拉所有的从数据库中的信息。当我在我的Web浏览器中运行php脚本时，我可以看到这一点，但我不确定下一步要做什么。

接下来我需要做什么？

更新的代码

<!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" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Finds Per Location</title> 
     <link rel="stylesheet" href="css/findsperlocationstyle.css" type="text/css" media="all" /> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script> 
     <script type="text/javascript"> 
      var customIcons = { 
      Artefact: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      Coin: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      Jewellery: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      } 
      }; 

      // Creating a LatLngBounds object 
      var bounds = new google.maps.LatLngBounds(); 

      function load() { 
      var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
      zoom:14, 
      mapTypeId: 'satellite' 
      }); 

      // Change this depending on the name of your PHP file 
      downloadUrl("phpfile.php", function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      var bounds = new google.maps.LatLngBounds(); 
      for (var i = 0; i < markers.length; i++) { 
      var findid = markers[i].getAttribute("findid"); 
      var locationid = markers[i].getAttribute("locationid"); 
      var dateoftrip = markers[i].getAttribute("dateoftrip"); 
      var findcategory = markers[i].getAttribute("findcategory"); 
      var findname = markers[i].getAttribute("findname"); 
      var finddescription = markers[i].getAttribute("finddescription"); 
      var detectorname = markers[i].getAttribute("detectorname"); 
      var searchheadname = markers[i].getAttribute("searchheadname"); 
      var detectorsettings = markers[i].getAttribute("detectorsettings"); 
      var pasref = markers[i].getAttribute("pasref"); 
      var findimage= markers[i].getAttribute("findimage"); 
      var additionalcomments= markers[i].getAttribute("additionalcomments"); 
      var point = new google.maps.LatLng( 
      parseFloat(markers[i].getAttribute("findosgb36lat")), 
      parseFloat(markers[i].getAttribute("findosgb36lon"))); 
      var icon = customIcons[findcategory] || {}; 
      var marker = new google.maps.Marker({   
      map: map, 
      position: point, 
      title: 'Click to view details', 
      icon: icon.icon, 
      shadow: icon.shadow, 
      formdateoftrip: "dateoftrip", 
      formfindcategory: "findcategory" 
      }); 
      bounds.extend(point); 
      map.fitBounds(bounds); 
      } 
      google.maps.event.addListener(marker, "click", function() { alert("Associated data: " + this.formdateoftrip + ", " + this.findcategory); }); 
      }); 
      } 


      function downloadUrl(url, callback) { 
      var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

      request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
      } 
      }; 

      request.open('GET', url, true); 
      request.send(null); 
      } 

      function doNothing() {} 

      </script> 

</head> 
      <body onLoad="load()"> 
      <form name="findsperlocation" id="findsperlocation"> 
       <p align="left"><label>Location id<br /> 
       </label> 
       </p> 
       <div> 
       <div align="left"> 
        <input name="locationid" type="text" id="locationid" value="2" readonly="readonly"/> 
       </div> 
       </div> 
       <p align="left"><label>Date of Trip<br /> 
       </label> 
       </p> 
       <div> 
       <div align="left"> 
        <input name="dateoftrip" type="text" id="dateoftrip" readonly="readonly"/> 
       </div> 
       </div> 
       <p align="left"> 
       <label></label> 
       <label>Find Category</label> 
       </p> 
       <div> 
       <div align="left"> 
        <input name="findcategory" type="text" id="findcategory" size="10"readonly="readonly"/> 
       </div> 
       </div> 

       </form> 
      <div id="map"></div> 
      </script> 
      </body> 
</html>

代码片段

var marker = new google.maps.Marker({ 
map: map, 
position: point, 
title: 'Click to view details', 
icon: icon.icon, 
shadow: icon.shadow, 
formdateoftrip: "dateoftrip", 
formfindcategory: "findcategory", 
formfindname: "findname", 
formfinddescription: "finddescription", 
formpasref: "pasref", 
formfindimage: "findimage", 
formadditionalcomments: "additionalcomments" 
}); 
bounds.extend(point); 
map.fitBounds(bounds); 
} 
google.maps.event.addListener(marker, "click", function() { 
document.getElementById('dateoftrip').value = this.formdateoftrip; 
document.getElementById('findcategory').value = this.formfindcategory; 
document.getElementById('findname').value = this.formfindname 
});

来源

2011-08-19 IRHM

回答

0

您只需通过添加新的领域像这样保存在您的标记额外的数据：

var marker = new google.maps.Marker(
{   
    map : map, 
    position : point, 
    title : 'Click to view details', 
    icon : icon.icon, 
    shadow : icon.shadow, 
    myVariable1 : "some data from xml", 
    myVariable2 : "some other data" 
});

然后一个你必须做的是注册onClick事件标记，并将其数据放入表单中。

google.maps.event.addListener(marker, "click", function() 
{ 
    alert("Associated data: " + this.myVariable1 + ", " + myVariable2); 
});

//编辑：

显然只以上的代码演示如何从标记获取数据 - 这只是一个例子。将JavaScript中的数据放入表单中是一个两步过程。你必须做的第一件事是通过“id”属性给每个你想填充唯一id的字段。你已经做到了。然后，所有你需要做的就是把下面的代码onClick事件（而不是警报（）样品中以上）：

document.getElementById('formdateoftrip').value = this.formdateoftrip; 
// repeat it for other fields here

祝你好运;）

//另一个编辑：

我没有注意到你已经把google.maps.event.addListener放在了错误的地方。它仅适用于一个标记的原因是您已将它放在您创建标记的“for”循环之外。它必须位于“map.fitBounds（bounds）”之后;“但在“}”之前，所以将它移动一行。

第二个问题在于将数据传递到标记中。如果你想引用变量，你不能把它们放在引号中。您使用引号来编写字符串。

替换：

formdateoftrip: "dateoftrip", 
formfindcategory: "findcategory", 
...

分为：

formdateoftrip: dateoftrip, 
formfindcategory: findcategory, 
// fix the others below too

来源

2011-08-19 19:36:57

+0

嗨，抽空非常感谢回复我的帖子。我已经完成了你的建议，但是对于后面的部分，你可以解释如何将数据添加到表单中，我很抱歉。我已将最新的代码发布在我的原始查询中。我得到'点击'事件发生，而不是数据显示在我收到消息对话框中的信息。道歉你可能会告诉我这是相当新的。请问您可以向我指出我如何将数据放入表单域的方向。非常感谢和亲切的问候Chris – IRHM

+0

这只是一个例子，如何从标记检索数据，我假设你可以处理其余的:)无论如何，我已经编辑我的帖子上面来回答你的问题。 –

+0

嗨，我很抱歉，我觉得这里真的很愚蠢。我了解你上面所示的编码，并且我已经实施了三个领域，以便让我开始。但是，在我的地图上正确显示了两个标记，但“点击”事件仅适用于一个标记，当我点击它时，而不是显示正确的数据，它只显示字段名称。我非常抱歉不断地打扰你，但是，请你也许可以强调我要出错的地方。我已经包含了上面的代码片段。非常感谢，再次。问候。 Chris – IRHM

相关问题

 相关问题