GetElementbyId by changing id

**wdas** · 04-02-2012 01:29 PM

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)

**ibixxon** · 04-02-2012 01:51 PM

Use this:

Code:

("txtReload"+id)

**wdas** · 04-02-2012 02:17 PM

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_** · 04-02-2012 02:35 PM

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.

**DanInMA** · 04-02-2012 02:36 PM

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; 
} 
}

**wdas** · 04-02-2012 02:53 PM

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

**DanInMA** · 04-02-2012 02:58 PM

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]

**wdas** · 04-02-2012 03:17 PM

Nope doesnt work, check out my previous post i've edited it.

**_Krik_** · 04-02-2012 03:42 PM

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".

**wdas** · 04-02-2012 03:51 PM

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.

**_Krik_** · 04-02-2012 04:17 PM

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.

**wdas** · 04-03-2012 01:57 AM

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

**wdas** · 04-03-2012 04:27 AM

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)

**wdas** · 04-03-2012 01:44 PM

anyone?

**aj_nsc** · 04-03-2012 02:10 PM

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.

Thread: GetElementbyId by changing id

Thread Tools

Display

Hybrid View

GetElementbyId by changing id

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions