Загрузить данные MySQL в форму - PullRequest
Новая
       1

Загрузить данные MySQL в форму

1 голос
/ 19 августа 2011

Я использую приведенную ниже кодировку PHP и AJAX, чтобы заполнить карту, показывающую различные маркеры для данного местоположения, хранящиеся в базе данных 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>

Я думаю, что я на полпути, потому что я собираюсь вытащить всю информацию из базы данных.Я вижу это, когда запускаю скрипт 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>

КОД SNIPPET 

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
});

1 Ответ

0 голосов
/ 19 августа 2011

Вы можете сохранить дополнительные данные в своем маркере, просто добавив новые поля, например: 

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». Вы уже сделали это. Затем все, что вам нужно сделать, это добавить следующий код в событие onClick (вместо alert () в приведенном выше примере): 

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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...