|
PHP - Google Map Marker With Auto Refresh In Php Ajax
Help me...
My objective is to reload the marker inside google map every 30s...
But the scripts below seem not running properly...
<?php
define('INCLUDE_CHECK',1);
include "dbconnect.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name ="audience" CONTENT="all">
<meta name ="revisit-after" CONTENT="4 days">
<meta name ="content-Language" CONTENT="English">
<meta name ="distribution" CONTENT="global">
<link rel="shortcut icon" href="favicon.png"/>
<link rel="stylesheet" type="text/css" href="host_entry/css/demo.css" />
<link href="host_entry/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="host_entry/js/jquery-1.7.1.min.js"></script>
<script src="host_entry/js/bootstrap.min.js"></script>
<!-- Google Map JS -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false" type="text/javascript"></script>
<script>
//SCRIPTS TO RESFRESH THE MARKER...I THINK THIS IS INCORRECT...HELP!!!
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#result').load('index.php');
}, 10000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]>
</script>
</head>
//to dislay the map
<div id="map_canvas" style="top:55px;left:13px;"> <!-- Map will display -->
<div id="map"> <!-- Fullscreen Loading & Fullscreen Buttons area -->
<span style="color:Gray;">Loading map...</span>
</div>
<!-- Fullscreen Loading & Fullscreen Buttons area Ends -->
</div><!-- Map Ends display -->
<script type="text/javascript">
var locations = [
<?php
$query="SELECT * from host_entry";
$result=mysql_query($query)or die(mysql_error());
{
if ($num=mysql_numrows($result))
{
$i=0;
while ($i < $num)
{
$id=mysql_result($result,$i,"id");
//$host_type=mysql_result($result,$i,"host_type");
$host_name=mysql_result($result,$i,"host_name");
$host_status=mysql_result($result,$i,"host_status");
$host_lapt=mysql_result($result,$i,"host_lapt");
$host_long=mysql_result($result,$i,"host_long");
if($host_status==0)
echo "[
'<div id=result><div class=info style=text-align:center;><h4>$host_name</h4></div></div>', $host_lapt, $host_long],";
$i++;
}
}else {
echo "<h3 align='center'><font color='#ff0000'>No Content Found</font></h3>";
}
}
?>
];
//FROM HERE TO SET THE MARKER IMAGE
// Setup the different icons and shadows
var iconURLPrefix = 'host_entry/img/';
var icons = [
iconURLPrefix + 'p_red_alert.png'
]
var icons_length = icons.length;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: -5,
center: new google.maps.LatLng(3.1215681, 101.71180140000001),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var infowindow = new google.maps.InfoWindow({
maxWidth: 400,
maxHeight: 350,
});
var marker;
var markers = new Array();
var iconCounter = 0;
//I THINK THE PROBLEM START HERE...:(
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3], locations[i][4], locations[i][5]),
map: map,
animation: google.maps.Animation.BOUNCE,
icon : icons[iconCounter],
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= icons_length){
iconCounter = 0;
}
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<?php
//include "includes/footer.php";
?>
</body>
</html>
Is there a way to reload the marker with the ability of ajax towards the markersHelp me for the solution... Thanks.... Similar Tutorialshey guys how do i get a zip codes in the range of 50KM from the current search that is performed!! the search based on zipcodes. and also is ti possible to print text ON the marker. Dynamic text. anyideas will be great thanks Hi all
The issue is, I want to show a map on google map site with marker on the location, when someone click on the link on my site. The problem is map is showing correctly, but no marker is there. Here is the link I am using
<a href="https://www.google.c...803171">Map</a>
Any help ?
Hi, I currently have a google map which shows a marker where the postcode is for a certain pub (converts postcodes to coords lat/long) I would like to loop through all my pubs in my database as place a marker for each on one map, I am uncertain of how to loop through and show each marker for each postcode either PHP or JavaScript. here is my code for a single pub / postcode: Code: [Select] <!doctype html> <?php include "../config.php"; $loggedIn = (isset($_COOKIE['loggedin']) && $_COOKIE['loggedin'] == 'true')?true:false; $PUBID = intval($_REQUEST['PUBID']); $PUB = mysql_query("SELECT * FROM pubs WHERE PUBID = '".$PUBID."'"); $pubdetails = mysql_fetch_array($PUB); ?> <html> <head> <meta charset="UTF-8" /> <title><?php echo $pubdetails['rsPubName']; ?>, <?php echo $pubdetails['rsTown']; ?>, <?php echo $pubdetails['rsCounty']; ?></title> <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style> <style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style> <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> <script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAM17e4xGXwO4sBd_QYtRiSRQXB4T7UHWaz4zUQgLx9muJZW0c3hS8jRMJg733CHqOihn7BVfhZTkLiA" type="text/javascript"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> <script type="text/javascript" charset="utf-8"> var jQT = new $.jQTouch({ icon: 'jqtouch.png', addGlossToIcon: false, startupScreen: 'jqt_startup.png', statusBar: 'black', preloadImages: [ 'themes/jqt/img/back_button.png', 'themes/jqt/img/back_button_clicked.png', 'themes/jqt/img/button_clicked.png', 'themes/jqt/img/grayButton.png', 'themes/jqt/img/whiteButton.png', 'themes/jqt/img/loading.gif' ] }); </script> </head> <body onLoad="ukPostcodeTest(); return false"> <!-- TOWNS --> <div id="pub" class="current"> <div class="toolbar"> <h1>View Pub</h1> <a class="back" href="index.php" rel="external">Home</a> </div> <h2><?php echo $pubdetails['rsPubName']; ?></h2> <?php echo $pubdetails['rsAddress']; ?><br /> <?php echo $pubdetails['rsTown']; ?><br /> <?php echo $pubdetails['rsCounty']; ?><br /> <?php echo $pubdetails['rsPostCode']; ?><br /> <?php echo $pubdetails['Region']; ?><br /> <?php echo $pubdetails['rsTel']; ?><br /> <?php echo '<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.mypubspace.com/pub_info.php?PUBID='.$pubdetails['PUBID'].'&layout=box_count&show_faces=true&width=450&action=like&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:65px; float:right;" allowTransparency="true"></iframe>';?> <div id="map" style="width: 250px; height: 250px"></div> <form name="mapform" onsubmit="ukPostcodeTest(); return false" action="#"> <input id="search" type="hidden" value="<?php echo $pubdetails["rsPostCode"]; ?>" /> </form> <div id="message"></div> <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> However, it seems JavaScript is either disabled or not supported by your browser. To view Google Maps, enable JavaScript by changing your browser options, and then try again. </noscript> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(51.520593197675446,-0.19775390625),16); // ====== Is the search string a UK Postcode ====== function ukPostcodeTest() { var search = document.getElementById("search").value; // take a copy and convert to upper case var s = search.toUpperCase(); // Replace punctuation and whitepsace by a single space s = s.replace(/\W+/g, " "); // Remove and trailing leading spaces s = s.replace(/^ /, ""); s = s.replace(/ $/, ""); // Perform the check var match = s.match(/^[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}$/); if (!match) { // Its not a UK Postcode, so perform a standard GClientGeocoder call on the original search string showAddress(search); } else { // It is a UK Postcode, so call GDirections on the reformatted search string showPostcode(s); } } // ====== Code for handling search strings that are not UK Postcodes ======= // ====== Use the GClientGeocoder in the normal way ====== // ====== Create a Client Geocoder ====== var geo = new GClientGeocoder(); // ====== Array for decoding the failure codes ====== var reasons=[]; reasons[G_GEO_SUCCESS] = "Success"; reasons[G_GEO_MISSING_ADDRESS] = "Missing Address: The address was either missing or had no value."; reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address: No corresponding geographic location could be found for the specified address."; reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address: The geocode for the given address cannot be returned due to legal or contractual reasons."; reasons[G_GEO_BAD_KEY] = "Bad Key: The API key is either invalid or does not match the domain for which it was given"; reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries: The daily geocoding quota for this site has been exceeded."; reasons[G_GEO_SERVER_ERROR] = "Server error: The geocoding request could not be successfully processed."; // ====== Geocoding ====== function showAddress(search) { // ====== Perform the Geocoding ====== geo.getLocations(search, function (result) { // If that was successful if (result.Status.code == G_GEO_SUCCESS) { // How many resuts were found document.getElementById("message").innerHTML = "Found " +result.Placemark.length +" results"; // Loop through the results, placing markers for (var i=0; i<result.Placemark.length; i++) { var p = result.Placemark[i].Point.coordinates; var marker = new GMarker(new GLatLng(p[1],p[0])); document.getElementById("message").innerHTML += "<br>"+(i+1)+": "+ result.Placemark[i].address + marker.getPoint(); map.addOverlay(marker); } // centre the map on the first result var p = result.Placemark[0].Point.coordinates; map.setCenter(new GLatLng(p[1],p[0]),14); } // ====== Decode the error status ====== else { var reason="Code "+result.Status.code; if (reasons[result.Status.code]) { reason = reasons[result.Status.code] } alert('Could not find "'+search+ '" ' + reason); } } ); } // ====== Create a Client Geocoder ====== var gdir = new GDirections(null); // ====== Using GDirections to process a UK postcode ====== function showPostcode(search) { // Call GDirections gdir.loadFromWaypoints([search,search],{getPolyline:true}); // Wait for the reply to come back GEvent.addListener(gdir,"load", function() { var poly = gdir.getPolyline(); var point = poly.getVertex(0); //document.getElementById("message").innerHTML = "Found a UK Postcode"; // Process the result var marker = new GMarker(point); //document.getElementById("message").innerHTML += "<br>" + search + " = " + point.toUrlValue(5); map.addOverlay(marker); // centre the map on the result map.setCenter(point,16); }); } } // display a warning if the browser was not compatible else { alert("Sorry, the Google Maps API is not compatible with this browser"); } // This Javascript is based on code provided by the // Community Church Javascript Team // http://www.bisphamchurch.org.uk/ // http://econym.org.uk/gmap/ //]]> </script> </div> </body> </html> Hi all, Thanks for reading. I'm running a script using jQuery that auto-refreshes a <div> on the index page from an external PHP script to get all the rows in a database and display them on the index page. The script works great - here it is as follows: Code: [Select] <script type="text/javascript"> $(document).ready(function() { $("#responsecontainer").fadeOut("fast").load("getrows.php").fadeIn("slow"); var refreshId = setInterval(function() { $("#responsecontainer").fadeOut("fast").load('getrows.php').fadeIn("slow"); }, 5000); $.ajaxSetup({ cache: false }); }); </script> The getrows.php script I'm working with looks like this: Code: [Select] <?php $rowsQuery = mysql_query("SELECT * FROM Happenings WHERE HappeningDate='$today'"); if (mysql_num_rows($rowsQuery) == 0) { $happeningsToday = "There are no happenings today."; } else { $allHappeningsToday = 1; while ($getHappeningsToday = mysql_fetch_array($rowsQuery)) { $happeningName = stripslashes($getHappeningsToday['HappeningName']); $happeningDate = $getHappeningsToday['HappeningDate']; $happeningDescription = $getHappeningsToday['HappeningDescription']; if ($allHappeningsToday == 1) { $happeningsToday .= " <div class=\"box\"> <p>".$happeningName." | ".$happeningDate." | ".$happeningDescription." </div>"; $allHappeningsToday = 2; } else { $happeningsToday .= " <div class=\"box\"> <p>".$happeningName." | ".$happeningDate." | ".$happeningDescription." </div>"; $allHappeningsToday = 1; } } } echo $happeningsToday; ?> This script works great as well. Currently, the auto-refresh jQuery script as you can see if getting and fading in/out all of the rows. Off of the above getrows.php script, is there a way after I could get only the newly created rows since the last refresh and only fade those in and out while leaving the others already loaded by the auto-refresh script to not fade in/out? Any ideas, thoughts or suggestions would be unbelievably helpful. Thank you very much. HI guys, On my site users are enabled to see the location of other users they are trying to find, but i want to add a link to that all users profiles on the window of their marker. Below is the code for the map. The link would be coded something like Code: [Select] <a href="userprofile.php?id=<?php echo $row['id'];?>"> im not sure if this is or the correct approach . I would thnk that it would have to be added to the create marker function... but i can get it to work Any help would be appreciated. Code: [Select] <script type="text/javascript"> //<![CDATA[ var iconBlue = new GIcon(); iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; iconBlue.iconSize = new GSize(12, 20); iconBlue.shadowSize = new GSize(22, 20); iconBlue.iconAnchor = new GPoint(6, 20); iconBlue.infoWindowAnchor = new GPoint(5, 1); var iconRed = new GIcon(); iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png'; iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; iconRed.iconSize = new GSize(12, 20); iconRed.shadowSize = new GSize(22, 20); iconRed.iconAnchor = new GPoint(6, 20); iconRed.infoWindowAnchor = new GPoint(5, 1); var customIcons = []; customIcons["restaurant"] = iconBlue; customIcons["bar"] = iconRed; function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(51.89787, -8.47109), 13); GDownloadUrl("geo.php", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var marker = createMarker(point, name, address, type); map.addOverlay(marker); } }); } } function createMarker(point, name, address, type) { var marker = new GMarker(point, customIcons[type]); var html = "<b>" + name + "</b><br/>" + address; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> Hi all, I am having some trouble with a part of code. Basically the code is set for a Factory to produce 750 items every 30 minutes. It does this fine IF AND ONLY IF someone clicks the Factory page. For example, it produces 750 bullets, then I leave the page alone for say 20 minutes, but when I click back, it doesn't have 10 minutes left before the next produce. Instead, It has 30 minutes. So it only produces when someone on the game clicks the page. I have tried the basic html refresh but that doesn't work. Any idea's? Thanks in advance is there a way to auto refresh the same page youre on after a script runs? please this code is not working,i want when users comment on a page it should refresh this is my code: Code: [Select] <h3>Comments:</h3> <table> <tr class="row-a"> <td class="first"></td> <td><?php include"header.php"; $sql="SELECT post_content,post_by FROM post ORDER BY topicsID"; $result=mysql_query($sql)or die(mysql_error()); while($row=mysql_fetch_array($result)) { echo"<strong>{$row['post_by']}</strong>: {$row['post_content']}"."</br>"; } if(mysql_affected_rows()>0) { header("location:".$_SERVER['PHP_SELF']); } ?></td> </tr> </table> <h3>Post your comments here</h3> <form action='reply.php'method='post'> <textarea name="comment" id="content" style="width:400px;height:50px;background-color:#D0F18F;color:#000000;font:15px/20px cursive;scrollbar-base-color:#638E0D;"></textarea> <br /> Name:<input type="text"name="name"/> <input class="button" type="submit"name="submit"value="submit" /> </p> </form> <br /> [code] I think I'm seriously missing some small thing to get this code to just auto refresh after (x) seconds or after video completes fully. This is for users to watch from a database of other users that submitted url's - right now all I could put a skip button to auto-refresh. If anyone can help or at least point me into the right direction on some snippets I can kind-of work off of. here is the snippet (kind-of a big snippet) Code: [Select] <? include('header.php'); foreach($_GET as $key => $value) { $secure[$key] = filter($value); } if($_GET['a'] == "skip"){ $sit1 = mysql_query("SELECT * FROM `youtube` WHERE `id`='{$secure['id']}'"); $sit = mysql_num_rows($sit1); if($sit > 0){ mysql_query("INSERT INTO `viewed` (user_id, site_id) VALUES('{$data->id}','{$secure['id']}')"); }} ?> <div class="block medium right"> <div class="top"><?if(isset($data->login)) {?> <h1>Earn Coins - Youtube</h1> </div> <div class="content"> <? // fetches all "unplayed" youtube videos for this user // $site2 = mysql_query("SELECT * FROM `youtube` WHERE (`active` = '0' AND `points` >= `cpc`) AND `id` NOT IN (SELECT `site_id` FROM `viewed` WHERE `user_id`='{$data->id}') ORDER BY `cpc` DESC LIMIT 0, 1"); $site = mysql_fetch_object($site2); $ext = mysql_num_rows($site2); if($ext > 0){ ?> <script src="js/swfobject.js"></script> <script type="text/javascript"> var playing = false; var fullyPlayed = false; var interval = ''; var played = 0; var length = 30; function YouTubePlaying(){ played += 0.1; roundedPlayed = Math.ceil(played); document.getElementById("played").innerHTML = Math.min(roundedPlayed,length); if (roundedPlayed == length){ if (fullyPlayed == false){ YouTubePlayed(); fullyPlayed = true; } } } function YouTubePlayed(){ var response = '<? echo $site->youtube;?>'; var username = "<? echo $data->id;?>"; $.post("ytreceive.php", { data: response + "---" + username}, function(result){ if(!isNaN(result)) { var curr_val = $('#points').text(); var new_val = parseInt(curr_val)+parseInt(result); $('#points').text(new_val); } } ); document.getElementById(response).style.visibility = "visible"; } function onYouTubePlayerReady(playerId){ ytplayer = document.getElementById("myytplayer"); ytplayer.addEventListener("onStateChange", "onYouTubePlayerStateChange"); } function onYouTubePlayerStateChange(newState){ if (newState == 1){ playing = true; interval = window.setInterval('YouTubePlaying()',100); }else{ if (playing) window.clearInterval(interval); playing = false; } } function refreshpage() { window.location.reload(); } </script> <center> <div style="width: 520px; padding: 10px;"> <h3>"<? echo $site->title;?>"</h3> View this video for 30 seconds and after that you will receive <? echo $site->cpc;?> coins<br/><br/> <div id="ytPlayer">You need Flash player 8+ and JavaScript enabled to view this video.</div> <script type="text/javascript"> var params = { allowScriptAccess: "always" }; var atts = { id: "myytplayer" }; swfobject.embedSWF("http://www.youtube.com/v/<? echo $site->youtube;?>?enablejsapi=1&playerapiid=ytplayer&autoplay=1", "ytPlayer", "425", "356", "8", null, null, params, atts); </script> <br/> <br />Must play for <span id="played">0</span>/10 seconds (<a href="youtube.php?a=skip&id=<? echo $site->id;?>" style="color:blue">Skip</a>) <div id="<? echo $site->youtube;?>" style="visibility:hidden"><a href="javascript:refreshpage()">View Next Video</a></div> </div></center> <?}else{?> <div class="msg"> <div class="error">Sorry, there are no more coins to be earned at the moment. Please try again later.</div> <div class="info"><a href="buy.php"><b>Feel like you need more coins? You can purchase them now!</b></a></div></div> <?}}else{?><script>document.location.href='index.php'</script><?}?> </div> </div> <?include('footer.php');?> Hi. I am trying to get a PHP Query to refresh every 10 seconds. I have scoured the internet for days and could not find anything of much use. Plenty of Ajax going on (whatever that is) but the scripts were immense. I only want to refresh 7 lines of PHP Query Code. Can you please tell me if this is possible? Thanks in Advance. i got a submit button... if user click the submit button iwant to page will auto referesh... can someone teach me I have a page that functions like this:
The user begins by loading ajaxtest.php, then using a drop-down menu, selects a user, after which a DIV on ajaxtest.php is populated with the user's selction to getuser.php?q=John%Doe
Here's a visual representation of what is currently happening, along with the part I don't understand.
getuser.php consists largely of a a large HTML table which interacts through PHP with my SQL database. Several of the fields in this table are editable, and after the user changes one of these fields, he can press an "update" button, which calls an AJAX script in update.js and runs update.php, which contains all my SQL queries to update the database, without the user being redirected to this update.php page. All of this is processing perfectly - the user makes some sort of edit, hits "update", and the database gets updated without any redirection or refresh.
Here's what I can't figure out though. Once the user makes a change, and hits "update," the database updates, but the end user doesn't see those changes that he made. I can't just do a simple page refresh, because the action is taking place on getuser.php, but getuser.php is loaded inside of a #DIV on ajaxtest.php. If I use something like window.location.reload(), this just refreshes ajaxtest.php and puts the user back to the starting point of having to select a user. This is not what I want. I don't want to refresh ajaxtest.php, I want to "refresh" ajaxtest.php with getuser.php?q=John%Doe insidethe DIV on ajaxtest.php.
It seems like this is very common - several forums have this capability, where a user has a page loaded, adds a comment, and sees that comment immediately without a full page refresh. I just don't know how to do it, and I've tried at lengths to search the web for an answer with no luck.
Can someone walk me through how to do this?
Hi,
I have the below code and jquery in wordpress. I would like the form to auto submit, but at the moment I just get a 0 in the place of the heart icon. it seems to refresh but the form is not submitting the query.
Thank you in advance
<form id="lastviewer" class="ajax-form" action="<?php echo AJAX_URL; ?>" method="POST">
<?php if(ThemexUser::islastviewed(ThemexUser::$data['active_user']['ID'])) { ?> Hi,
I'm a novice and have the below code in a Wordpress theme. I'm trying to get the form to submit automatically so it logs an entry into the MySql db as though the person clicked the heart icon (submit). Ideally I subsequently want to hide the heart icon so on load maybe after 3 seconds the entry is auto fired to the MySql DB.
I have got as far as the manual click adding the entry, however can't get to to auto submit, any gel would be appreciated. Thank you in advance.
////PHP Form/////
<form class="ajax-form" action="<?php echo AJAX_URL; ?>" method="POST"> Hi! I have this code
<?php
/**
* @Project: Virtual Airlines Manager (VAM)
* @Author: Alejandro Garcia
* @Web http://virtualairlinesmanager.net
* Copyright (c) 2013 - 2016 Alejandro Garcia
* VAM is licensed under the following license:
* Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
* View license.txt in the root, or visit http://creativecommons.org/licenses/by-nc-sa/4.0/
*/
?>
<!DOCTYPE html>
<html>
<head>
<script
src="https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap" type="text/javascript">
</script>
<meta http-equiv="refresh" content="300">
</head>
<body>
<?php
include('./db_login.php');
$db_map = new mysqli($db_host , $db_username , $db_password , $db_database);
$db_map->set_charset("utf8");
if ($db_map->connect_errno > 0) {
die('Unable to connect to database [' . $db_map->connect_error . ']');
}
$sql_map = "select plane_type,ias,flight_id,u.gvauser_id as gvauser_id,u.callsign as callsign,u.name as name,gs,altitude,surname,departure,arrival,latitude,longitude,flight_status,heading,perc_completed,
pending_nm, a1.latitude_deg as dep_lat, a1.longitude_deg as dep_lon , a2.latitude_deg as arr_lat, a2.longitude_deg as arr_lon , network
from vam_live_flights lf, gvausers u , airports a1, airports a2 where u.gvauser_id=lf.gvauser_id and lf.departure=a1.ident and lf.arrival=a2.ident";
if (!$result = $db_map->query($sql_map)) {
die('There was an error running the query [' . $db_map->error . ']');
}
unset($flights_coordinates);
unset($flight);
unset($liveflights);
unset($datos);
unset($jsonarray);
$flights_coordinates = array();
$datos = array ();
$flight = array();
$liveflights = array ();
$jsonarray = array ();
$index = 0;
$index2=0;
$flightindex=0;
while ($row = $result->fetch_assoc()) {
$flight["gvauser_id"]=$row["gvauser_id"];
$flight["callsign"]=$row["callsign"];
$flight["name"]=$row["name"];
$flight["gs"]=$row["gs"];
$flight["ias"]=$row["ias"];
$flight["altitude"]=$row["altitude"];
$flight["surname"]=$row["surname"];
$flight["departure"]=$row["departure"];
$flight["arrival"]=$row["arrival"];
$flight["latitude"]=$row["latitude"];
$flight["longitude"]=$row["longitude"];
$flight["flight_status"]=$row["flight_status"];
$flight["heading"]=$row["heading"];
$flight["dep_lat"]=$row["dep_lat"];
$flight["dep_lon"]=$row["dep_lon"];
$flight["arr_lat"]=$row["arr_lat"];
$flight["arr_lon"]=$row["arr_lon"];
$flight["perc_completed"]=$row["perc_completed"];
$flight["pending_nm"]=$row["pending_nm"];
$flight["network"]=$row["network"];
$flight["plane_type"]=$row["plane_type"];
$liveflights[$flightindex] =$flight;
$sql_map2 = "select * from vam_live_acars where flight_id='".$row["flight_id"]."' order by id asc";
if (!$result2 = $db_map->query($sql_map2)) {
die('There was an error running the query [' . $db_map->error . ']');
}
while ($row2 = $result2->fetch_assoc()) {
$flights_coordinates ["gvauser_id"] = $row2["gvauser_id"];
$flights_coordinates ["latitude"] = $row2["latitude"];
$flights_coordinates ["longitude"] = $row2["longitude"];
$flights_coordinates ["heading"] = $row2["heading"];
$datos [$index2][$index] = $flights_coordinates;
$index ++;
}
$index=0 ;
$index2 ++;
$flightindex ++;
}
$jsonarray[0]=$liveflights;
$jsonarray[1]=$datos;
?>
<div class="container">
<div class="row">
<div id="map-outer" class="col-md-11">
<div id="map-container" class="col-md-12"></div>
<div id="over_map"></div>
</div><!-- /map-outer -->
</div> <!-- /row -->
</div><!-- /container -->
<style>
body { background-color:#FFFFF }
#map-outer {
padding: 0px;
border: 0px solid #CCC;
margin-bottom: 0px;
background-color:#FFFFF }
#map-container { height: 500px }
@media all and (max-width: 800px) {
#map-outer { height: 650px }
}
</style>
<style>
#wrapper { position: relative; }
#over_map { position: absolute; top: 50px; left: 10px; z-index: 99; background: white;}
</style>
</body>
<script type="text/javascript">
var mapCentre;
var map ;
function init_map() {
var flights = <?php echo json_encode($jsonarray[0]); ?>;
var locations = <?php echo json_encode($jsonarray[1]); ?>;
var numpoints=(locations.length);
console.log(locations);
var var_location = new google.maps.LatLng(<?php echo $datos[0][0]["latitude"]; ?>,<?php echo $datos[0][0]["longitude"]; ?>);
var var_mapoptions = {
center: var_location,
zoom: 5,
styles: [{"featureType":"all","elementType":"all","stylers":[{"saturation":"0"},{"lightness":"0"}]},{"featureType":"all","elementType":"geometry","stylers":[{"lightness":"20"}]},{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"visibility":"on"}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"on"},{"color":"#716464"},{"weight":"0.01"}]},{"featureType":"administrative.country","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape.natural.landcover","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"geometry.stroke","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"visibility":"simplified"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ffad99"},{"lightness":"45"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#fbac99"},{"lightness":"1"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.fill","stylers":[{"color":"#ffff80"},{"lightness":"50"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"color":"#ff6666"},{"lightness":"59"},{"visibility":"on"},{"weight":"1.10"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#fff13a"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#f2d344"},{"visibility":"off"},{"weight":"1.41"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#12586f"},{"lightness":"20"},{"gamma":"6.95"},{"saturation":"-29"}]},{"featureType":"water","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"visibility":"on"}]}]
};
map = new google.maps.Map(document.getElementById('map-container'), var_mapoptions);
var mapas=[];
var flightPlanCoordinates=[];
var flightPath = new google.maps.Polyline({
strokeColor: "#c3524f",
strokeOpacity: 1,
strokeWeight: 2,
geodesic: true
});
var k=0;
var z=0;
var coordinate;
while (k<numpoints) {
while (z < locations[k].length)
{
coordinate =new google.maps.LatLng(locations[k][z]['latitude'],locations[k][z]['longitude']);
flightPlanCoordinates.push(coordinate);
z=z+1;
}
ruta = new google.maps.Polyline({
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
ruta.setPath(flightPlanCoordinates);
mapas.push(ruta);
z=0;
k=k+1;
};
function createMarker(pos, t) {
var coord=[];
var pathcoord=[];
var flight_id = t;
currentPath = new google.maps.Polyline({
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
// Plane marker begin
var image = new google.maps.MarkerImage("./map_icons/"+flights[t]['heading'] +".png",null,new google.maps.Point(0,0),new google.maps.Point(15, 15),new google.maps.Size(30, 30));
var icon_airport = new google.maps.MarkerImage("./map_icons/airport_yellow_marker.png");
var lineSymbol = {path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 1 };
var lat1 = flights[t]["dep_lat"];
var lat2 = flights[t]["arr_lat"];
var lng1 = flights[t]["dep_lon"];
var lng2 = flights[t]["arr_lon"];
var dep = new google.maps.LatLng(lat1, lng1)
var arr = new google.maps.LatLng(lat2, lng2)
var icon_plane = 'images/plane.png';
var marker = new google.maps.Marker({
position: pos,
icon: image,
name: t ,
contenido: flights[t]['callsign']+ ' '+flights[t]['name']+ ' '+flights[t]['surname'] ,
icao1:new google.maps.Marker({
position: dep,
map: map,
icon: icon_airport,
visible: false
}),
icao2:new google.maps.Marker({
position: arr,
map: map,
icon: icon_airport,
visible: false
}),
line1:new google.maps.Polyline({
path: [dep, pos],
strokeColor: "#08088A",
strokeOpacity: 1,
strokeWeight: 2,
geodesic: true,
map: map,
polylineID: t,
visible: false
}) ,
line2:new google.maps.Polyline({
path: [pos, arr],
strokeColor: "#FE2E2E",
strokeOpacity: .3,
geodesic: true,
map: map,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '5px'
}],
polylineID: t,
visible: false
})
});
// On mouse over
google.maps.event.addListener(marker, 'mouseover', function () {
//infowindow.open(map, marker);
this.get('line1').setVisible(true);
this.get('line2').setVisible(true);
this.get('icao1').setVisible(true);
this.get('icao2').setVisible(true);
infowindow.open(map,marker);
infowindow.setContent(marker.contenido);
var s=0;
coord.length = 0;
pathcoord.length = 0;
while (s < locations[flight_id].length)
{
coord= new google.maps.LatLng(locations[flight_id][s]['latitude'],locations[flight_id][s]['longitude']);
pathcoord.push(coord);
s=s+1;
}
currentPath.setPath(pathcoord);
currentPath.setMap(map);
});
// On mouse end
// mouse out
google.maps.event.addListener(marker, 'mouseout', function () {
//infowindow.close();
//this.get('line1').setVisible(false);
//this.get('line2').setVisible(false);
//this.get('icao1').setVisible(false);
//this.get('icao2').setVisible(false);
//currentPath.setMap(null);
});
// mouse out end
// On Click begin
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
infowindow.setContent(marker.contenido);
var s=0;
coord.length = 0;
pathcoord.length = 0;
while (s < locations[flight_id].length)
{
coord= new google.maps.LatLng(locations[flight_id][s]['latitude'],locations[flight_id][s]['longitude']);
pathcoord.push(coord);
s=s+1;
}
currentPath.setPath(pathcoord);
currentPath.setMap(map);
if (this.get('line1').visible ='true')
{
this.get('line1').setVisible(false);
}
if (this.get('line2').visible ='true')
{
this.get('line2').setVisible(false);
}
if (this.get('icao1').visible ='true')
{
this.get('icao1').setVisible(false);
}
if (this.get('icao2').visible ='true')
{
this.get('icao2').setVisible(false);
}
flight_detail='<div class="panel panel-map">\
<!-- Default panel contents -->\
<div class=\"panel-heading\">'+flights[t]['departure'] + ' <i class="fa fa-arrow-right"></i> ' + flights[t]['arrival']+'</div>\
<table class="table-map">\
<tr>\
<td><small>Flight completed</small><br><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="\
'+flights[t]['perc_completed'] + '" aria-valuemin="0" aria-valuemax="100" style="width:'+flights[t]['perc_completed']+'%">\
'+flights[t]['perc_completed'] + ' %</div></td>\
</tr>\
<tr>\
<td><small>Callsign</small><br><strong>\
'+flights[t]['callsign'] + '</strong></td>\
</tr>\
<tr>\
<td><small>Flight Status</small><br><strong>\
'+flights[t]['flight_status'] + '</strong></td>\
</tr>\
<tr>\
<td><small>Plane Type</small><br><strong>\
'+flights[t]['plane_type'] + '</strong></td>\
</tr>\
<tr>\
<td><small>Network</small><br><strong>\
'+flights[t]['network'] + '</strong></td>\
</tr>\
<tr>\
<td><small>Pending NM</small><br><strong>\
'+flights[t]['pending_nm'] + '</strong></td>\
</tr>\
<tr>\
<td><small>GS</small><br><strong>\
'+flights[t]['gs'] + '</strong></td>\
</tr>\
<tr>\
<td><small>IAS</small><br><strong>\
'+flights[t]['ias'] + '</strong></td>\
</tr>\
<tr>\
<td><small>Altitude</small><br><strong>\
'+flights[t]['altitude'] + '</strong></td>\
</tr>\
<tr>\
<td><small>Heading</small><br><strong>\
'+flights[t]['heading'] + '</strong></td>\
</tr>\
</table>\
</div>';
//flights[t]['departure'] + '-' + flights[t]['arrival'] + '<br />' + flights[t]['callsign']+ ' '+flights[t]['name']+ ' '+flights[t]['surname'] + '<br />' + 'ALTITUDE: ' + flights[t]['altitude'] + '<br />' + 'GS: ' + flights[t]['gs']+ '<br />' + 'HEADING: ' + flights[t]['heading'] + '<br />' + flights[t]['flight_status'];
$('#over_map').html("<div id='mySecondDiv'>"+flight_detail+"</div>");
});
// On Click end
return marker;
}
var numflight=0
while (numflight < flights.length )
{
var avionicon =new google.maps.LatLng(flights[numflight]['latitude'],flights[numflight]['longitude']);
var m1 = createMarker(avionicon, numflight);
m1.setMap(map);
numflight = numflight +1;
}
var s=0;
while (s < mapas.length)
{
s=s+1;
}
var infowindow = new google.maps.InfoWindow({
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
$('#over_map').html("");
});
}
google.maps.event.addDomListener(window, 'load', init_map);
$( document ).ready(refreshflights);
function refreshflights(){
setInterval(function () {$.ajax({
url: 'get_map_coordinates.php',
data: "",
dataType: 'json',
success: function(data, textStatus, jqXHR) {
init_map();
}
})}, 120000);
}
</script>
</html>
I need map to be centered on marker every time i go on my webpage. Right now is centered on deparrture aiport. So this is map for flights, as flight is ongoing , aircraft (marker) on route, map should be tracking it so every time i refresh my wepage, map should point to marker, not to departure airport. Can anyone halp me. Thank you Edited December 23, 2020 by mrshiljoI've been pulling my hair out for the past couple of hours working with simplexml_load_file(). I was attempting to consume a web service generated by asp.net that I've been consuming using CURL and a function to remove the BOM (byte order marker) so that I could load it into simplexml_load_string(). When I switched over to simplexml_load_file() to call the file instead of using CURL and my function, I was getting errors that it could not find the beginning '<' and that the document was empty and so on.. I couldn't find anything about simplexml_load_file() handling BOM characters, so I went for a walk. I came back to my desk and refreshed the page.. and it just started working. I changed nothing! Guess I should be happy that it started working, but I'd sure like to know why it was breaking in the first place, and then why it would suddenly start working without me doing anything. Has anyone else seen anything like this? Right now I redirect to index page after I delete a record. However I am looking to make it so that I can delete a record without redirecting the page. I know this can be accomplised using Ajax. I have spent countless hours before trying to make it work, but it did not work.
So here is a basic setup I created. Can you please update it with ajax code so that I can see how it's done properly?
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home Page</title> </head> <body> <div class="record" > <a href="record.php?id=<?php echo $record_id ?>"><?php echo $record_name; ?></a> <div class="delete-record"> <a href="delete.php">Delete Record</a> </div> </div> </body> </html> Edited by man5, 18 August 2014 - 08:55 PM.
//php code
<?php
include_once('con.php');
if(!empty($_GET['search'])) {
$search = $connect->prepare('SELECT * FROM posts WHERE title LIKE :search');
$search->bindValue(':search', '%'.$_GET['search'].'%', PDO::PARAM_STR);
$search->execute();
?>
<?php
while($row = $search->fetch()) {?>
<li class="result" onClick="searchValue('<?php echo $row['title'];?>')"><?php echo $row['title'];?></li>
<?php } ?>
<?php } ?>
//ajax
$('#inputsch').keyup(function(){
$.ajax({
type: 'GET',
url: 'fetch.php',
data:'search='+$(this).val(),
success: function(data){
$('#box').show();
$('#box').html(data);
}
});
});
});
function searchValue(val) {
$('#inputsch').val(val);
$('#box').hide();
}
//search box
<form action="search.php">
<input id="inputsch" type="text" name="search" placeholder="search..." autocomplete="off" autofocus>
<button type="submit" value="search" >search</button>
</form>
<div id="box"></div>
//the problem here is when i click the result is only added to input, but i want it to autosubmit
So a project I have simply to learn how it is done is to make an auto updating sitemap with a auto submitter. I have been doing a little research on sitemaps but haven't found much in the way of a tutorial or white paper or similar, anyway I was wondering if I am on the right track or not. What I was thinking for the auto-updating sitemap is since site maps are XML, when an article is published using my custom CMS/Blogging system, I make it rewrite the sitemap appending the new URL that will be generated. Then for the auto-submit, I can either make it a cron job or just manual press, but it would go though a for list of URLs, replacing the end part with my site map url. I think that is how it would be done. If you have a better idea, or can point out an article so I can understand a lot more with sitemaps, I will appreciate it, I am trying to learn as much as possible, I have gone to the offical website (sitemaps.org) but it doesn't have what I am looking for. Thanks, James Now I'm having this strange issue with my website I'm currently working on a tester system and I've encountered a problem that I'm unable to find the issue, tho I'm thinking my ajax php part of the script to be the thing causing it even tho it seems strange that it would cause it. The first part which is connected to where the problem occurs is the echo"<form>"; and from there, It should take you to index.php?page=tester&select=answer, now that is where it in the browser goes there tho it still shows the page stuff from the last page which is index.php?page=tester&select=applications, so it's like showing both &select=answer and &select=applications on the same page. <?php $q=$_GET["q"]; include'../config/connection.php'; $result = mysql_query("SELECT * FROM applications WHERE id = '$q'"); echo "<center><table border='1'> <tr> <th>Account Name</th> <th>Character Name</th> <th>Gender</th> <th>Skin Color</th> </tr>"; $row = mysql_fetch_array($result); echo "<tr>"; echo "<td>" . $row['name'] . "</td>"; echo "<td>" . $row['charactername'] . "</td>"; echo "<td>" . $row['gender'] . "</td>"; echo "<td>" . $row['race'] . "</td>"; echo "</tr></table></center>"; echo"<br/>"; echo"<table><tr> <th>Description</th> <th>Metagaming</th> <th>Powergaming</th></tr>"; echo"<tr>"; echo "<td><textarea readonly='readonly' style='width:22em; height:20em;'>".$row['description']."</textarea></td>"; echo "<td><textarea readonly='readonly' style='width:22em; height:20em;'>".$row['mg']."</textarea></td>"; echo "<td><textarea readonly='readonly' style='width:22em; height:20em;'>".$row['pg']."</textarea></td>"; echo"</tr></table><table><br/><center><h1>Answer</h1><br/><form action='index.php?page=tester&select=answer' method='post'>"; echo"<textarea name='why' style='height:10em; width:60em;'></textarea><br/>"; echo"<input type='submit' name='answer' value='Accept' /><a/>"; echo"<input type='submit' name='answer' value='Decline' /></center>"; echo"<input type='hidden' name='id' value='$q'/>"; echo"</form></table>"; ?> Now on &select=answer it included a page which the script of that include consist of the stuff below, it outputs that the query was successfully, and all that. <? if(!empty($_POST['why'])) { $why = mysql_real_escape_string($_POST['why']); $answer = trim($_POST['answer']); $id = $_POST['id']; if($answer == "Accept") { $query1 = mysql_query("UPDATE characters SET accepted = '1' WHERE id = '".$id."'"); echo"Successfully accepted"; $answer = 1; } elseif($answer == "Decline") { echo"Successfully declined"; $answer = 0; } $query = mysql_query("UPDATE applications SET answer = '$why' AND tester = '".$_COOKIE['Username']."' AND accepted = '$answer' AND answered = '1' WHERE cid = '".$id."'") or die('Could not connect: ' . mysql_error()); if($query) { echo"<br/>Query went through without problems"; header("Refresh: 5;url=index.php?page=tester"); } } ?> This is the ajax part javascript of it which gets the information for index.php?page=tester&select=applications Code: [Select] <script type="text/javascript"> function showApplication(str) { if (str==""||str==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","tester/applications.php?q="+str,true); xmlhttp.send(); } </script>If you need any more information feel free to ask for it. Thanks in advance. |
|||||||