timed events and mysql

[pigro]

Good Morning,

related to http://www.codingforum.net/showthrea...873#post799873

Philip M has wrote the code that permit to display for 10 minuts the value "nome" but this code is applied to a button that don't submit 3 values to a mysql DB, i've tried to update his code with submit function but the event "submit" reload the form and i loose the function AddItem.

Following our bible (google) i've found a possible solution with AJAX..
I've tried to modify the script with some tutorials but it's not working

Someone can help me?? )

page add_activity.php

....
?>

<form name="form1" class="cmxform" id="commentForm" method="post" action="">
<div class="form">ragazza: 
	<? catch_girl($query,$girl); ?>
</div>
<div class="form">priv&eacute;: 
	<select class="box" name="prive" id="prive" onFocus="className='focused';" onBlur="className='box';">
    	<option value="0" selected="selected">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
    </select>
</div>  
<div class="form" style="padding-top:10px;"><span class="button"> <input type="button" name="activity" value="inserisci" onClick="addItem()"/></span></div>
<div><textarea style="background-color:#CCCCCC;" name="girlvalue" cols="20" rows="20" id="girlvalue">
</textarea></div>  
</form>
<script type = "text/javascript">
function ajaxFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			document.myForm.time.value = ajaxRequest.responseText;
		}
	}
	var ragazza = document.getElementById('girl').value;
	var prive = document.getElementById('prive').value;
	var day = new Date().getTime();
	var queryString = "?girl=" + girl + "&day=" + day + "&prive=" + prive;
;
	ajaxRequest.open("POST", "query_activity.php" + queryString, true);
	ajaxRequest.send(null); 


}

var atext = new Array();
var atim = new Array()
var otext = "Ragazze Impegnate: \n";
document.getElementById("girlvalue").value = otext;


//var showtime = 300000;  // milliseconds = 5 minutes
var showtime = 600000 // 10 seconds for test purposes

window.setInterval("showtext()",1000);  // refresh every 1 second

function showtext() {
var now = new Date().getTime();
var string = otext;
for (var i =0; i <= atext.length; i++) {
if ((atim[i] + showtime) > now) {
string = string + "\n" + atext[i];
string = string.replace(/\s+/g," ");
}
document.getElementById("girlvalue").value = string;
}
}

function addItem() {
var b = document.getElementById("girl").value;
atext.push(b);
var now = new Date().getTime();
atim.push(now);
document.getElementById("girl").value = "";
ajaxFunction();
}

</script>

query_activity.php

include 'pagethatcontaindbconnectionanddbselection.php';
	// Retrieve data from Query String
$girl = $_POST[girl];
$prive = $_POST[prive];
$day = date("d/m/Y"); 
$hour = date ("H:i");
	// Escape User Input to help prevent SQL Injection
$girl = mysql_real_escape_string($girl);
$prive = mysql_real_escape_string($prive);
	//build query
$query=mysql_query("INSERT INTO nameoftable_activity VALUES (NULL,'".$girl."','".$prive."','".$day."','".$hour."')") or die(mysql_error());
if ($prive == '1') {
	echo'<script type="text/javascript">openwindow();</script>';
	}
if ($prive == '2') {
	echo'<script type="text/javascript">openwindow2();</script>';
	}
if ($prive == '3') {
	echo'<script type="text/javascript">openwindow3();</script>';
	}
?>

[oesxyl]

....
<script type = "text/javascript">
function ajaxFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			document.myForm.time.value = ajaxRequest.responseText;
		}
	}
	var ragazza = document.getElementById('girl').value;
	var prive = document.getElementById('prive').value;
	var day = new Date().getTime();
	var queryString = "?girl=" + girl + "&day=" + day + "&prive=" + prive;
;
	ajaxRequest.open("POST", "query_activity.php" + queryString, true);
	ajaxRequest.send(null); 


}

at first look, in function ajaxFunction the variable ajaxRequest is declared but not initialized. You must call the constructor for it. See this link:

http://www.javascriptkit.com/jsref/ajax.shtml

it is posible to be other problems too I didn't look closer.

Edit: I see another one. you use post method but pass query as you use get.

best regards

[pigro]

I've resolved something )

The timed script and insert query is working now!
The query is creating rows but i can't see $_POST[girl] and $_POST[prive] values into DB

 div style="position:relative; width:400px; display:block; ">
<form name="form1" method="post" action="javascript:insert();">
<div class="form">ragazza: 
	<? catch_girl($query,$girl); ?>
</div>
<div class="form">priv&eacute;: 
	<select class="box" name="prive" id="prive" onFocus="className='focused';" onBlur="className='box';">
    	<option value="0" selected="selected">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
    </select>
</div>  
<div class="form" style="padding-top:10px;"><span class="button"> <input type="submit" name="activity" value="inserisci" /></span></div>
<div style="position:absolute; margin-left:2px; top:1px; right:1px;">
 <textarea style="background-color:#CCCCCC;" name="girlvalue" readonly="readonly" cols="20" rows="15" id="girlvalue">
  </textarea>
</div>
</form>
</div>
<script type = "text/javascript">
 function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

var nocache = 0;
function insert() {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('insert_response').innerHTML = "Just a second..."
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var girl= encodeURI(document.getElementById('girl').value);
var prive = encodeURI(document.getElementById('prive').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
http.open('post', 'query_activity.php?girl='+girl+'&prive=' +prive+'&nocache = '+nocache);
http.onreadystatechange = insertReply;
http.send(null);
addItem();
}

function insertReply() {
if(http.readyState == 4){
var response = http.responseText;

document.getElementById('insert_response').innerHTML = 'Activity inserted:'+response;
}
}




var atext = new Array();
var atim = new Array()
var otext = "Ragazze Impegnate: \n";
document.getElementById("girlvalue").value = otext;


//var showtime = 300000;  // milliseconds = 5 minutes
var showtime = 600000 // 10 seconds for test purposes

window.setInterval("showtext()",1000);  // refresh every 1 second

function showtext() {
var now = new Date().getTime();
var string = otext;
for (var i =0; i <= atext.length; i++) {
if ((atim[i] + showtime) > now) {
string = string + "\n" + atext[i];
string = string.replace(/\s+/g," ");
}
document.getElementById("girlvalue").value = string;
}
}

function addItem() {
var b = document.getElementById("girl").value;
atext.push(b);
var now = new Date().getTime();
atim.push(now);
document.getElementById("girl").value = document.getElementById("girl").value;

}

</script>

[oesxyl]

this part is wrong:

// Pass the login variables like URL variable
http.open('post', 'query_activity.php?girl='+girl+'&prive=' +prive+'&nocache = '+nocache);
http.onreadystatechange = insertReply;
http.send(null);

must be:

http.open('post','query_activity.php',true);
http.onreadystatechange = insertReply;
http.send('girl='+girl+'&prive=' +prive+'&nocache='+nocache);

best regards

[pigro]

Changed

I've the same problem ... the script send the query to my db but the field "girl" and "prive" have no values...

[oesxyl]

Changed

I've the same problem ... the script send the query to my db but the field "girl" and "prive" have no values...

I don't see any 'girl' id in your markup, it's a 'girlvalue' instead to the textarea. And you have the id 'prive' asssigned to a select which mean you can't use value but selectedIndex.

http://www.javascriptkit.com/jsref/select.shtml

best regards
.

[pigro]

The mistake was related to the headers.
the ID girl is into catch girl function included by line include 'functions.php';.

FYI
the code here:

<div id="insert_response" style="display:none;"></div>
<div style="position:relative; width:400px; display:block; ">
<form name="form1" method="post" action="javascript:insert();">
<div class="form">ragazza: 
	<? catch_girl($query,$girl); ?>
</div>
<div class="form">priv&eacute;: 
	<select class="box" name="prive" id="prive" onFocus="className='focused';" onBlur="className='box';">
    	<option value="0" selected="selected">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
    </select>
</div>  
<div class="form" style="padding-top:10px;"><span class="button"> <input type="submit" name="activity" value="inserisci" /></span></div>
<div style="position:absolute; margin-left:2px; top:1px; right:1px;">
  <textarea style="background-color:#CCCCCC;" name="girlvalue" readonly="readonly" cols="20" rows="15" id="girlvalue">
  </textarea>
</div>
</form>
</div>
<script type = "text/javascript">
 function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

var nocache = 0;
function insert() {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('insert_response').innerHTML = "Just a second..."
// Required: verify that all fields is not empty. Use encodeURI() to solve some issues about character encoding.
var girl= encodeURI(document.getElementById('girl').value);
var prive = encodeURI(document.getElementById('prive').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
params='girl='+girl+'&prive=' +prive+'&nocache='+nocache;

http.open('post','query_activity.php',true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = insertReply;
http.send(params);
addItem();
}

function insertReply() {
if(http.readyState == 4){
var response = http.responseText;

document.getElementById('insert_response').innerHTML = 'Activity inserted:'+response;
}
}




var atext = new Array();
var atim = new Array()
var otext = "Ragazze Impegnate: \n";
document.getElementById("girlvalue").value = otext;


//var showtime = 300000;  // milliseconds = 5 minutes
var showtime = 600000 // 10 seconds for test purposes

window.setInterval("showtext()",1000);  // refresh every 1 second

function showtext() {
var now = new Date().getTime();
var string = otext;
for (var i =0; i <= atext.length; i++) {
if ((atim[i] + showtime) > now) {
string = string + "\n" + atext[i];
string = string.replace(/\s+/g," ");
}
document.getElementById("girlvalue").value = string;
}
}

function addItem() {
var b = document.getElementById("girl").value;
atext.push(b);
var now = new Date().getTime();
atim.push(now);
document.getElementById("girl").value = document.getElementById("girl").value;

}

</script>