Ajax en PHP
"enter" drukt moet dit gebeuren.
Ik probeer dit met PHP en Ajax, maar ik faal nog hopeloos. Dit is mijn code:
<div id="tekst">
<h3>Nieuw bericht</h3>
<textarea id="blogtekst" name="blogtekst" cols="50" rows="20" placeholder="Iets te melden? Vul maar in!" onKeyPress="EnterKnop();"></textarea>
</div>
function EnterKnop(str)
{
if(event.keyCode==13)
{
//var str = document.getElementById("blogtekst").value;
alert("hoi");
if (str=="")
{
document.getElementById("blogtekst").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("blogtekst").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","blogverwerk.php",true);
xmlhttp.send();
}
}
ik snap niet wat er fout gaat...
Wat gebeurt er wel, en waar loopt het fout?
Ik had een alert die keek of het wel de enterknop was, die deed het gewoon. Hij opent blogverwerk.php niet, daar heb ik een echo staan die er niet komt...
kwestie van even debuggen. Gooi eens wat meer alert()'s in je code?
Hij kan blogverwerk.php niet openen, om de een of andere rede...
Wat zeggen xmlhttp.status en xmlhttp.readyState?
Hier zul je 2lijns asynchroon moeten gaan werken met een stuk php waarmee je het geheel in de database zet & een stuk php waarmee je het geheel daarna middels innerhtml weer in een div plaatst.
Zal er even een voorbeeld bijzetten:
window.onload=receive;
function send(){ //in jouw geval function Enterknop()
if (chatsend.readyState == 4 || chatsend.readyState == 0){
chatsend.open("POST","input.php",true);
chatsend.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
chatsend.onreadystatechange = handlesend;
var param = "nickname=" + document.getElementById('nickname').value +
"&message=" + document.getElementById('message').value;
chatsend.send(param);
document.getElementById('message').value='';
}
}
function handlesend(){
clearTimeout();
receive();
}
function receive(){
if(chatreceive.readyState == 4 || chatreceive.readyState == 0){
chatreceive.open("GET","output.php",true);
chatreceive.onreadystatechange=handlereceive;
chatreceive.send(null);
}
}
function handlereceive(){
if (chatreceive.readyState == 4) {
document.getElementById("chat").innerHTML=chatreceive.responseText;
}
setTimeout('receive()', 4000);
}
//Nu splits je je httprequest in 2en op in chatsend &chatreceive zie onderaan
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var chatreceive = getHTTPObject();
var chatsend = getHTTPObject();
Succes!
Gewijzigd op 22/07/2012 23:57:06 door Yoop Overmaat
Dankje voor je reactie, maar met dit stukje code kom ik nergens...Het is een soort twitter-achtig iets
Zie ook mijn reactie...
Het is oorspronkelijk een chat op een testserver wwar ik mee bezig ben. Maar tussen een blog & een chat zitten technisch gezien geen verschillen daar de basis hetzelfde is. Zie een blog maar als een superslowchat.
Kijk i.p.v. zelf het wiel uitvinden naar oplossingen zoals jQuery.
Je kan het gebruiken, maar het is ook niet verplicht. Ik geef toe, het werkt wel veel makkelijker...
Gewijzigd op 23/07/2012 01:04:28 door - Ariën -
Maar goed, mijn volgende vraag:
Hoe gebruik je een preloader? Terwijl hij het bericht aan het verzenden is, wil ik heel graag een preloader zien met bijvoorbeeld
"Uw bericht wordt geplaatst..."
of nog leuker
een afbeelding
ikzelf gebruik jQuery, de $.ajax() en de success-event
1) Wanneer je een AJAX request doet verander je de tekst van de content in een afbeelding of preloader tekst
2) Wanneer de AJAX request klaar is verander je de tekst in de net opgehaalde content.