1. 首頁
  2. 問答
  3. 將mySQL數據加載到表格中

將mySQL數據加載到表格中

2011-08-19 87 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

相關問題

 相關問題