GetElementbyId by changing id

@wdasApr 02.2012

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; } } [/code]

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)

to post a comment

JavaScript

17 Comments(s) _↴

@ibixxonApr 02.2012 — #Use this:

[CODE]
 ("txtReload"+id)
 [/CODE]

@wdasauthorApr 02.2012 — #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 ? ?

@_Krik_Apr 02.2012 — #ibixxon is giving you the correct syntax. If it is not working use alert to see what "txtReload"+id outputting

[CODE]
 alert("txtReload"+id);
 [/CODE]

The mistake is likely in what the value of "id" is.

@DanInMAApr 02.2012 — #

[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([COLOR="Red"]id[/COLOR]) 
 { 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") 
 { 
 document.getElementByid("txtReload"+id).innerHTML=xmlHttp.responseText; 
 } 
 }[/CODE]

@wdasauthorApr 02.2012 — #Edit:so far this code works best

<i>
 </i>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+"&amp;id="+id+"&amp;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 [b]id[/b] still doesnt show the right value

?

@DanInMAApr 02.2012 — #yup, ok this should do it

<i>
 </i>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+"&amp;id="+id+"&amp;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]

@wdasauthorApr 02.2012 — #Nope doesnt work, check out my previous post i've edited it.

@_Krik_Apr 02.2012 — #
The thing is that when i click and it runs it shows me the alert text: txtReload [object XMLHttpRequestProgressEvent]
[/QUOTE]
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
 [/CODE]

needs to be

[CODE]
 xmlHttp.onreadystatechange=stateChanged(id)
 [/CODE]

On a side note IE7+ supports "XMLHttpRequest" and as IE7 is now under 5% of internet user you can safely drop "ActiveXObject".

@wdasauthorApr 02.2012 — #If i change the code as DaninMa wrote, the alernt isn't shown... and the div isn't reloaded aswell...

This is the entire [B]ajax_vote.js[/B] code, the rest

[B]myitem.php[/B] is just 12divs with txtReload1,txtReload15 and etc...

and a picture with link

a href="javascript:void(null)" onclick="showHint('1','&lt;?=$id?&gt;')
 and same for showhint('2','&lt;?=1$id?&gt;')

where 1 and 2 are the values of rate , and $id is [B]id[/B] 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.

@_Krik_Apr 02.2012 — #
If i change the code as DaninMa wrote, the alernt isn't shown... and the div isn't reloaded aswell...
[/QUOTE]
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)
 {
 
 }
 
 [/CODE]

global scope variable

[CODE]
 var myvar = '';
 function myfunc()
 {
 
 }
 
 // and
 
 function myfunc()
 {
 myvar = '';
 }
 [/CODE]

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.

@wdasauthorApr 03.2012 — #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

<i>
 </i>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+"&amp;id="+id+"&amp;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 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

@wdasauthorApr 03.2012 — #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)

@wdasauthorApr 03.2012 — #anyone?

@aj_nscApr 03.2012 — #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:

<i>
 </i>
 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:

<i>
 </i>xmlHttp.onreadystatechange=stateChanged(id)

The onreadystatechange property takes a [B]function reference[/B], 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.

@wdasauthorApr 03.2012 — #Well it is stillconfusing for a newbie in js like myself.

I tried to replace the (part of the code) with your example , and didn't work at all..

you need to give me more specifics...

@aj_nscApr 03.2012 — #Go back to the showHint() function from post #6 of this thread....you said this worked best for you.

Then, all you need to do is replace the line

<i>
 </i>xmlHttp.onreadystatechange = stateChanged;

with what I gave you so it will look like this:

<i>
 </i>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+"&amp;id="+id+"&amp;sid="+Math.random() 
 xmlHttp.onreadystatechange=function() {
 if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
 document.getElementById("txtReload"+id).innerHTML=xmlHttp.responseText; 
 } 
 };
 xmlHttp.open("GET",url,true) 
 xmlHttp.send(null) 
 }

You can then get rid of your stateChanged() function as well, as it's not needed anymore, it's being handled by the anonymous function attached to xmlHttp.onreadystatechange

@wdasauthorApr 03.2012 — #Actually that is perfect.

Thank you!!!

Also in #JavaScript _↴

Scripting / Creating A Form In Dreamweaver Need a form to create aweb page Automatically Updating Fields

Success!

Help @wdas spread the word by sharing this article on Twitter...

Tweet This

GetElementbyId by changing id

17 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

GetElementbyId by changing id

17 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #JavaScript _↴