Arjen wrote:
I want to reload 2 divs at one click. Ive tried:
<a href = "javascript:voi d(0);"
Never use javascript pseudo-protocol HREFs, their execution on IE
versions prior to 7 has undesirable consequences that make it impossible
to determine what may or may not, should or should not, work in the
browser. Instead have the onclick handler cancel the navigation, or use
a more semantically appropriate element as the trigger (<input
type="button">, for example).
onclick="show(' ajaxrequest.php ?action=removef ield','div1');
show('ajaxreque st.php?action=r eloaddiv2','div 2')">verwijdere n</a>
While both seperate actions work they dont when I
put them together. Anyone know how to fix this ?
My ajax.js with funcition show
var xmlHttp
This variable s being used to refer to the XML HTTP request objects. It
appears to be a global variable so there is precisely one slot in which
to store a reference to a single XML HTTP request object.
var mydiv
function show(str,div)
<snip>
xmlHttp=GetXmlH ttpObject()
Here each call to your - show - function assigns a reference to an XML
HTTP request object to the global variable (or an uncaught exception is
thrown).
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url=""
url=url+str
url=url+"&rnd=" +Math.random()
This is a bad strategy for avoiding client-side caching of XML HTTP
responses. Random numbers may repeat, and do so in a relatively short
period. A non-repeating sequential value would be better, for which the
millisecond date is often preferred. As it is you have programmed a
system that will exhibit very intermittent faulty behaviour. Difficult
to spot, recreate and so correct.
xmlHttp.onready statechange=sta teChanged()
The above is assigning the return value from a call to - stateChange -
to the - onreadystatecha nge - of the XML HTTP request object. Your -
stateChange - has no return statement so its return value is the
default Undefined value. Thus this code, as posted , will never 'work'.
Posting code that is not the same as the code you are asking the
question about is counterproducti ve and a waste of everyone's time.
However, without the trailing parenthesise (the empty arguments list
that represents a 'call operator' in javascript) a reference to the
single - stateChanged - function object would be assigned to the -
onreadystatecha nge - handler of each XML HTTP request object created,
and the code would 'work' in the way you describe (that is, badly).
xmlHttp.open("G ET",url,true)
xmlHttp.send(nu ll)
}
function stateChanged()
{
if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" )
<snip>
Here is your (main) problem. Your - stateChanged - function is referring
to an XML HTTP request object via a global variable. The value of that
one global variable is a reference to the last XML HTTP request object
assigned to it. That will have been the assignment in the second call
to - show -, and so only the response from that second XML HTTP request
object will be handled at all.
document.getEle mentById(mydiv) .innerHTML=xmlH ttp.responseTex t
<snip>
And it gets worse as you are also using a global variable to pass the ID
if the DIV into which the result will be inserted, so only the value of
the second assignment will be available and so only the second DIV will
be altered.
There are people who would suggest changing the XML HTTP requests from
asynchronous requests to synchronous, so the first must finish before
the second call to - show - can start. These people are halfwits who are
hiding from the issues inherent in AJAX instead of addressing them.
The real solution is to learn javascript programming and browser
scripting before even contemplating messing with something as inherently
complex as AJAX (with its implied requirement to marshal, organise and
sequence contexts in the face of at least two asynchronous sources of
input (the user and HTTP responses)). Learning javascript means
(eventually) learning how to use closures to preserve separate contexts
over time, which is how you should start to address this issue.
function GetXmlHttpObjec t()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest( );
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(" Msxml2.XMLHTTP" );
}
catch (e)
{
xmlHttp=new ActiveXObject(" Microsoft.XMLHT TP");
<snip>
This is irrational. There is very chance that this final attempt to
create an XML HTTP request object will throw and exception (is the user
has ActiveX disable in their browser, for example) so there should be a
try catch block around this call as well, and the return value from the
function call should be tested to see whether it is null or not.
It is also widely considered bad programming practice to use try/catch
blocks as program flow control structures, as you have above. You can
verify whether a browser environment provides a global -
XMLHttpRequest - constructor or an - ActiveXObject - and use the results
of those tests to determine which branches the code should follow (which
also allows the exception to be avoided in environments that provide
neither).
Richard.
