get the server side script to create the html to create the links and return that html to your responseText via an echo. Then use javascript to assign the xmlhttp.responseText to an element in your web page.
use javscript’s .split() method to breal up your string of comma delimited values into an array of those values . Then in a FOR loop use DOM methods (createElement() etc etc) to create links for each element in the array and then use appendChild() to place those links where you like in the DOM.
Here’s what I have. How do I get the new link name into the anchor tag?
var txt=xmlhttp.responseText;
var end = txt.slice(0,txt.indexOf(",")); //define number of cycles of For Loop
var txt2 = txt.substr(txt.indexOf(",")+1); //cut 1st position from string and save remaining info
var i = 0;
for (i=0;i<=end;i++){
var link = document.createElement('a'); //create anchor
var new_link = txt.slice(0,txt.indexOf(",")); //name new link/page name
var balance = txt2.substr(txt.indexOf(",")+1); //cut new link from string and store remaning link names
}
For the record, xmlhttp.responseText= “2, Bob , Brittany , Brian”
Where 2 is the number of commas.
I should have said that I need to get the links into the div created by my javascript. Here’s all the code I have so far:
html>
<head>
<script type="text/javascript">
function showHint(str) {
if (str.length==0) {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var div = document.createElement('div');
div.setAttribute('id', 'link_container');
div.setAttribute("style","background-color:red;");
div.style.width = '300px';
div.style.height = '100px';
div.style.margin = '-15px 0px 0px 75px';
var txt=xmlhttp.responseText;
var end = txt.slice(0,txt.indexOf(",")); //define number of cycles of For Loop
var txt2 = txt.substr(txt.indexOf(",")+1); //cut 1st position from string and save remaining info
var i = 0;
for (i=0;i<=end;i++){
var link = document.createElement('a'); //create anchor
var new_link = txt.slice(0,txt.indexOf(",")); //name new link
var balance = txt2.substr(txt.indexOf(",")+1); //cut new link from string and store remaning link names
}
document.getElementsByTagName('body')[0].appendChild(div);
document.getElementById('link_container').innerHTML=txt2+end;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
</body>
</html>
Agreed. Please excuse me. I usually try to post the least amount of code in the interest of making it as easy as possible for someone to respond. Obviously, I should have posted everything. It wasn’t that long.
Any way, the script was displaying the empty red div until I uncommented the second line of the For Loop. That surprised me.
Why do you think it’s choking (I’m trying to work up to the complete For Loop)?
<html>
<head>
<script type="text/javascript">
function showHint(str) {
if (str.length==0) {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var div = document.createElement('div');
div.setAttribute('id', 'link_container');
div.setAttribute("style","background-color:red;");
div.style.width = '300px';
div.style.height = '100px';
div.style.margin = '-15px 0px 0px 75px';
//var txt=document.innerHTML=xmlhttp.responseText;
var txt=xmlhttp.responseText;
var strA = txt.slice(0,txt.indexOf(",")); //define number of cycles of For Loop
var str = txt.substr(txt.indexOf(",")+1); //cut 1st position from string and save remaining info
for (i=0;i<=strA;i++){
var newLink = document.createElement('a'); //create anchor
//newLnk.href = strA[i+1];
//newLnk.innerHTML = strA[i];
//document.getElementById('linksCont').appendChild(newLnk);
}
document.getElementsByTagName('body')[0].appendChild(div);
document.getElementById('link_container').innerHTM;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
</body>
</html>
I’m not sure where you started your debugging process but the first thing that needs to be done, if you haven’t already done so, is check the value of responseText
var txt=xmlhttp.responseText;
[COLOR=#ff0000]alert(txt);[/COLOR]
If txt is not ok, then there is no point in worrying about any downstream code for now.
If txt is ok then check the contents of strA
Your strA is the ouput from a slice() and I’m not sure what you are hoping to do with strA.
Post a correct value of txt and the expected contents of strA. Then post the actual contents of strA.
Anyway, I can’t actually run your code, so just follow the basic debugging process and keep using alert()'s to check values of variables as you step through your code and fix any incorrect variable values as they come up.
How do I get the links into the red div starting with this code?
<html>
<head>
<script type="text/javascript">
function showHint(str) {
if (str.length==0) {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var div = document.createElement('div');
div.setAttribute('id', 'link_container');
div.setAttribute("style","background-color:red;");
div.style.width = '300px';
div.style.height = '100px';
div.style.margin = '-15px 0px 0px 75px';
//var txt=document.innerHTML=xmlhttp.responseText;
var txt=xmlhttp.responseText;
var strA = txt.slice(0,txt.indexOf(",")); //define number of cycles of For Loop
var str = txt.substr(txt.indexOf(",")+1); //cut 1st position from string and save remaining info
for (i=0;i<=strA;i++){
var newLink = document.createElement('a'); //create anchor
newLink.href = strA;
newLink.innerHTML = strA[i];
//document.getElementById('linksCont').appendChild(newLink);
}
document.getElementsByTagName('body')[0].appendChild(div);
document.getElementById('link_container').innerHTML=txt;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
</body>
</html>
How do I get the links into the red div starting with this code?
This is starting to sound like you are just sticking together with band aids bits and pieces of code from cyberspace because if you wrote and understood all that code you would know the answer to how to get the links into the div because you are adding elements to other elements elsewhere in your code already.
I claim authorship for most of this, but I started with a template.
I’ve never created an element that to be placed in another element (my red div) with javascript before or a group of elements for placement into another element (my red div).
That’s where I need your help. I think were almost done.
The script is working again. The empty red div is displaying with this code:
How do i get the Result from the For Loop into the red div?
EDIT: I should’ve asked whether it appears that I’m thinking ab out this right?
<html>
<head>
<script type="text/javascript">
function showHint(str) {
if (str.length==0) {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var div = document.createElement('div');
div.setAttribute('id', 'link_container');
div.setAttribute("style","background-color:red;");
div.style.width = '300px';
div.style.height = '100px';
div.style.margin = '-15px 0px 0px 75px';
//var txt=document.innerHTML=xmlhttp.responseText;
var txt=xmlhttp.responseText;
var strA = txt.slice(0,txt.indexOf(",")); //define number of cycles of For Loop
var str = txt.substr(txt.indexOf(",")+1); //cut 1st position from string and save remaining info
for (i=0;i<=strA;i++){
var newLink = document.createElement('a'); //create anchor
newLink.href = strA;
newLink.innerHTML = str[i];
//document.getElementById('linksCont').appendChild(newLink);
}
document.getElementsByTagName('body')[0].appendChild(div);
document.getElementById('link_container').innerHTML=txt;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
</body>
</html>
I’ve moved this a little further with webdev1958’s help. I’m displaying the last value in the string as a link in the red div, but not the preceding values. I haven’t found a way to group/concat the links produced in the For Loop. How can that be done?
Here’s my code so far:
<html>
<head>
<script type="text/javascript">
function showHint(str) {
if (str.length==0) {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var div = document.createElement('div');
div.setAttribute('id', 'link_container');
div.setAttribute("style","background-color:red;");
div.style.width = '300px';
div.style.height = '100px';
div.style.margin = '-15px 0px 0px 75px';
//var txt=document.innerHTML=xmlhttp.responseText;
var txt=xmlhttp.responseText;
var strA = txt.slice(0,txt.indexOf(",")); //define number of cycles of For Loop
var str = txt.substr(txt.indexOf(",")+1); //cut 1st position from string and save remaining info
for (i=0; i<=strA; i++){
var newLink = document.createElement('a'); //create anchor
var linkName = str.slice(0,str.indexOf(","));
newLink.href = linkName+".php";
newLink.innerHTML = linkName;
var str = str.substr(str.indexOf(",")+1);
}
document.getElementsByTagName('body')[0].appendChild(div);
//document.getElementById('link_container').innerHTML=str;
document.getElementById('link_container').appendChild(newLink);
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
</body>
</html>