Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've been trying to get a stand alone web page I use rebuilt as something that can be accessed as a page in my blog. Following advice I've created a new template for this page and do all my work there.

The page remembers $_SESSION correctly and the php works well. On this page there are drop down boxes that update other drop downs.

If I update them manually all is well with the world. When I attempt to introduce my ajax calls things go wonky. At the moment update.php just echos back "hello".

<script>
function changeFn( ) {
  var newOpt = document.createElement('option');
  var oldSel = document.getElementById('slight');
  while ( oldSel.length > 0 )
    oldSel.remove(oldSel.options.length-1);

    var ajaxRequest;
alert("start req"); // I observe this alert
    try {
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
    } catch (e) {
    try {
    // Internet Explorer Browsers
    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
    // Something went wrong
    alert("Your browser isn't supporting XML HTTP requests.");
    return false;
    }
    }
    }

    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function () {
   alert("state change: "+ajaxRequest.readyState);  // I never observe this
    if (ajaxRequest.readyState == 4) {
      if (ajaxRequest.status == 200) {
alert(ajaxRequest.responseText);
        //extract( ajaxRequest.responseText, "one" );
      } else {
        alert("There was an error retriving the data");
      }
    }
  }

alert("trying"); // I observe this alert
  var url = "http://myurl/update.php";
  var params = "CID="+classID+"&amp;GID="+genreID;
  ajaxRequest.open("POST", url, true);
  ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  ajaxRequest.setRequestHeader("Content-length", params.length);
  ajaxRequest.setRequestHeader("Connection", "close");
  ajaxRequest.send(params);


alert(" hi"); // I never see this alert
newOpt.text="got this far";
  newOpt.value= -1;

  document.getElementById("slight").add(newOpt, null);
  return true;
}
</script>

Some alerts fire, but the ones associated with the callback function do not. PS I am not trying to access anything that is specific to the wordpress site itself, I'm accessing an entirely different database.

share|improve this question
1  
I'd tested your script (remove the lines accessing the DOM) and it work fine. You should really use a debbuging tool like FireBug or the DevTools in Chrome. And stop using alert(), use console.log() ;) –  Ralf912 May 12 '13 at 23:39
    
@Ralf912 Your comment to use the console is probably the most valuable tip I've gotten in this ordeal so I've left this all here. I'm going to explain what I did based on that in an answer. If you want to put your comment in an answer I'll upvote it for sure. –  Stephen May 13 '13 at 1:01
1  
Helping people to solve their problems is more satisfaction then getting 10 points reputation ;) –  Ralf912 May 13 '13 at 1:33
add comment

1 Answer

Based on the comment by Ralf912 I tried to find out what the console and devtools in Chrome as all about. This debugger made clear what is wrong with my script, it's not a Wordpress specific problem, but in case others think it is I'll explain.

It may be that Wordpress has set up an environment which is stricter than the other straight html environment I was using for testing which is why these errors have appeared and stopped things from working.

First:
Somewhere in my editing I removed the parameters from the function call which meant the items in params weren't defined.

Second: These lines were creating a security violation, and nothing complained at removing both of them (based on another user's question on stackoverflow). ajaxRequest.setRequestHeader("Content-length", params.length); ajaxRequest.setRequestHeader("Connection", "close");

Finally: The url variable includes http:// which makes the script think that it's redirecting outside of my own domain and needed to be rewritten to just point to the local path.

The combination of these three items, which were only clear after I started using the console, when resolved allowed my script to properly run inside the Wordpress environment.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.