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 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Sending a variable to a js function - not working

    Hey All,

    I've been fighting this one for a few months now, and it is causing me to have to create multiple functions that basically do the same thing. I am using the three functions below to replace text between two div tags on a page, based on a link that is clicked:

    Code:
    <td><a href=\"javascript:void(0)\" onclick=\"htmlData('ajax/loginContent.php', 'view=1','data=2','displayField=txtResult')\">Active Jobs</a></td>\n";
    Then further down the page:
    Code:
    <div id="txtResult">replace this content</div>
    For some reason, I CANNOT send the div id name as a js variable. When I do it errors out. BUT if I replace displayField in the js functions below with "txtResult" it works fine. I am fairly new to js, so it is definitely possible that I am doing something incorrectly. Anyone have any ideas for me?

    Code:
    function GetXmlHttpObject(handler) {   
       var objXMLHttp=null  
       if (window.XMLHttpRequest)   
       {   
           objXMLHttp=new XMLHttpRequest()   
       }   
       else if (window.ActiveXObject)   
       {   
           objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")   
       }   
       return objXMLHttp   
    }   
      
    function stateChanged(displayField){
       if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")   
       {   
               document.getElementById(displayField).innerHTML= xmlHttp.responseText;   
       }   
       else {   
               //alert(xmlHttp.status);   
       }   
    }   
      
    // Will populate data based on input   
    function htmlData(url, qStr, qStr2,displayField){
       if (url.length==0)   
       {   
           document.getElementById(displayField).innerHTML="";   
           return;   
       }   
       xmlHttp=GetXmlHttpObject()   
       if (xmlHttp==null)   
       {   
           alert ("Browser does not support HTTP Request");   
           return;   
       }   
      
       url=url+"?"+qStr; 
       if(qStr2)
         url=url+"&"+qStr2;  
       url=url+"&sid="+Math.random();   
    
       xmlHttp.onreadystatechange=stateChanged(displayField);   
       xmlHttp.open("GET",url,true) ;   
       xmlHttp.send(null);   
    }

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Well, for starters, the argument needs to be passed as just
    Code:
    'txtResult'
    and *NOT* as
    Code:
    'displayField=txtResult'
    That is,
    Code:
    "<td><a href=\"javascript:void(0)\" "
    + "onclick=\"htmlData('ajax/loginContent.php','view=1','data=2','txtResult')\">Active Jobs</a></td>\n";
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    tjfoz (11-18-2010)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow... That makes a ton of sense. The rest of them are being appended to a url and somehow I just applied that to my displayField variable as well... Sorry for that bit of idiocy.

    I changed it and now I receive a "Not Implemented" error on the highlighted line below:

    Code:
    function GetXmlHttpObject(handler) {   
       var objXMLHttp=null  
       if (window.XMLHttpRequest)   
       {   
           objXMLHttp=new XMLHttpRequest()   
       }   
       else if (window.ActiveXObject)   
       {   
           objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")   
       }   
       return objXMLHttp   
    }   
      
    function stateChanged(displayField){
       if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")   
       {   
               document.getElementById(displayField).innerHTML= xmlHttp.responseText;   
       }   
       else {   
               //alert(xmlHttp.status);   
       }   
    }   
      
    // Will populate data based on input   
    function htmlData(url, qStr, qStr2,displayField){
       if (url.length==0)   
       {   
           document.getElementById(displayField).innerHTML="";   
           return;   
       }   
       xmlHttp=GetXmlHttpObject()   
       if (xmlHttp==null)   
       {   
           alert ("Browser does not support HTTP Request");   
           return;   
       }   
      
       url=url+"?"+qStr; 
       if(qStr2)
         url=url+"&"+qStr2;  
       url=url+"&sid="+Math.random();   
    
    xmlHttp.onreadystatechange=stateChanged(displayField);   
       xmlHttp.open("GET",url,true) ;   
       xmlHttp.send(null);   
    }
    Honestly, I feel like this was the original issue I was having when I was working on it a few months ago, but then I gave up (needed to get a project finished and it was easier at the time to just create additional functions). The original code sends no parameters to the stateChanged function and that seems to work just fine?

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    highlighted so well you can't see it.

    Here is the line:
    Code:
    xmlHttp.onreadystatechange=stateChanged(displayField);

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Yeah, you can't pass an argument to stateChanged.

    The proper coding is:
    Code:
    xmlHttp.onreadystatechange = stateChanged;  // NAME of function, only!
    There are a couple of ways to do this. The easiest is to simply make displayField a page scope (global) variable. If you aren't worried about two calls to this AJAX function colliding with each other, go with that. By far easiest.

    If you can't do that, you'll have to learn about closure.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the help Pedant!

    Unfortunately I do have to worry about multiple calls colliding so closure it is

  • #7
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tjfoz View Post
    Thanks for the help Pedant!

    Unfortunately I do have to worry about multiple calls colliding so closure it is
    Here is how you can do it: When you assign a value to xmlHttp.onreadystatechange that value needs to be a function-object. You can call a function (and pass it a variable) as long as that function returns a function-object.

    I've made an example (with more detailed explanation) to show how it can be done.

    http://webinterfacetricks.com/event_closures/

    It uses a button's onclick event handler for simplicity, but the same concept can apply to an ajax object's onreadystagechange event handler, or to anything that requires a function-object to be assigned.


  •  

    Tags for this Thread

    Posting Permissions

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