Javascript/AJAX Error 404 Not found or Undefined

Jonathan Griffin

I have a page which loops down the first column and copies the value to a text box, and then it is supposed to query data.asp, but I keep getting an error of either GET http://192.168.1.12/pb_search/v2/demo/data.asp?h_prodref=undefined 404 (Not Found) or XHR finished loading: GET "http://192.168.1.12/pb_search/v2/demo/data.asp?h_prodref=undefined". Errors from Google Chrome Developer Tools.

Both my scripts work independently, but when I piece them together, I get these erorors. I am probably missing something really simple, but I very much learning this on the fly, so any help would be appreciated.

Full Code

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<table width="50%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td width="16%" class="prodref">84PS01</td>
    <td width="51%"><input type="text" class="h_prodref" /><button type="button" onclick="loadDoc()">Change Content</button></td>
    <td width="33%" id="demo">&nbsp;</td>
  </tr>
  <tr>
    <td class="prodref">92K002</td>
    <td><input type="text" class="h_prodref" /><button type="button" onclick="loadDoc()">Change Content</button></td>
    <td id="demo">&nbsp;</td>
  </tr>
  <tr>
    <td class="prodref">68F017</td>
    <td><input type="text" class="h_prodref" /><button type="button" onclick="loadDoc()">Change Content</button></td>
    <td id="demo">&nbsp;</td>
  </tr>
</table>
<script>
    var prodref = document.getElementsByClassName("prodref");
    var h_prodref = document.getElementsByClassName("h_prodref");
    var i = 0;
    for (i; i < prodref.length; i++) {
    h_prodref[i].value = prodref[i].innerHTML;
function loadDoc() {
    var x = document.getElementsByClassName("h_prodref");
    x[i] = document.getElementsByClassName("h_prodref").value;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  }
  xhttp.open("GET", "data.asp?h_prodref="+x[i].value, true);
  xhttp.send();
}
    }
</script>
user692942

So What's the Problem?

The value undefined is getting added into AJAX call that is made instead of the expected value of x[i].value. I'm making an assumption here though and that is that

http://192.168.1.12/pb_search/v2/demo/data.asp

exists and the HTTP 404 Not Found is being forced by the data.asp script as a scripted response and not because the server can't find the data.asp page.

Restructuring the JavaScript

When calling a function you don't need the entire definition at the point where you want to call it, if this was the case you would have the same function being duplicated throughout the code where it is called breaking fundamental principles in programming like DRY.

Here is a quick example of restructuring the JavaScript code:

var prodref = document.getElementsByClassName("prodref");
var h_prodref = document.getElementsByClassName("h_prodref");
var i = 0;
for (i; i < prodref.length; i++) {
  h_prodref[i].value = prodref[i].innerHTML;
  // Call function inside the loop
  loadDoc();
}

// Definition should be defined once
function loadDoc() {
  var x = document.getElementsByClassName("h_prodref");
  x[i] = document.getElementsByClassName("h_prodref").value;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  }
  xhttp.open("GET", "data.asp?h_prodref="+x[i].value, true);
  xhttp.send();
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related