www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: GetElementbyId by changing id

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    15

    GetElementbyId by changing id

    Hello everybody i really hope someone here could help me out.
    This is kind of ajax/php question but it's all up-to simple js value now.
    I have this piece of code (for ajax rating):
    Code:
    var url="rate.php" 
    url=url+"?q="+str 
    url=url+"&id="+id+"&sid="+Math.random() 
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("GET",url,true) 
    xmlHttp.send(null) 
    } 
    
    function stateChanged() 
    { 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") 
    { 
    document.getElementByid("txtReload").innerHTML=xmlHttp.responseText; 
    } 
    }
    Usualy works like a charm but, now i need to change it a bit.So the thing that i need to change is the value inside ("txtReload") so it could become txtReload1
    where 1 is the value passed through the url (get=id)
    Why would i need that?Well i have several element and i need to be reloaded the one which i press the button,and now when i click any of the buttons i reload only the first div with id txtReload.
    I tried a lot with ("txtReload"+"+id+") or ("txtReload"+id+)
    and many more , but i just don't know the right syntax and if he +id+ is the right value (since it should get it from url)

  2. #2
    Join Date
    Nov 2011
    Location
    Nigeria
    Posts
    28
    Use this:
    Code:
    ("txtReload"+id)

  3. #3
    Join Date
    Apr 2012
    Posts
    15
    Well as i said i've tried a lot of these combinations .. and doesnt work.
    Only works when i use original code and it reloads only the first div with id txtReload... and after a refresh i can see the real result.
    Any suggestions ?

  4. #4
    Join Date
    Jan 2012
    Posts
    31
    ibixxon is giving you the correct syntax. If it is not working use alert to see what "txtReload"+id outputting
    Code:
    alert("txtReload"+id);
    The mistake is likely in what the value of "id" is.

  5. #5
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    Code:
    var url="rate.php" 
    url=url+"?q="+str 
    url=url+"&id="+id+"&sid="+Math.random() 
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("GET",url,true) 
    xmlHttp.send(null) 
    } 
    
    function stateChanged(id) 
    { 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") 
    { 
    document.getElementByid("txtReload"+id).innerHTML=xmlHttp.responseText; 
    } 
    }

  6. #6
    Join Date
    Apr 2012
    Posts
    15
    Edit:so far this code works best
    Code:
    var xmlHttp 
    
    function showHint(str, id) 
    { 
    xmlHttp=GetXmlHttpObject() 
    if (xmlHttp==null) 
    { 
    alert ("Browser does not support HTTP Request") 
    return 
    } 
    var url="rate.php" 
    url=url+"?q="+str 
    url=url+"&id="+id+"&sid="+Math.random() 
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("GET",url,true) 
    xmlHttp.send(null) 
    } 
    
    function stateChanged(id) 
    { 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") 
    { 
    document.getElementById("txtReload").innerHTML=xmlHttp.responseText; 
    alert("txtReload"+id);
    } 
    } 
    
    function GetXmlHttpObject() 
    { 
    var objXMLHttp=null 
    if (window.XMLHttpRequest) 
    { 
    objXMLHttp=new XMLHttpRequest() 
    } 
    else if (window.ActiveXObject) 
    { 
    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") 
    } 
    return objXMLHttp 
    }
    The thing is that when i click and it runs it shows me the alert text: txtReload [object XMLHttpRequestProgressEvent]
    which means that id still doesnt show the right value
    Last edited by wdas; 04-02-2012 at 03:14 PM.

  7. #7
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    yup, ok this should do it
    Code:
    var xmlHttp 
    
    function showHint(str, id) 
    { 
    xmlHttp=GetXmlHttpObject() 
    if (xmlHttp==null) 
    { 
    alert ("Browser does not support HTTP Request") 
    return 
    } 
    var url="rate.php" 
    url=url+"?q="+str 
    url=url+"&id="+id+"&sid="+Math.random() 
    xmlHttp.onreadystatechange=stateChanged(id)
    xmlHttp.open("GET",url,true) 
    xmlHttp.send(null) 
    } 
    
    function stateChanged(id) 
    { 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") 
    { 
    document.getElementById("txtReload"+id).innerHTML=xmlHttp.responseText; 
    alert("txtReload"+id);
    } 
    } 
    
    function GetXmlHttpObject() 
    { 
    var objXMLHttp=null 
    if (window.XMLHttpRequest) 
    { 
    objXMLHttp=new XMLHttpRequest() 
    } 
    else if (window.ActiveXObject) 
    { 
    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") 
    } 
    return objXMLHttp
    [/QUOTE]

  8. #8
    Join Date
    Apr 2012
    Posts
    15
    Nope doesnt work, check out my previous post i've edited it.

  9. #9
    Join Date
    Jan 2012
    Posts
    31
    The thing is that when i click and it runs it shows me the alert text: txtReload [object XMLHttpRequestProgressEvent]
    So "id" is an object and you need it to be a string.

    In all the code you have posted you have not shown us where the value of "id" is set. That may be the biggest clue as to what is happening.

    And as DanInMA ambiguously points out, this line
    Code:
    xmlHttp.onreadystatechange=stateChanged
    needs to be
    Code:
    xmlHttp.onreadystatechange=stateChanged(id)
    On a side note IE7+ supports "XMLHttpRequest" and as IE7 is now under 5% of internet user you can safely drop "ActiveXObject".

  10. #10
    Join Date
    Apr 2012
    Posts
    15
    If i change the code as DaninMa wrote, the alernt isn't shown... and the div isn't reloaded aswell...
    This is the entire ajax_vote.js code, the rest
    myitem.php is just 12divs with txtReload1,txtReload15 and etc...
    and a picture with link
    Code:
    a href="javascript:void(null)" onclick="showHint('1','<?=$id?>')
    and same for showhint('2','<?=1$id?>')
    where 1 and 2 are the values of rate , and $id is id of current item , get from mysql db query they are passed through the ajax_vote.js (the code i've shown) and then to rate.php which needs to be reloaded so when u rate u can see that u've rated ... but this is where is the issues it doesnt reload or if reload reloads only first div in page.
    Last edited by wdas; 04-02-2012 at 03:55 PM.

  11. #11
    Join Date
    Jan 2012
    Posts
    31
    If i change the code as DaninMa wrote, the alernt isn't shown... and the div isn't reloaded aswell...
    One of you problems is that the value of "id" is not passed to the "stateChanged" function. "id" is a local variable inside the "showHint" function so "stateChanged" has no way of knowing what the value of "id" is unless you pass it to "stateChanged", or make the "id" variable global. It is important to understand the scope of variables.

    local scope variable
    Code:
    function myfunc()
    {
        var myvar = '';
    }
    
    // and
    
    function myfunc(myvar)
    {
        
    }
    global scope variable
    Code:
    var myvar = '';
    function myfunc()
    {
    
    }
    
    // and
    
    function myfunc()
    {
        myvar = '';
    }
    Variables that are local to a particular function cannot be accesed by any other function. Whereas global variables can be accessed by any function.

    Try placing an "alert(id)" in the first line of the "showHint" and see what you get. If it is the value you expect you just have to get that value to the "stateChanged" function.
    Last edited by _Krik_; 04-02-2012 at 04:20 PM.

  12. #12
    Join Date
    Apr 2012
    Posts
    15
    This is exactly what i've been expecting, because i tought that id is value only inside a function and the sytax (even if is the right one) wont help me , because i can't really acess it.
    So i did what u suggest and it worked it showed the id that i need,but
    Code:
    var xmlHttp 
    
    function showHint(str, id) 
    { 
    xmlHttp=GetXmlHttpObject() 
    if (xmlHttp==null) 
    { 
    alert ("Browser does not support HTTP Request") 
    return 
    } 
    var url="rate.php" 
    url=url+"?q="+str 
    url=url+"&id="+id+"&sid="+Math.random() 
    xmlHttp.onreadystatechange=stateChanged(id) 
    xmlHttp.open("GET",url,true) 
    xmlHttp.send(null) 
    } 
    
    function stateChanged(id) 
    { 
    alert("txtReload"+id);
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") 
    { 
    document.getElementById("txtReload"+id).innerHTML=xmlHttp.responseText; 
    } 
    } 
    
    function GetXmlHttpObject() 
    { 
    var objXMLHttp=null 
    if (window.XMLHttpRequest) 
    { 
    objXMLHttp=new XMLHttpRequest() 
    } 
    else if (window.ActiveXObject) 
    { 
    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") 
    } 
    return objXMLHttp 
    }
    It shows me the txtReload1-2-3 allert but, doest seems to reload the div,i guess the id variable isn't accessible inside the
    Code:
    document.getElementById("txtReload"+id).innerHTML=xmlHttp.responseText;
    because if i move the alarm line from before IF and put it after { or under the getelementbyID doesnt show any alarm.
    :X
    Last edited by wdas; 04-03-2012 at 02:15 AM.

  13. #13
    Join Date
    Apr 2012
    Posts
    15
    I don't really know how to make it global varaible, i looked up in google but i can't implement it into my code.Can anyone help me make id a global variable and put it aftet getelementbyid("txtReload"+idhere)

  14. #14
    Join Date
    Apr 2012
    Posts
    15
    anyone?

  15. #15
    Join Date
    Dec 2005
    Posts
    2,984
    Wow, I'm blown away at all the wrong answers you've been given.

    It's a simple issue...create an anonymous function for the statechanged callback so that the id variable is within scope like this:

    Code:
    xmlHttp.onreadystatechange=function() {
     alert("txtReload"+id);
     if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
      document.getElementById("txtReload"+id).innerHTML=xmlHttp.responseText; 
     } 
    };
    I can't believe that some people said this code would work:

    Code:
    xmlHttp.onreadystatechange=stateChanged(id)
    The onreadystatechange property takes a function reference, not the result of a function execution (which is what you get when you add () after a function name).

    The above, incorrect code gets executed immediately, whether you request was sent or not, because that's what the () after the function name tells it - to execute immediately.

    While I haven't demonstrated all the code that you need, hopefully I've given you a paradigm that you will know how to use to get the result that you want.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles