I've added an image URL to an entry in the mySQL database, and I want it do be displayed in the information window on my sidebar.
Here's what the part I'm fiddling around with:
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var locations = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < locations.length; i++) {
var name = locations[i].getAttribute("name");
var address = locations[i].getAttribute("address");
var type = locations[i].getAttribute("type");
var price = locations[i].getAttribute("price");
var img = locations[i].getAttribute("img");
var point = new google.maps.LatLng(
parseFloat(locations[i].getAttribute("lat")),
parseFloat(locations[i].getAttribute("lng")));
var html = "<div class=loc-img><img src=" + img + "/></div><div class=loc-name>" + name + "</div> <br/>" + address + "<br/>" + "<div class=loc-type>" + type + "</div><div id=loc-price>Price Rating:" + price + "</div>";
The bit at the bottom looks right to me, so I can't work out what's wrong.
The image is saved on the server, and the URL has been added to the img field of the entry, and there are no spelling errors. When the page loads, and the info window loads, this shows in the Inspector.
<img src="null/">
Here are the details of the column from phpMyAdmin, whcih I think could be causing the problem. varchar(120) latin1_swedish_ci, Null is set to no. I assumed that because it was a URL, varchar would be the appropriate choice.
Any thoughts?
EDIT: I am also having a similar issues with another field. I think it might be related. There's a 'price' field, set to int(5), and is simply a rating of 1 to 5. However, when the info window displays, it just says 'null'
I've actually managed to work out the problem.
Rather simple, yet easily overlooked!
When adding new fields to each item, you need to remember to register them in the XML converter that pulls the information from the database, and then converts it to a Maps-readable format (XML).
In my case, I had to go into genxml.php (as directed by the Maps documentation), and make it look like this:
while ($row = #mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo 'price="' . $row['price'] . '" ';
echo 'img="' . $row['img'] . '" ';
echo '/>';
}
Hope that helps someone else!
Related
I have a PHP page which displays a picture :
echo "<p> <img id=\"myPic\" src=\"myPic.png\" > </p>";
Later in the code, i'm placing small icons around that picture, using JS :
echo "<script>
var picTop = document.getElementById(\"myPic\").offsetTop ;
var picLeft= document.getElementById(\"myPic\").offsetLeft ;
document.getElementById(\"" . $iconId. "\").style.top = picTop + " . $iconPosition[$i][0] . " + \"px\";
document.getElementById(\"" . $iconId. "\").style.left = picLeft + " . $iconPosition[$i][1] . " + \"px\";
</script>";
I uploaded the page on a server, and other users told me that the icons were overlapping the main picture. However this only happens once, and it is fixed when they reload the page. I've witnessed that too, and i could reproduce the issue by using another browser, again solved by refreshing.
I have no idea what's wrong. Perhaps the main picture takes too long to load, and the JS script has already been performed, so the icons are badly positioned - but it is later fixed because the picture is in the temporary files, or something.
I tried to delay the JS script with a setTimeout, but still didn't fix the problem
echo "<script>
var picTop = document.getElementById(\"myPic\").offsetTop ;
var picLeft= document.getElementById(\"myPic\").offsetLeft ;
setTimeout ( function() {
document.getElementById(\"" . $iconId. "\").style.top = picTop + " . $iconPosition[$i][0] . " + \"px\";
document.getElementById(\"" . $iconId. "\").style.left = picLeft + " . $iconPosition[$i][1] . " + \"px\";
}, 500) ;
</script>";
or maybe i could try with more milliseconds... i can't make a proper diagnosis due to the difficulty to reproduce the issue
Thanks for your help !
echo "<script>
document.addEventListener( 'DOMContentLoaded', function () {
var picTop = document.getElementById(\"myPic\").offsetTop ;
var picLeft= document.getElementById(\"myPic\").offsetLeft ;
document.getElementById(\"" . $iconId. "\").style.top = picTop + " . $iconPosition[$i][0] . " + \"px\";
document.getElementById(\"" . $iconId. "\").style.left = picLeft + " . $iconPosition[$i][1] . " + \"px\";
}, false );
</script>";
I would like to add an if statement regarding the 'type' column. Is there something after the .attr('type') which will allow me to specify a particular value for type?
$.get("map_process.php", function (data) {
$(data).find("marker").each(function () {
var name = $(this).attr('name');
var address = '<p>'+ $(this).attr('address') +'</p>';
var type = $(this).attr('type');
So $(this).attr('type'); is loading all the rows in my tables 'type' column value. eg:
Table
Name, Address, Type*
Name1, Address1, TypeA,
Name2, Address2, TypeB,
Name3, Address3, TypeA,
etc
How can I 'get access' to what actually the value of the 'type' column; eg. $(this).attr('type').<something>('TypeA');
Is this possible?
Edit2: map_process.php end
// Select all the rows in the markers table
$query = "SELECT * FROM markers";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = #mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo 'description="' . parseToXML($row['description']) . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
You have two options:
(1) If you have full control over the ajax page you are calling, the best solution would be to:
"send the selected checkbox value into map_process.php and get the
selected value from table and update the markers again in Map." –
Krish R
//jQuery
var cbVal = "TYPEA"; //Assign with checkbox value's associated string
$.get("map_process.php?checkboxval=" + cbVal, function (data)
{
//do something with the data returned
});
//PHP
$query = "SELECT * FROM markers where type = '".$_GET["checkboxval"]."'";
(2) If you don't have control over the source of the ajax call (for example from a third party source), OR you want to return all markers every time, consider using the jQuery Filter method.
//jQuery
var cbVal = "TYPEA"; //Assign with checkbox value's associated string
$(data).filter(function(index,val)
{
return $(val).attr('type') === cbVal;
}).each(function ()
{
//do something with the data returned
});
See the example for option (2) on this JSFiddle
onlythebestoftheweb.x10.mx/test search/search.html Whats wrong with the code? Try typing anything in there without clicking enter. It used to work... I dont know what the issues are on line 3 and 31. Heres links.xml and livesearch.php
onlythebestoftheweb.x10.mx/test search/links.xml
onlythebestoftheweb.x10.mx/test search/livesearch.php
Php code
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q)>0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
{
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1)
{
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint=="")
{
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
You're missing an opening <link> tag between lines 27 and 28 of links.xml.
Chrome provides a helpful error for me if I go to: http://onlythebestoftheweb.x10.mx/test%20search/links.xml
I have the following code stored in a 'genxml.php' that generates markers on google maps. The file is called from another file 'mobileInterface.php'. If I add another marker location in the database everything is working fine on a computer browser, the only problem that I have is when loading from a mobile browser, markers do no update instantly, I have to exit the browser and load it again to update. Else I have to load the 'genxml.php' directly from the URL, sort of downloading the contents and then load 'mobileInterface.php' again.
I have tried not caching the page contents but still I have this problem. Any ideas please?
//genxml.php
$query = "SELECT * ,DATE_FORMAT( ts, '%d-%m-%Y : %H.%i.%s' ) as tz FROM dataentry WHERE caseStatus = 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = #mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'id="' . parseToXML($row['id']) . '" ';
echo 'riskCategory="' . parseToXML($row['riskCategory']) . '" ';
echo 'EventAccidentSubject="' . parseToXML($row['EventAccidentSubject']) . '" ';
echo 'description="' . parseToXML($row['description']) . '" ';
echo 'peopleInvolved="' . parseToXML($row['peopleInvolved']) . '" ';
echo 'hazards="' . parseToXML($row['hazards']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'caseStatus="' . parseToXML($row['caseStatus']) . '" ';
echo 'ts="' . $row['tz'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
//mobileInterface.php
var mobileInterfaceServer = "http://10.0.0.21/genxml.php";
downloadUrl(mobileInterfaceServer, function(markers) {//replace markers with data
var xml = markers.responseXML;//replace markers with data
var markers = xml.documentElement.getElementsByTagName("marker");
selectBox = document.getElementById('destination');
for (var i = 0; i < markers.length; i++) {
var riskCategory = markers[i].getAttribute("riskCategory");
var EventAccidentSubject = markers[i].getAttribute("EventAccidentSubject");
var address = markers[i].getAttribute("address");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
html = "<b>" + EventAccidentSubject + "</b> <br/>" + address;
displayLocation(markers[i]);
//displayLocation(point);
addOption(selectBox, markers[i].getAttribute("EventAccidentSubject"), point);
bindInfoWindow(marker, map, infoWindow, html);
}
Add a timestamp to the request for data from the server as described in this answer
I've got a webpage that returns a dynamic number of rows from a mysql db, which is output to the webpage via table, of which the first column is a checkbox via the following code:
while($row = mysql_fetch_array($result))
{
$id = $row['circuit_id'];
echo "<tr>";
echo "<td align=\"center\"><input name=\"checkbox[]\" type=\"checkbox\" id=\"checkbox[]\" value=" . $row['circuit_id'] . "></td>";
if ($row['status_name'] == 'Disconnected') {
echo "<td><font color=\"red\">" . $row['status_name'] . "</font></td>";
} else {
echo "<td>" . $row['status_name'] . "</td>";
};
echo "<td>" . $row['circuit_name'] . "</td>";
echo "<td>" . $row['circuit_appID'] . "</td>";
echo "<td>" . $row['circuit_appID'] . "</td>";
echo "<td><img src=\"images/icons/application_edit.png \"></td>";
echo "<td><img src=\"images/icons/note_add.png \"></td>";
echo "</tr>";
}
echo "</table>";
below this data presentation, I've added a few HTML buttons (one of which is shown below) that will allow the user to do 'mass' updates on the shown data, in this particular case to change the status from one state to another via the checkbox selection.
echo "<table align=\"center\">";
echo "<tr>";
echo "<td>Set status to Migrated for selected records</td><td><img src=\"images/icons/application_edit.png \"></td>";
echo "</tr>";
echo "</table>";
Is there a way to get the list of checkboxes that have been selected without changing everything to forms, and using a simple html based button to submit the request to the server?
I've been looking for an online solution for something like this via javascript but haven't managed to find anything that matches what I need.
Thanks
I've tried to piece together a few bits and pieces to get where I need to be, but am not making much progress at all, here's the current code:
var obj = {}
$('#click').on('click', function() {
$('input[type="checkbox"]').each(function() {
var name = $(this).attr('id');
obj[name] = $(this).is(':checked') ? 1 : 0;
});
$.each(obj, function(key, value) {
alert(key + ' : ' + value);
});
console.log(obj);
});
how do I get the list of 'true' ie. ticked boxes into a string and update the button with a 'new' url?
Any help is appreciated...
jQuery has the option to select all checkboxes and submit them in the background via AJAX..
jQuery Selectors: http://api.jquery.com/category/selectors/
jQuery AJAX: http://api.jquery.com/jQuery.ajax/
Good luck and hope this helps you!