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"> </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"> </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"> </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>
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();
}
Related
This is regarding an issue related to the dynamic html table row controls. I have 2 cascading dropdowns named tagId and tagName. I have successfully implemented the cascading dropdowns. But the issue is while I am adding new rows to the table dynamically, the cascading drop downs are not working any more, on child rows. But, it's working properly on the top row. Please help me to resolve this.
From PopulateTagName.jsp I am getting second dropdown values based on first dropdown value.
Code::
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<%
%>
<script>
function myFunction() {
var selected = document.getElementById("TagID").value;
if (selected != "Select Tag ID") {
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var doc = this.responseText;
var ar = doc.split(',');
var sel = document.getElementById('TagName');
document.getElementById("TagName").options.length = 1;
for( var i= 0; i< ar.length; i++){
var opt = document.createElement('option');
opt.innerHTML = ar[i];
opt.value=ar[i];
sel.appendChild(opt);
}
}
};
xmlhttp.open("POST","PopulateTagName.jsp?TagID="+selected , true);
xmlhttp.send();
}
}
$(document).ready(function(){
$('#addRow').click(function(){
var sno=$('#pTable tr').length;
trow= "<tr><td class='sNo'>"+sno+"</td>"+
"<td><select name='TagID' id ='TagID' onchange='myFunction()'><option value='Select Tag ID'>Select Tag ID</option><option value='test1'>test1</option><option value='test2'>test2</option><option value='test3'>test3</option><option value='test4'>test4</option></select></td>"+
"<td><select name='TagName'><option value ='Select Tag Name'>Select Tag Name</option></select></td>"+
"<td><input name='TagValue' type='text'></td>"+
"<td><button type='button' class='rButton'>Remove</button></td></tr>";
$('#pTable').append(trow);
});
});
$(document).on('click', 'button.rButton', function () {
$(this).closest('tr').remove();
arrangeSno();
return false;
});
function arrangeSno(){
var i=0;
$('#pTable tr').each(function() {
$(this).find(".sNo").html(i);
i++;
});
}
</script>
<table id="pTable">
<tbody>
<tr>
<td>Serial No</td>
<td>*Select Tag ID:</td>
<td>Select Tag Name:</td>
<td>Input Tag Value:</td>
<td><input id="addRow" type="button" value="Add"></td>
</tr>
</tbody>
</table>
</body>
</html>
For the pre generated DOM it works with the
$('#addRow').click(function(){
But for the newly added DOM elements it works only with the .live function rather than .on so you must write your code as
$(document).live('click', '#addRow', function () {
Note : I can't regerate your issue on my machine but although ran into the same issue a long ago. And here's the solution. :)
I am prepared to take hits on this question, because I don't even know how to go about researching this. I did try, don't get me wrong. Maybe someone can tell me what it would even be called. Anyways, I have an .htm file and am passing a variable to it like
Response.Redirect("multiImage.htm?val1=2");
I want to generate val1 many images. so in this example, val1=2, so 2 images generated. I'm not very skilled with html or javascript and this is what I have so far:
<!--When a new camera is added, one needs to change the bound in the for loop in the javascript function in part a.
Then add a new image in part b.-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--********************************Part a**********************************-->
<title>Cameras</title>
<script type="text/javascript" language="JavaScript">
var num = '<%= Request.QueryString("val1") %>';
function refreshIt() {
if (!document.images) return;
for (var i = 1; i <= num; i++) {
document.getElementById("imgcontainer" + i).src = "/Imghandler2.ashx?id=" + i + "&rand=" + Math.random();
}
setTimeout('refreshIt()', 1000);
}
</script>
</head>
<!--********************************Part b**********************************-->
<body onload="setTimeout('refreshIt()',1000)">
<table>
<tr>
That part works, and so does this:
<!-- <td><img id="imgcontainer1" src="/Imghandler2.ashx?id=1" alt="cam image" /></td>
<td><img id="imgcontainer2" src="/Imghandler2.ashx?id=2" alt="cam image" /></td>
</tr>
<tr>
<td><img id="imgcontainer3" src="/Imghandler2.ashx?id=3" alt="cam image" /></td>
<td><img id="imgcontainer4" src="/Imghandler2.ashx?id=4" alt="cam image" /></td>
</tr>
<tr>
<td><img id="imgcontainer5" src="/Imghandler2.ashx?id=5" alt="cam image" /></td>
<td><img id="imgcontainer6" src="/Imghandler2.ashx?id=6" alt="cam image" /></td>-->
But I have commented the above out, because I want to auto generate that. Something like this below. And I know this doesn't work, but hopefully it will give an idea of what I'm trying to do:
<script type="text/javascript" language="JavaScript">
var num = '<%= Request.QueryString("val1") %>';
for (var i = 1; i <= num; i++) {
document.write('<tr>')
document.write('<img id="imgcontainer[i+1]" src="/Imghandler2.ashx?id=[i+1]" alt="cam image" />')
document.write('</tr>')
}
</script>
</tr>
</table>
</body>
</html>
Like I said, I don't even know how I would go about researching this. I did try, but didn't find what I needed. Is this even possible?
After more research I found out how to do this. Here is my full html code:
<!--This .htm file creates an img for the image to be displayed. The number img's created is equal to the number
of cameras selected in "Main.aspx"-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cameras</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<!--*************************beginning of javascript code******************************-->
<script type="text/javascript" language="JavaScript">
// Function gets the parameter values in the url string.
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
// Function programmatically creates a new img for each camera selected in Main.aspx.
function add() {
for (var i = 1; i <= getParameterByName('val1'); i++) {
var element = document.createElement("img");
element.setAttribute("id", "imgcontainer" + i.toString());
element.setAttribute("src", "/Imghandler2.ashx?id=" + i.toString());
element.setAttribute("alt", "cam image");
document.getElementById("table1").appendChild(element);
}
}
// Function updates each image in each img
function refreshIt() {
if (!document.images) return;
for (var i = 1; i <= getParameterByName('val1'); i++) {
document.getElementById("imgcontainer" + i).src = "/Imghandler2.ashx?id=" + i + "&rand=" + Math.random();
}
setTimeout('refreshIt()', 1000);
}
</script>
<!--*************************end of javascript code******************************-->
</head>
<body onload="add(); setTimeout('refreshIt()',1000);">
<table id="table1">
</table>
</body>
</html>
I have the code here:
function cbfunca(datas){
var videoRefs = (datas.value.items[0].content);
var frames = 'http://www.youtube
nocookie.com/v/'+videoRefs+'?version=3&hl=en_GB&rel=0\"
type=\"application/x-shockwave-flash\" width=\"560\"
height=\"349\">';
var curtextvals = document.getElementById("pumps");
curtextvals.innerHTML = (frames);
}
Video Should Be Here, If you see this, you did something wrong
_id=f261e19584a4dd5cb0a61386b24e80bf&_render=json&_callback=cbfunca">
the second code here:
function cbfunc(data){
var videoRef = (data.value.items[0].content);
var frame = 'http://www.youtube-
nocookie.com/v/'+videoRef+'?version=3&hl=en_GB&rel=0\" type=\"application/x-shockwave-
flash\" width=\"560\" height=\"349\">';
var curtextval = document.getElementById("pump");
curtextval.innerHTML = (frame);
}
Video Should Be Here, If you see this, you did something wrong
The First one always Doesn't appear? how might i fix this? Sorry the code doesn't seem to come up right here.
Code from your link that works for me (it does show 2 videos on the webpage); after adding a "/v/" on the second iframe url.
<td bgcolor="#FFFFFF" valign="middle" align="center"colspan="2" class="dty"><span class="t">Most Recent Video</span>
<script type="text/javascript">
function cbfunc(data){
var videoRef = (data.value.items[0].content);
var frame = '<iframe class=\"embeddedvideo\" src=\"http://www.youtube-nocookie.com/v/'+videoRef+'?version=3&hl=en_GB&rel=0\" type=\"application/x-shockwave-flash\" width=\"560\" height=\"349\"></iframe>';
var curtextval = document.getElementById("pump");
curtextval.innerHTML = (frame);
}
</script>
<div id="pump">Video Should Be Here, If you see this, you did something wrong</div>
<p>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=35717280d4cd32a61acd1a36f09635c5&_render=json&_callback=cbfunc">
</script>
</th>
</tr> <tr>
<td bgcolor="#FFFFFF" valign="middle" align="center"colspan="2" class="dty"><span class="t">Most Recent Minecraft Video</span>
<script type="text/javascript">
function cbfunca(datas){
var videoRefs = (datas.value.items[0].content);
var frames = '<iframe class=\"embeddedvideo\" src=\"http://www.youtube-nocookie.com/v/'+videoRefs+'?version=3&hl=en_GB&rel=0\" type=\"application/x-shockwave-flash\" width=\"560\" height=\"349\"></iframe>';
var curtextvals = document.getElementById("pumps");
curtextvals.innerHTML = (frames);
}
</script>
<div id="pumps">Video Should Be Here, If you see this, you did something wrong</div>
<p>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=f261e19584a4dd5cb0a61386b24e80bf&_render=json&_callback=cbfunca">
</script>
I recently found this piece of javascript for a game that I play which basically makes my life easier in the game by doing some parsing. The script was working great when I first used it but then I stopped using it for a few weeks as I had less time to play the game and therefore use the script. I started again yesterday and suddenly, the script no longer worked and I couldnt parse the info that I needed. It no longer works when I click the submit button after the info is put into the text box.
Could anyone help me in finding out what is wrong and why it wont work anymore?
Here is the script and here it is on a website (incase what I posted below got messed up or whatever: www.cnparser.webs.com
<html>
<head>
<title>Recruitment Parser</title>
<script type="text/javascript">
window.onload = function()
{
var pageSource = document.getElementById('pgsource');
var submitButton = document.getElementById('submit');
var bbcodeBox = document.getElementById('nobb');
var outputArea = document.getElementById('output');
submitButton.onclick = function()
{
var cyberMessageLink = "http:\/\/www.cybernations.net/send_message.asp?Nation_ID=";
var cleanUp = pageSource.value.replace(/[^A-Za-z0-9 >]/g, "");
var rulerNames = cleanUp.match(/titleRuler[A-Za-z0-9_ ]{3,}(?=>)/gi);
var nationID = cleanUp.match(/ageaspNationID[0-9]{3,}/g);
if(bbcodeBox.checked)
{
for(var i=0; i<rulerNames.length; i++)
{
if(i%25==0)
{
outputArea.innerHTML+="[url="+cyberMessageLink+nationID[i].substring(14)+"]"+rulerNames[i].substring(11)+"[/url]" + "<br>";
continue;
}
outputArea.innerHTML+=rulerNames[i].substring(11) + "<br>";
if(i%24==0)outputArea.innerHTML+="<br>";
}
} else {
for(var i=0; i<rulerNames.length; i++)
{
if(i%25==0)outputArea.innerHTML+="<br>";
outputArea.innerHTML+=rulerNames[i].substring(11) + "<br>";
}
}
}
}
</script>
</head>
<body>
<table border="0">
<tr>
<td>
<textarea id="pgsource" cols="80" rows="20"></textarea><br/>
</td>
<td>
<b>Style</b><br>
<input id="nobb" type="checkbox">BBcode</input><br>
</td>
</tr>
</table>
<button id="submit">Submit</button><br><br>
<span id="output"></span>
<!-- --><script type="text/javascript" src="http://static.websimages.com/static/global/js/webs/usersites/escort.js"></script> <script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305- 2";_udn="none";_uff=false;urchinTracker();}</script></body>
</html>
From the linked site:
If this stops working email: gnomy#hushmail.com
Did you email Gnomy?
How do I add the ability to search xml tags by either first or last name using Javascript? At the moment it only works for first name. See code.
<html>
<head>
<script type="text/javascript">
function createRequestObject() {
var ro
var browser = navigator.appName
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP")
}else{
ro = new XMLHttpRequest()
}
return ro
}
var http = createRequestObject()
function sndReq() {
http.open('get', 'js2lab5.xml', true)
http.onreadystatechange = handleResponse
http.send(null)
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseXML.documentElement
listings=response.getElementsByTagName("LISTING")
for (i=0;i
if (nameobj[0].firstChild.data == document.getElementById("first").value){
addressobj = listings[i].getElementsByTagName("ADDRESS")
phoneobj = listings[i].getElementsByTagName("PHONE")
imgobj = listings[i].getElementsByTagName("IMAGE")
document.getElementById("address").innerHTML = addressobj[0].firstChild.data
document.getElementById("phone").innerHTML = phoneobj[0].firstChild.data
document.getElementById("photo").innerHTML = "<img src=' " + imgobj[0].firstChild.data + " ' />"
}
}
}
}
</script>
</head>
<body>
<form id="search">
<input type="text" id="first" />
<input type="button" value="Search Phonebook" onClick="sndReq()" />
</form>
<div id="address"></div>
<div id="phone"></div>
<div id="photo"></div>
</body>
</html>
And the XML code:
<?xml version="1.0"?>
<!DOCTYPE PHONEBOOK>
<PHONEBOOK>
<LISTING>
<FIRST>John</FIRST>
<LAST>Smith</LAST>
<PHONE>1-800-123-4567</PHONE>
<ADDRESS>320 E. John St, Champaign IL 61820</ADDRESS>
<IMAGE>smith.jpg</IMAGE>
</LISTING>
</PHONEBOOK>
Selecting nodes with XPATH is alot easier.
var query = nameobj[0].firstChild.data;
response.selectNodes("(//FIRST|//LAST)[text()='"+query+"']")
Sadly Microsoft and Firefox have a different model for selecting with Xpath so there's basically 2 solutions prototype selectNodes in FireFox as is shown here.
Or by including a great XML cross browser wrapper like Sarissa.
Depending on your needs the first might be good enough. If your planning on doing alot of stuff with XML in the browser investing in Sarissa will pay off tenfold.