Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13

Thread: Ajax Functions

  1. #1
    Regular Coder
    Join Date
    Jun 2009
    Posts
    278
    Thanks
    78
    Thanked 2 Times in 2 Posts

    Ajax Functions

    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?

    PHP Code:
    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;
      }


    PHP Code:
    <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()'

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    372
    Thanks
    9
    Thanked 54 Times in 53 Posts
    I haven't tested whether stateChanged() could take a parameter,
    but the the other option would be passing the parameter as global:
    Code:
    <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,

  • Users who have thanked hdewantara for this post:

    Ndogg (01-08-2010)

  • #3
    Regular Coder
    Join Date
    Jun 2009
    Posts
    278
    Thanks
    78
    Thanked 2 Times in 2 Posts
    Its not working at all

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    372
    Thanks
    9
    Thanked 54 Times in 53 Posts
    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 ?
    Last edited by hdewantara; 01-06-2010 at 01:17 AM.

  • #5
    Regular Coder
    Join Date
    Jun 2009
    Posts
    278
    Thanks
    78
    Thanked 2 Times in 2 Posts
    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/
    Last edited by Ndogg; 01-06-2010 at 02:12 AM.

  • #6
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    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):
    Code:
    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:
    Code:
    // you're not passing in the 'id' argument properly - is txtHint2 an object or a string?
    onkeyup="showHint(this.value,txtHint2)"

  • Users who have thanked bdl for this post:

    Ndogg (01-08-2010)

  • #7
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    372
    Thanks
    9
    Thanked 54 Times in 53 Posts
    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:
    Code:
    ...
    <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:
    Code:
    <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);
        }
      }
    }
    ...

  • Users who have thanked hdewantara for this post:

    Ndogg (01-08-2010)

  • #8
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    hdewantara == Ndogg?

    The revised script is a step in the right direction, does it work?

  • #9
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    372
    Thanks
    9
    Thanked 54 Times in 53 Posts
    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..

  • #10
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Quote Originally Posted by hdewantara View Post
    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.

  • #11
    Regular Coder
    Join Date
    Jun 2009
    Posts
    278
    Thanks
    78
    Thanked 2 Times in 2 Posts
    It works!

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


    PHP Code:
    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;


  • #12
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hdewantara View Post
    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:
    Code:
    ...
    <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:
    Code:
    <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

  • #13
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow hi,

    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.
    Last edited by WA; 01-12-2010 at 08:42 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •