I want to make a comment for visitors where they can add comments and it will get updated without refreshing .
I have gone though a lot of tutorial but they dont tell how to code the .js file or .php file
Please help.
what is hard about it?
Making the request
var req;
function SendData(name,comment) {
var url = "yourPage.php";
req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest && !(window.ActiveXObject)) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
if(req) {
var params = "name" + name + "&" + "comment=" + comment;
req.open("POST", url, true);
req.onreadystatechange = processReqChange;
req.send(params);
}
else{
//you need to do a normal form submission
}
}
So you would call that like
SendData("Eric","Foo Bar Candy");
Getting the request back you set the innerHTML with the responseText where you want it to show up.
function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById("youroutputid").innerHTML = req.responseText;
} else {
alert("There was a problem retrieving the XML data:\n" +
req.statusText);
}
}
}
On the server
You handle the Post like any other form submission and spit out the HTML that you want to show up. (I know almost zippo about php)
print "Your elephant's name is: " . $_POST['name'];
Eric
CAN U PLEASE EXPLAIN WHICH FILE IS .js and which one is php., as i am new to this...
SendData() and processReqChange() are the javascript codes, they can be put in a .js file and the last code which is labeled "On the server" is the php.
instead of
print "";
you should use
echo "";
hey i got the same problem but i cant fix it.. i tried the above but it dont help
i got several files.. projecten.php, projecten.incl.php and selectuser.js and some more but u dont need them for the problem
true AJAX i get a variable "q" (in projecten.php and he shows every think i want to see that works great now i want from another file to call the ajax (go to a new page with a link) and i send a POST or GET with it.. but then does the ajax dont pick it up.. does anybody got a solution here for?
i now way it wound work. i call the file projecten.php with a variable in GET but i need to call selectuser.js with a var.. how can i do that with a link.. or somethink like that..?
i hope u get the problem.. else just ask
i will post the code below.. i hope u can find what i need to change
selectuser.js
var xmlHttp
function showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="includes/projecten.incl.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
projecten.incl.php
<?php $project = $_GET['q']; ?>
<table border="0" >
<tr>
<td valign="top">
<?php include "projecten.project.php"; ?><br><br>
<?php include "projecten.fase.php"; ?>
</td >
<td valign="top">
<?php include "projecten.opmerking.php"; ?>
</td>
</tr>
</table>
<?php
if ( $project !== "")
{
echo "<p>In de toekomst komen hier meerdere opties voor het project bij.</p>";
}
else {echo "<p>Selecteer een project</p>";}
?>
projecten.php
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<script src="selectuser.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=300,height=220,left = 490,top = 362');");
}
// End -->
</script>
include "includes/connect_weekbrief.php";
$query = "
SELECT DISTINCT (projectuser.code) as code
FROM projectuser
WHERE projectuser.user = 'planner'
AND projectuser.id > '100'
ORDER BY projectuser.code asc
";
$sql = mysql_query($query) or die ( mysql_error( ) );
echo "<p><div id=\"txtHint\">Hier zal informatie over het project komen.</div></p>";
?>
</body>
</html>
Look how I handle the response, you NEED to check for the status code. Open up Firefox and load Firebug [http://getfirebug.com/]. Watch the XMLHttpRequest.
Eric
Look how I handle the response, you NEED to check for the status code. Open up Firefox and load Firebug [http://getfirebug.com/]. Watch the XMLHttpRequest.
Eric
i tried to read the code.. and find it out by myself but i cant find it
i did find out that i need to get the GET variable to the .js file.. if that can be done i can change the variable and the ajax will work:)
so i got projecten.php?projecten=testproject
now i need that variable to the selectuser.js file without doing anythink ( so i want to be compleetly automatic) do u now how i can do that?
Call the function with window.onload?
Eric
i tried somethings with it but nothing worked, i looked on the web but what i saw from it i dont think that is the think i need.
it could be that my code was to buggy it that way it dont worked.. but im afraid it is not what im looking for
I am not sure what you are talking about exactly.. am taking a guess that you want to call the function when the page load to load what ever is selected?
The JavaScript would look something like:
window.onload = function()
var sel = document.forms[0].project;
showUser(sel.options[sel.selectedIndex].value);
}
Eric
I am not sure what you are talking about exactly.. am taking a guess that you want to call the function when the page load to load what ever is selected?
The JavaScript would look something like:
window.onload = function()
var sel = document.forms[0].project;
showUser(sel.options[sel.selectedIndex].value);
}
Eric
uhm not realy i got that part working:) with ajax true a pull down list
now i got some links on another page. when i press the link i want to go to
the page projecten (that works) and then i want to activate the ajax (automatic) and that the variable project into the ajax get so that ajax maken the stuff visable.
i will try to set the page online so u can see it by ure self (uhm i cant do it now .. i will try it again to night.