PDA

View Full Version : Ajax Functions

Ndogg
01-03-2010, 10:16 AM
The below code displays a hint based on what you type into the form.

Example-
Text Form(what you type in): tan
hints: tan, tanning, tanner

The hints are based on what I type in a list but thats not where the problem is.

For this function, when you type info into the form it displays the hint to the right of the txtfield with this '<span id="txtHint2"></span>' but since the id is the same for multiple outputs it would display the hint next to every txtfield or just the top output. So for each output id I need to make it different for instance: id="txtHint2", id="txtHint3". Since the id is changed, I needed to add the variable 'id' to the function so that it could get the different ids. But for 'function stateChanged()' I dont know how to get the 'id' into there?

var xmlhttp

function showHint(str,id)
{
if (str.length==0)
{
document.getElementById("id").innerHTML="";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint2").innerHTML=xmlhttp.responseText;
}
}



<input type="text" name="Difficulty" value="1-100" id="txt2" onkeyup="showHint(this.value,txtHint2)" />

<span id="txtHint2"></span> //Hints display


Its a bad explanation sorry.

Mabey a smaller explanation may help:
Get the id from <span> and insert it into the 'function stateChanged()'
hdewantara
01-05-2010, 01:24 AM
I haven't tested whether stateChanged() could take a parameter,
but the the other option would be passing the parameter as global:
<script type="text/javascript">
...
var
current_id="";

var xmlhttp;

function showHint(a)
{
if (a.value.length==0)
{
current_id=a.id;
document.getElementById(current.id+"_hint").innerHTML="";
return;
}
else{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById(current_id+"_hint").innerHTML=
xmlhttp.responseText;
}
}
...
</script>
<body>
...
<input type="text" name="Difficulty" value="1-100" id="txt2" onkeyup="showHint(this)" />
<span id="txt2_hint"></span> //Hints display
...

The problem is when you are typing too quick into 2 different inputs,
that the current_id has changed before server responses,
we would have hints improperly displayed next to input.
May be the current_id should be an array,
where pop/push operation possible?

Err... is this the way you want?

Regards,
Ndogg
01-06-2010, 12:35 AM
Its not working at all
hdewantara
01-06-2010, 01:12 AM
Ups,

Did you browser show any errors,
while you were trying to get it working?

If I could see complete page..
or perhaps a demo site ?
Ndogg
01-06-2010, 01:57 AM
It says Error on the bottom but It doesnt say what.

All get my site ready real quick and post a link


demo: To test what I have that works, on the first input box that says Difficulty: type a number in there betweeon 1-100
http://trivia.host56.com/The_Office/
bdl
01-06-2010, 05:10 AM
Your menu widget is so invasive I can't even access the input element.

A couple of glaring errors I see with your original code above (unsure what you've changed after the initial post):

function showHint(str,id)
{
if (str.length==0)
{
// note, you're looking for a DOM element named "id" here, not the id argument value!
document.getElementById("id").innerHTML="";
return;
}
...


Then your markup calls this function:

// you're not passing in the 'id' argument properly - is txtHint2 an object or a string?
onkeyup="showHint(this.value,txtHint2)"
hdewantara
01-06-2010, 10:16 PM
OK. I had misplaced the current_id=a.id,
also had not corrected url=url+"?q="+str.

Hope below might revised that.

And to get gethint.php to give specific response to an id,
the "&sid="+Math.random() shall changed into "&sid="+a.id ?

For a HTML page like:
...
<input type="text" name="Difficulty" value="1-100" id="txt1" onkeyup="showHint(this);" />
<span id="txt1_hint"></span>
...
1. Who was the Scranton Branch Manager?
<input type="text" name="MichaelScott01" id="txt2" onkeyup="showHint(this);" />
<span id="txt2_hint"></span>
2. What is Dwight's job title?
<input type="text" name="Dwight01" id="txt3" onkeyup="showHint(this);" />
<span id="txt3_hint"></span>
...

Should have a script like below:
<script type="text/javascript">
var
current_id="";
xmlhttp=null;

function stateChanged(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(current_id+"_hint").innerHTML = xmlhttp.responseText;
}
}

function showHint(a){
if (a.value.length==0){
document.getElementById(current.id+"_hint").innerHTML="";
}
else{
current_id=a.id;
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null){
alert ("Your browser does not support XMLHTTP!");
}
else{
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET","gethint.php?q="+a.value+"&sid="+a.id,true);
xmlhttp.send(null);
}
}
}
...
bdl
01-07-2010, 08:30 AM
hdewantara == Ndogg?

The revised script is a step in the right direction, does it work?
hdewantara
01-07-2010, 08:35 AM
hdewantara == Ndogg?
Why did you say that.. I am not.

The revised script is a step in the right direction, does it work? We'll wait and see how..
bdl
01-07-2010, 08:46 AM
Why did you say that.. I am not.

Oh! I apologize, I had not reviewed the thread to see your original post. My mistake. I thought the OP had two user accounts and posted a followup with the alternate account.
Ndogg
01-08-2010, 06:14 AM
It works!

And all because I left out the end of the script! :p



function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
kungfupanda1
01-11-2010, 03:10 AM
OK. I had misplaced the current_id=a.id,
also had not corrected url=url+"?q="+str.

Hope below might revised that.

And to get gethint.php to give specific response to an id,
the "&sid="+Math.random() shall changed into "&sid="+a.id ?

For a HTML page like:
...
<input type="text" name="Difficulty" value="1-100" id="txt1" onkeyup="showHint(this);" />
<span id="txt1_hint"></span>
...
1. Who was the Scranton Branch Manager?
<input type="text" name="MichaelScott01" id="txt2" onkeyup="showHint(this);" />
<span id="txt2_hint"></span>
2. What is Dwight's job title?
<input type="text" name="Dwight01" id="txt3" onkeyup="showHint(this);" />
<span id="txt3_hint"></span>
...

Should have a script like below:
<script type="text/javascript">
var
current_id="";
xmlhttp=null;

function stateChanged(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(current_id+"_hint").innerHTML = xmlhttp.responseText;
}
}

function showHint(a){
if (a.value.length==0){
document.getElementById(current.id+"_hint").innerHTML="";
}
else{
current_id=a.id;
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null){
alert ("Your browser does not support XMLHTTP!");
}
else{
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET","gethint.php?q="+a.value+"&sid="+a.id,true);
xmlhttp.send(null);
}
}
}
...



Hi all. I'm studing this language. So, you can visit here that do.
w3schools.com/
If you have comment, pls let me know. Thanks
_________________
Vehicle Shipping (http://www.nationaltransportllc.com)
24verglijk
01-12-2010, 06:44 AM
Hi sir,
i hope you are satisfy my answer

Today I would like to share with you a quick solution to the common problem when your AJAX calls to some page that changes over time is not being loaded to your page. In other words, jQuery or your browser is not loading new version of the page.
This problem is common in Mozilla Firefox (FF). Internet Explorer (IE) users I believe, do not experience this problem. Usually it occurs when you use jQuery AJAX functions in javascript setInterval() method. Basically, what happens is that Firefox can not see the changes been made to the page and thinks it’s the same with the old one. So Firefox loads it from cache and you don’t see the new version of your page. To resolve this issue, you should simply add a random string to the request like below.

Thank you. :thumbsup: