Member Avatar for trektrak

I really need help on this,I know nothing about ajax.. and I really need this to include in my page

this is the original code : -

<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="Andy Moore: ">
  <title>TEST1</title>
  </head>
  <body>
		<div id="geo" class="geolocation_data"></div>
<?php
	include 'geojavascript.php';
?>	

  </body>
</html>

I would like to add ajax auto refresh.. to refresh the div link which is something like this : -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script src="
libs/jquery/1.3.0/jquery.min.js"></script>
 <script>
var auto_refresh = setInterval(
function()
{
$('#geo').fadeOut('slow').load('geojavascript.php').fadeIn("slow");
}, 20000);
</script>


  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="Andy Moore: ">
  <title>Locator</title>
  </head>
  <body>
		<div id="geo" class="geolocation_data"></div>
<?php
	include 'geojavascript.php';
?>	

  </body>
</html>

But, there is something wrong here... instead of refreshing the div.. it refresh html page only.. not the div data.. anyone.. please help me on this ?

thanks in advance guys...

  • 3 Contributors
  • 3 Replies
  • 322 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by trektrak

Dani AI

Generated

Quick summary: the page is reloading because the file you are loading back into the page is a full HTML document (and it also contains inline scripts that run on load). That plus including the same PHP file into the main page creates duplicate script execution and can behave unpredictably. was right to show a visible default for the div, and was right to warn that the AJAX target must not be its own full page.

Practical fixes and checklist

  • Serve only the fragment you want inserted into #geo. The AJAX target (call it something like geo_fragment.php or geo.php) should output plain HTML (no <html>, <head>, <body> or <script> tags) — just the snippet that belongs inside #geo.
  • Keep your geolocation and UI scripts in the main page (or in a separate .js file) and do not include them again from the fragment. Have the page call the server endpoint with coordinates and receive the result.
  • Use a load callback so fadeIn runs after the AJAX completes. Example pattern:
<script>
$(function(){
  function refreshGeo(){
    $('#geo').fadeOut(200, function(){
      $(this).load('geo_fragment.php', function(){
        $(this).fadeIn(200);
      });
    });
  }
  refreshGeo();                // initial load
  setInterval(refreshGeo,20000);
});
</script>
  • Remove the periodic updatePage() inside the included PHP/JS. Polling and DOM updates should be orchestrated from one place (the page script), not from the response you load.
  • Check the jQuery <script> src is correct, and run your refresh code inside a DOM-ready handler. Look at the browser console for errors or unexpected redirects/meta-refresh in the server response.

Extra notes

  • Calling getCurrentPosition repeatedly will prompt users or waste battery. Consider calling it once and sending coordinates to the server, or use watchPosition with care.
  • If you want JSON from the server, use $.getJSON() and update #geo with the returned values rather than loading HTML.

These changes will stop whole-page replacements and ensure only the #geo element is updated.

Recommended Answers

All 3 Replies

Member Avatar for catherine sea

<div id="geo" class="geolocation_data"></div>

I don't see you show any data in the div. Make it like this and try again.

<div id="geo" class="geolocation_data">default data</div>
Edited by catherine sea because: n/a
Member Avatar for Taywin

What content in the 'geojavascript.php' file? If it is the page itself, you would have a problem. You need a HTML portion/page that should not be its own page because you may create multiple same div id/name when the page calls itself.

Edited by Taywin because: n/a
Member Avatar for trektrak

thanks for the feedback guys... ok this is the geojavascript.php code

<html>
<body>
<script type="text/javascript">

  var userid = "<?php echo $username; ?>";
// this is called when the browser has shown support of navigator.geolocation
function GEOprocess(position) {
	// update the page to show we have the lat and long and explain what we do next
  document.getElementById('geo').innerHTML = 'Latitude: ' + position.coords.latitude + ' Longitude: ' + position.coords.longitude;
	// now we send this data to the php script behind the scenes with the GEOajax function
	GEOajax("geo.php?accuracy=" + position.coords.accuracy + "&latlng=" + position.coords.latitude + "," + position.coords.longitude +"&altitude="+position.coords.altitude+"&altitude_accuracy="+position.coords.altitudeAccuracy+"&heading="+position.coords.heading+"&speed="+position.coords.speed+"&userid="+userid+"");
}

// this is used when the visitor bottles it and hits the "Don't Share" option
function GEOdeclined(error) {
  document.getElementById('geo').innerHTML = 'Error: ' + error.message;
}

if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(GEOprocess, GEOdeclined);
}else{
  document.getElementById('geo').innerHTML = 'Your browser sucks. Upgrade it.';
}

// this checks if the browser supports XML HTTP Requests and if so which method
if (window.XMLHttpRequest) {
 xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// this calls the php script with the data we have collected from the geolocation lookup
function GEOajax(url) {
 xmlHttp.open("GET", url, true);
 xmlHttp.onreadystatechange = updatePage;
 xmlHttp.send(null);
}

// this reads the response from the php script and updates the page with it's output
function updatePage() {
 if (xmlHttp.readyState == 4) {
  var response = xmlHttp.responseText;
  document.getElementById("geo").innerHTML = '' + response;
 }
}
setInterval("updatePage()", 1000);
</script>
</body>
</html>

anything I've missed?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.