I am using AJAX to track the number of clicks of a button on my site and I would like to display that value on the page as well. Currently the tracking is working great and the number of clicks is being printed to a document called clicks.txt and I was wondering how I could go about reading the value from that text file and printing it to the page.
I tried searching SO and Google for an answer, but I guess I can't think of how to word it properly because the answers I have found so far have been unrelated to what I'm trying to do.
Here is the AJAX included in index.php
<script type="text/javascript">
function getXMLHttp()
{
var xmlHttp
try
{
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
return false;
}
}
}
return xmlHttp;
}
function MakeRequest()
{
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", "counter.php", true);
xmlHttp.send(null);
}
function HandleResponse(response)
{
document.getElementById('ResponseDiv').innerHTML = response;
}
</script>
Here is the external PHP(counter.php) I am using to track the button clicks:
<?php
$clicks = file_get_contents("clicks.txt");
$clicks++;
$fp = fopen("clicks.txt", "w+");
while ( !flock($fp, LOCK_EX) ) {
usleep(500000); // Delay half a second
}
fwrite($fp, $clicks);
fclose($fp);
flock($fp, LOCK_UN);
?>
Thanks in advance!
$clicks = file_get_contents("clicks.txt");
echo $clicks;
If the page that the button exists on is a .PHP file, you can embed code similar to this directly on the page where you want it to be displayed:
<?php
$clicks = file_get_contents("clicks.txt");
echo $clicks;
?>
Related
Hi i have this code this is xml with ajax i want the return value i get from res to not include an html tag because it always returns this value. For example i should return a value of 1 instead the ajax returns this value
<html>
</html>
1
this is my code for the xml
function sendEscalationEmail()
{
var xmlHttp = GetXmlHttpObject();
if (xmlHttp==null) { alert ("The system cannot process your request.\nPlease use browser that supports AJAX!"); return; }
var params1 = $('#formTrans').serialize();
var params2 = $('#formClient').serialize();
xmlHttp.onreadystatechange = function generateOutput()
{
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
var res = xmlHttp.responseText;
if (res.indexOf('1')<-1) alert('Transaction is saved but there has been an error sending the details to your supervisor\'s email.\nKindly contact the system administrator.');
else
{
alert('Transaction submitted and sent to your supervisor\'s email.');
document.getElementById('emailpreview').innerHTML = '';
$("#emailpreview").dialog("close");
}
}
};
xmlHttp.open('GET', 'send.esemail.php?'+params1+'&'+params2, true);
xmlHttp.send('');
}
here is the code for send.esemail.php
$arrTo[] = "xx#xx.com";
$mail = new htmlMimeMail();
$mail->setTextCharset('utf-8');
$mail->setHtmlCharset('utf-8');
$mail->setHeadCharset('utf-8');
$mail->setSMTPParams($SMTPServer, $SMTPPort);
$mail->setHtml($strHTML);
$mail->setFrom("xxxxx");
$mail->setSubject($strSubject);
$mail->setReturnPath('xx#xx,net');
$mail->setBcc("xx#eg.net");
$result = $mail->send($arrTo);
echo $result;
how could i remove the tags from the return the value so i can get rid of using indexOf to find the correct response. $result should be outputting only 1 but it has <html></html> 1.
In send.esemail.php
Write
echo strip_tags($result);
which should return only 1.
Okay so I have a PHP script which handles file uploads, KML files specifically, extracts the center point and the location of the uploaded file, saves these details in text files, and then loads another page via "header". This other page then uses AJAX calls to set variable names as gathered from the text files, for the location of the KML file and the center point, in order to call the Google Maps API to show the KML layer upon a map.
That is what is supposed to happen, but instead nothing appears. I browse for my KML file, hit the upload button, and a blank page is shown. When I check my server, the file as been uploaded and the relevant details written into their respective text files, so obviously something is going wrong when I try to call the Google Maps API.
PHP upload and file info saving:
<?php
//Check that we have a file
if((!empty($_FILES["UploadedFile"])) && ($_FILES['UploadedFile']['error'] == 0)) {
//Check if the file is JPEG image and it's size is less than 3Mb
$filename = basename($_FILES['UploadedFile']['name']);
$ext = substr($filename, strrpos($filename, '.') + 1);
if (($ext == "kml") && ($_FILES["UploadedFile"]["size"] < 3145728)) {
//Determine the path to which we want to save this file
$newname = dirname(__FILE__).'/kml/'.$filename;
//Check if the file with the same name is already exists on the server
if (!file_exists($newname)) {
//Attempt to move the uploaded file to it's new place
if ((move_uploaded_file($_FILES['UploadedFile']['tmp_name'],$newname))) {
findCenter($newname);
saveName($newname);
} else {
echo "Error: A problem occurred during file upload!";
}
} else {
echo "Error: File ".$_FILES["UploadedFile"]["name"]." already exists";
}
} else {
echo "Error: Only .kml files under 3Mb are accepted for upload";
}
} else {
echo "Error: No file uploaded";
}
function findCenter($file) {
$kmlContent = file_get_contents($file);
$startName = "#sh_green-circle";
$endName = "#sh_red-circle";
$startCoords = getCoords($kmlContent, $startName);
$endCoords = getCoords($kmlContent, $endName);
$startLat = substr($startCoords, strrpos($startCoords, ',') +1);
$startLong = substr($startCoords, 0, strrpos($startCoords, ','));
$endLat = substr($endCoords, strrpos($endCoords, ',') +1);
$endLong = substr($endCoords, 0, strrpos($endCoords, ','));
$midLat = ($startLat+$endLat)/2;
$midLong = ($startLong+$endLong)/2;
$midCoord = "$midLat,$midLong";
$saveCenter = "kmlcenter.txt";
$fh = fopen($saveCenter, 'w') or die ("Can't create file");
$stringData = $midCoord;
fwrite($fh, $stringData);
fclose($fh);
}
function getCoords($kml, $name) {
$startSearch = strpos($kml, $name);
$midSearch = strpos($kml, "<coordinates>", $startSearch+1);
$endSearch = strpos($kml, "</coordinates>", $midSearch+1);
$longlat = substr($kml, $midSearch+13, $endSearch-($midSearch+13));
return $longlat;
}
function saveName($filename) {
$saveFile = "kmlfilename.txt";
$fh = fopen($saveFile, 'w') or die("Can't create file");
$stringData = "$filename";
fwrite($fh, $stringData);
fclose($fh);
header("Location: initgmaps.html");
}
?>
Map intitialisation:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8P7CzxiwQFf-RdK9QVRpH9se8AsMSsjEsensor=false"></script>
<script type="text/javascript">
function initialize() {
var kmlName = getName()
var kmlCoords = getCoords()
var mapcenter = new google.maps.LatLng(kmlCoords);
var myOptions = {
zoom: 11,
center: mapcenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("infoArea"), myOptions);
var kmlLayer = new google.maps.KmlLayer(kmlName);
kmlLayer.setMap(map);
}
</script>
Relevant AJAX functions:
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function getName(){
var ajaxRequest; // The variable that makes Ajax possible!
var kmlName;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser does not support AJAX.");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
kmlName = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "kmlfilename.txt", false);
ajaxRequest.send(null);
}
//-->
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function getCoords(){
var ajaxRequest; // The variable that makes Ajax possible!
var kmlCoords;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser does not support AJAX.");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
kmlCoords = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "kmlcenter.txt", false);
ajaxRequest.send(null);
}
//-->
And of course in the body of initgmaps.html I have:
onload="initialize()"
infoArea is the ID for my inline frame.
Can anyone see why it doesn't load? I'm completely and utterly new to web development, learning as I go, so sorry if the code is terrible and I'm sure I've made some obvious errors. Many thanks.
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8P7CzxiwQFf-RdK9QVRpH9se8AsMSsjEsensor=false"></script>
You have missed an ampersand here... Should be:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=[[YOUR-GMAPS-KEY]]&sensor=false"></script>
(Where [[YOUR-GMAPS-KEY]] is your Google Maps Key - "AIzaSyB8P7CzxiwQFf-RdK9QV...".)
Try adding an ampersand '&' after your key and before the sensor=false parameter.
Additionally
var kmlCoords = getCoords()
is javascript, but function getCoords() is PHP. Javascript cannot execute a PHP function.
the error might be caused by not following this format:
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
see, after "YOUR_API_KEY" there shouldn't be "sensor=false".
try it. hope it works.
I use the script below to create images on the fly, and display them via ajax and a div however the PHP image header is not being read and instead of an image been displayed I just get the image source code. Any ideas how force php to read the header as an image?
<?php
header('Content-Type: image/jpeg'); // JPG picture
$root = $_SERVER['DOCUMENT_ROOT'];
require("$root/include/mysqldb.php"); //mysql login details
require("$root/include/mysql_connect.php"); //mysql connect
if(!empty($small)) { $size = "50"; $folder = "thumnail_user_images"; } else { $size = "250"; $folder = "large_user_images"; }
$dice_image = $_GET["image"];
if (!file_exists("$root/$folder/$dice_image"))
{
require("$root/include/image_resizing_function.php"); //create image
$image = new SimpleImage();
$image->load("$root/raw_user_images/$dice_image");
$image->resizeToWidth($size);
$image->save("$root/$folder/$dice_image");
$image->output();
}
else {
readfile("$root/$folder/$dice_image");
}
And this is the Ajax a use to swap out the images:
<script type="text/javascript">
var bustcachevar=1
var loadedobjects=""
var rootdomain="https://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest)
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar)
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){
if (file.indexOf(".js")!=-1){
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" "
}
}
}
</script>
Make sure there's no extra whitespace after the closing ?> in the php files referenced by require statements. I had that problem and was scratching my head for days before finding the answer.
i've tried using this code and this to make a random quote generator, but it doesn't display anything. my questions are:
what is wrong with my code?
in the above tut, the quote is generated on a button click, i'd like
a random quote to be displayed every
30 mins automatically. how do i do
this?
////////////////////////
quote.html:
<!DOCTYPE html>
<script src="ajax.js" type="text/javascript"></script>
<body>
<!–create the div for the quotes land–>
<div id="quote"><strong>this</strong></div>
<div><a style="cursor:pointer" onclick="run_query();">Next quote …</a></div>
</body>
</html>
/////////////////////
quote.php:
<?php
include 'config.php';
// 'text' is the name of your table that contains
// the information you want to pull from
$rowcount = mysql_query("select count(*) as rows from quotes");
// Gets the total number of items pulled from database.
while ($row = mysql_fetch_assoc($rowcount))
{
$max = $row["rows"];
}
// Selects an item's index at random
$rand = rand(1,$max)-1;
$result = mysql_query("select * from quotes limit $rand, 1");
$row = mysql_fetch_array($result);
$randomOutput = $row['storedText'];
echo '<p>' . $randomOutput . '</p>';
////////////
ajax.js:
var xmlHttp
function run_query() {
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert ("This browser does not support HTTP Request");
return;
} // end if
var url="quote.php";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} //end function
function stateChanged(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("quote").innerHTML=xmlHttp.responseText;
} //end if
} //end function
function GetXmlHttpObject() {
var xmlHttp=null;
try {
// For these browsers: Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
//For Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
} //end function
Try to print the values for $max,$rand and $result. You can use print_r to get more info from the php page.
Run the quote.php on browser to see if you get an output.
Then get to ajax to debug.
You can use a timer in ajax to automate your requests for every 30 mins or so. use javascript's settimeout function for this.
HTH
I am working on a simple AJAX page. when the page loads, it should take the result from the PHP page and display it in the text box. If the result is "1" (which it should be), then it should pop up an alert saying "Ready."
Main page's code (t1_wait.php):
<html><head><title>Waiting...</title></head><body>
<script type="text/javascript">
function update(id)
{
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else if (window.ActiveXObject){
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.responseText=="1")
alert("Ready!");
}
document.myForm.status.value=xmlhttp.responseText;
}
}
var requesturl = "t1_checkMatch.php?id="+id;
xmlhttp.open("GET",requesturl,true);
xmlhttp.send(null);
// delay for 1 sec
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < 1000);
}
<?php
echo "update(".$_GET['id'].");";
?>
</script>
<form name="myForm">
Status: <input type="text" name="status" />
</form>
</body></html>
The PHP page being called out to (t1_checkMatch.php) (all db info replaced with *****):
<?php
$db_user = "*****";
$db_pass = "*****";
$db_name = "*****";
mysql_connect(localhost,$db_user,$db_pass);
#mysql_select_db($db_name) or die("Unable to select database");
$match_id = $_GET['id'];
$match_info = mysql_query("SELECT * FROM ***** WHERE id=".$match_id);
if(mysql_result($match_info,0,"usr2")==-1){
echo "1";
}else{
echo "0";
}
?>
When I go to the t1_wait.php?id=16 (the main page passing id=16 via GET), it should send a request to t1_checkMatch.php?id=16, which returns (yes, I checked) 1. This should trigger an alert saying "Ready" and cause 1 to appear in the text box, but neither of these things happen. The text box is blank.
What's wrong? Thanks!
I believe the problem you are running into is due to a typo
xmlhttp.responceText
Really should be
xmlhttp.responseText
-- Update
It also appears that you are missing a {:
if(xmlhttp.responseText=="1")
alert("Ready!");
}
Should be
if(xmlhttp.responseText=="1"){
alert("Ready!");
}
You have a spelling mistake:
if(xmlhttp.responceText=="1")
should be:
if(xmlhttp.responseText=="1")
(you spelled response incorrectly)
Ok. I figured it out, but I don't know what I did. I did have a typo, but that isn't the problem. The PHP code is the same, here is the main page code:
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function update(id){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
if(ajaxRequest.responseText.indexOf("1")!=-1){
document.myForm.status.value = "Ready!";
window.location = "t1_game.php?id="+id;
}else{
document.myForm.status.value = "Waiting..."
update(id);
}
}
}
ajaxRequest.open("GET", "t1_checkMatch.php?id="+id, true);
ajaxRequest.send(null);
}
<?php
echo "update(".$_GET["id"].");"
?>
//-->
</script>
<form name='myForm'>
Status: <input type='text' name='status' />
</form>
</body>
</html>