ajax function not defined

Question

I'm really new to the whole JavaScript and AJAX thing. For my final exam, I'm trying to create a web-application. One script sends data from the user to the server and saves it into a textfile, while another is always presenting the current textfile to the User.

I got a far as getting the current content of the file displayed on the users GUI for this I'm using this ajax function:

var xmlHttp = createXmlHttpRequestObject();

//erstellen des Objektes, welches nachher mit der anderen Seite kommuniziert
function createXmlHttpRequestObject(){
 var xmlHttp;

 if (window.ActiveXObject) {
  try{
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }catch(e){
   xmlHttp = false;
  }
 }else{
  try{
   xmlHttp = new XMLHttpRequest();
  }catch(e){
   xmlHttp = false;
  }
 }

 if (!xmlHttp) {
  alert("cant create that object");
 }
 else
  return xmlHttp;
}

//jede sekunde wird der inhalt von send_note geladen
setInterval(function note(){
 if (xmlHttp.readyState==0 || xmlHttp.readyState==4) {
  xmlHttp.open("POST", "send_note.php?", true);
  xmlHttp.onreadystatechange = handleServerResponse;
  xmlHttp.send();
 }
}, 500);

function handleServerResponse(){
 if (xmlHttp.readyState==4) {
  if (xmlHttp.status==200) {
   xmlResponse = xmlHttp.responseXML;
   xmlDocumentElement = xmlResponse.documentElement;
   message = xmlDocumentElement.firstChild.data;
   document.getElementById("display").innerHTML = message;
   setTimeout('note()', 1000);
  }else{
   alert('something went wrong');
  }
 }
}

note() is called when the body of the GUI that the user is presented is loaded.

2 things i cant get to work now:

How do i send data to the file that responds using the post variable that i have used in this ajax request? And how can i get to this data that i sent to the responding php file in this php file?
The development tool of google chrome shows me this error: Uncaught ReferenceError: note is not defined

The passage where i call note() from looks like this:

<body onload="note()">

Can anybody help me with that?

where do you have your `note()` function defined? also, it should be `setTimeout(note, 1000)` (note is without quotes) — iulian, Apr 14 '16 at 09:14
checkout http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery this is something that has been answered many times before! — mic, Apr 14 '16 at 09:16

Justinas · Answer 1 · 2016-04-14T09:24:38.243

0

PHP must echo any output for ajax to read it. Usually it's JSON response and in JS you can do function handleServerResponse(data) {JSON.decode(data);}
You are overwriting note from function to string. Check namings.

Few notes

Use anonymous function: setInterval(function () {});
You don't need that setTimeout('note()', 1000); as your code will be repeated every 500ms.
Have you considered using jQuery ajax:

E.g.:

$.ajax({
    url: 'send_note.php',
    type: 'POST',
    dataType: 'json',
    data: {id: 2}, //js object with data to send to server.
    success: function (response) {
        alert(data); //data will contain anything that server outputs in "send_note.php"
    }
});

edited Apr 14 '16 at 09:24

answered Apr 14 '16 at 09:15

Justinas

41,402
5
66
96

i have now removed the part where i overwrite note() with var note, still getting the same error in the development tool. – Cyril Kym Apr 14 '16 at 09:21
so i'm actually able to display the response i got from the php file that responds with xml on the users GUI, so that part of the project works. I'm just trying to figure out, how i can get ajax to send data from the users GUI to the responding php file. I've tried writing data into the xmlHttp.send("data") part, but I in the php file $_POST stays empty – Cyril Kym Apr 14 '16 at 09:22

score 0 · Answer 2 · answered Apr 14 '16 at 09:19

0

You define your function note() in the setTimeout. I tihnk it's better to have it define outside.

Don't declare var note when your function si already called note.

As said in comment setTimeout should be writtent setTimeout(note, 1000)

Finally since you use interval why do you want to use a setTimeout on the same function ? Is it in order to change the interval duration ? This won't work like this. You will just trigger your function once more 1s later while interval will trigger it every 500s.

answered Apr 14 '16 at 09:19

Walfrat

5,363
1
16
35

I've followed your steps (I've now postet the whole js code into the question) but I still get the error in the development tool – Cyril Kym Apr 14 '16 at 09:37
But you used a setInterval, why calling note() when the document is ready Why there is a setTimeout(note, 1000) ??? You have already the setInterval spamming that function every 500ms. And check jQuery, it provides you a lot of features like handling Ajax without having to worry about browser compatibility. And what is the error you have in your debogguer console ? – Walfrat Apr 14 '16 at 09:41
Oh yes sorry man, finally understood what you meant. Thanks for the help – Cyril Kym Apr 14 '16 at 09:57

ajax function not defined

2 Answers2