simple AJAX function

[9three]

Hey,

 

I have this function

 

var xmlHttp = GetXmlHttpObject();
function reportPhoto(div, photoID) {
  var URL = 'ajax/ajax.reportPhoto.php?photoID='+photoID;
  if (xmlHttp == null)
    return;

  xmlHttp.onreadystatechange = stateChanged(div);
  xmlHttp.open('POST', URL, true);
  xmlHttp.send(null);
}

 

Which initiates these two functions:

function GetXmlHttpObject() {
  if (window.XMLHttpRequest) {
    //IE7+, Firefox, Chrome, Opera, Safari
    return new XMLHttpRequest();
  }
  if (window.ActiveXObject) {
    //IE6, IE5
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
  return null;
}

function stateChanged(div) {
  if (xmlHttp.readyState == 4) {
    document.getElementById(div).innerHTML = xmlHttp.responseText;
  }
}

 

Problem is that it doesn't do anything. No errors are thrown. My table in my DB is empty. I'm running on the latest firefox.

 

Not sure what I'm doing wrong? I normally use Jquery but I wanted to switch over to this method instead.

 

EDIT:

 

I changed somethings around and now when I click on an href twice with that "reportPhoto" function it just disappears the div but nothing else happens.

[xtopolis]

It doesn't look like you're sending the post data correctly.  You don't send the correct headers.

 

See this page: http://www.openjs.com/articles/ajax_xmlhttp_using_post.php

[9three]

Ok so now it is sending the data to the database but it's not switching the HTML when its clicked.

 

var xmlHttp = GetXmlHttpObject();
function reportPhoto(div, photoID) {
  var URL = 'ajax/ajax.reportPhoto.php';
  var params = 'photoID=' + photoID;
  
  if (xmlHttp == null)
    return;
  
  xmlHttp.open("POST", URL, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", params.length);
xmlHttp.setRequestHeader("Connection", "close");

xmlHttp.onreadystatechange = stateChanged(div);
xmlHttp.send(params);
}

function GetXmlHttpObject() {
  if (window.XMLHttpRequest) {
    //IE7+, Firefox, Chrome, Opera, Safari
    return new XMLHttpRequest();
  }
  if (window.ActiveXObject) {
    //IE6, IE5
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
  return null;
}

function stateChanged(div) {
  if (xmlHttp.readyState == 4) {
    parent.document.getElementById(div).innerHTML = xmlHttp.responseText;
  }
}

 

My PHP file echos out "Picture reported" if true else it prints "Error"

[xtopolis]

Debug it step by step.  I assume it has something to do with the "parent" reference, but I'm unsure.

 

Start by making the parent.document.getElementById(div).innerHTML = xmlHttp.responseText; line instead say alert(xmlHttp.responseText); and go from there.

 

Test that it alerts the correct data.  Then test that you can change a direct reference to the HTML object (document.getElementById('nameofdiv').innerHTML = 'test').  Then test that the parent.document.getElementById(div) is actually getting the right element (and not erring).  Then see if the argument div is referencing the object correctly.

 

Try those things, otherwise we may need to see more code.

[9three]

I changed it to what you said. The alert doesn't go through.

 

function stateChanged(div) {
  if (xmlHttp.readyState == 4) {
    alert(xmlHttp.responseText);
    //parent.document.getElementById(div).innerHTML = xmlHttp.responseText;
  }
}

 

If the data went through then the readyState is 4. But it's not prompting the alert box... weird..

[xtopolis]

If the data went through then the readyState is 4

Not necessarily...

This page shows a brief explanation of what codes are returned: http://www.w3schools.com/dom/dom_http.asp

If deals with the readystate as well as the page status (which you do not check in your code).

 

Anyway, continue to debug step by step.  Place debugging alerts backwards through your code until you find where it actually breaks.  ie:

function stateChanged(div) {
  alert('made it to stateChanged()');

  if (xmlHttp.readyState == 4) {
    alert('made it to readystate ==4');
    //parent.document.getElementById(div).innerHTML = xmlHttp.responseText;
  }else{
    alert('made it to readystate = ' + xmlHttp.readystate);
  }
}

[9three]

It's reaching readyState 1 aka Loading.

[xtopolis]

Well, if it doesn't go past 1, (it should go through them until 4 if it's successful) , then try checking the xmlHttp.status code and see if it is indeed working correctly (200).  You need to narrow down the problem since it seems to be between your script and the page it wants to query -- syntactically it seems correct.

[9three]

Hm, not sure if I'm doing it right but I'm getting an error

 

if (xmlHttp.readyState == 4) {
    alert('made it to readystate ==4');
    //parent.document.getElementById(div).innerHTML = xmlHttp.responseText;
  }else{
    alert('made it to readystate = ' + xmlHttp.readyState);
    alert('status: ' + xmlHttp.statusText);
  }

 

Tried using xmlHttp.status  as well

 

The quey IS being sent though.

[9three]

In my php code it's echoing out "Photo Reported' if all went well. Should I be echoing out "4" for complete?

[xtopolis]

The PHP can echo out whatever you want it to.

 

if (xmlHttp.readyState == 4) {
    alert('made it to readystate ==4');
    //parent.document.getElementById(div).innerHTML = xmlHttp.responseText;
  }else{
    alert('made it to readystate = ' + xmlHttp.readyState);
    alert('status: ' + xmlHttp.statusText);
  }

 

That code should echo "made it to readystate ==4" if that part of the request made it...  Keep trying, I won't be able to assist more tonight, but I'm sure you can figure it out by checking it step by step.

[9three]

I tried:

 

function stateChanged(div) {
  if (xmlHttp.readyState == 4) {
    alert('made it to readystate ==4');
    //parent.document.getElementById(div).innerHTML = xmlHttp.responseText;
  }else{
    alert('made it to readystate = ' + xmlHttp.readyState);
    try {
    alert('status: ' + xmlHttp.statusText);
    }
    catch (e) {
      alert(e.description);
    }
  }
}

 

Gives me undefined :-/

[nadeemshafi9]

use jquery please

[9three]

no.

[nadeemshafi9]

no.

 

why not ? scuuuurd ?

 

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

 

http://docs.jquery.com/Ajax/jQuery.ajax#options

[9three]

Stop derailing the thread please.

[nadeemshafi9]

Stop derailing the thread please.

 

its my thread now hahahahah

[xtopolis]

You can try posting your full code and we can see if we can pinpoint the problem.