473,573 Members | 4,181 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Multiple ajax calls at once

Hi,

I want to reload 2 divs at one click. Ive tried:
<a href = "javascript:voi d(0);"
onclick="show(' ajaxrequest.php ?action=removef ield','div1');s how('ajaxreques t.php?action=re loaddiv2','div2 ')">verwijderen </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
var mydiv
function show(str,div)
{
mydiv=div;

if (str.length==0)
{
document.getEle mentById(mydiv) .innerHTML=""
return
}
xmlHttp=GetXmlH ttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url=""
url=url+str
url=url+"&rnd=" +Math.random()
xmlHttp.onready statechange=sta teChanged()
xmlHttp.open("G ET",url,true)
xmlHttp.send(nu ll)
}

function stateChanged()
{
if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" )
{
document.getEle mentById('loadi ng').innerHTML= "";
document.getEle mentById(mydiv) .innerHTML=xmlH ttp.responseTex t

}
else
{
document.getEle mentById('loadi ng').innerHTML= "<h1>Loadin g ....
</h1><img src = '/fw/images/loading.gif'>";
}

}

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");
}
}
return xmlHttp;
}

--
Arjen
http://www.arjenkarel.nl
May 9 '07 #1
17 11851
Daz
On May 9, 9:56 am, Arjen <d...@mail.mewr ote:
Hi,

I want to reload 2 divs at one click. Ive tried:
<a href = "javascript:voi d(0);"
onclick="show(' ajaxrequest.php ?action=removef ield','div1');s how('ajaxreques t.php?action=re loaddiv2','div2 ')">verwijderen </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
var mydiv
function show(str,div)
{
mydiv=div;

if (str.length==0)
{
document.getEle mentById(mydiv) .innerHTML=""
return
}
xmlHttp=GetXmlH ttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url=""
url=url+str
url=url+"&rnd=" +Math.random()
xmlHttp.onready statechange=sta teChanged()
xmlHttp.open("G ET",url,true)
xmlHttp.send(nu ll)

}

function stateChanged()
{
if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" )
{
document.getEle mentById('loadi ng').innerHTML= "";
document.getEle mentById(mydiv) .innerHTML=xmlH ttp.responseTex t

}
else
{
document.getEle mentById('loadi ng').innerHTML= "<h1>Loadin g ....
</h1><img src = '/fw/images/loading.gif'>";
}

}

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");
}
}
return xmlHttp;

}

--
Arjenhttp://www.arjenkarel. nl
I can't see a problem. It works for Firefox. Perhaps it's an IE issue?

May 9 '07 #2
Daz
On May 9, 9:56 am, Arjen <d...@mail.mewr ote:
Hi,

I want to reload 2 divs at one click. Ive tried:
<a href = "javascript:voi d(0);"
onclick="show(' ajaxrequest.php ?action=removef ield','div1');s how('ajaxreques t.php?action=re loaddiv2','div2 ')">verwijderen </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
var mydiv
function show(str,div)
{
mydiv=div;

if (str.length==0)
{
document.getEle mentById(mydiv) .innerHTML=""
return
}
xmlHttp=GetXmlH ttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url=""
url=url+str
url=url+"&rnd=" +Math.random()
xmlHttp.onready statechange=sta teChanged()
xmlHttp.open("G ET",url,true)
xmlHttp.send(nu ll)

}

function stateChanged()
{
if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" )
{
document.getEle mentById('loadi ng').innerHTML= "";
document.getEle mentById(mydiv) .innerHTML=xmlH ttp.responseTex t

}
else
{
document.getEle mentById('loadi ng').innerHTML= "<h1>Loadin g ....
</h1><img src = '/fw/images/loading.gif'>";
}

}

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");
}
}
return xmlHttp;

}

--
Arjenhttp://www.arjenkarel. nl
Just a suggestion, but if you want to load both divs at the same time,
why not implement the server-side protocol to send the contents for
both divs in one request as a JSON object, then you can loads them
both at the same time. Why make two separate requests when you can do
it in one, which will probably be quicker?

May 9 '07 #3
Daz schreef:
On May 9, 9:56 am, Arjen <d...@mail.mewr ote:
>Hi,

I want to reload 2 divs at one click. Ive tried:
<a href = "javascript:voi d(0);"
onclick="show( 'ajaxrequest.ph p?action=remove field','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 ?
I can't see a problem. It works for Firefox. Perhaps it's an IE issue?

That's strange cause both in firefox(linux and windows) and ie it
doesn'work here;

The first div is filled corrctly but the second isn't
Here is an example
http://www.arjenkarel.nl/archief/4_M...ajax-calls.php

--
Arjen
May 9 '07 #4
Daz schreef:
On May 9, 9:56 am, Arjen <d...@mail.mewr ote:
Just a suggestion, but if you want to load both divs at the same time,
why not implement the server-side protocol to send the contents for
both divs in one request as a JSON object, then you can loads them
both at the same time. Why make two separate requests when you can do
it in one, which will probably be quicker?

Cool ... I had never heard of anything like that. Ill gonna look into it
right away. Im still verry curious however why the original doesn't work
.. If anyone can shed some light on thaty I would appreciate it verry much

for an example see
http://www.arjenkarel.nl/archief/4_M...ajax-calls.php

Arjen
--
Arjen
http://www.hondenpage.com
May 9 '07 #5
On May 9, 9:18 am, Floortje <l...@zingmaarm etmijmee.enelwr ote:
Daz schreef:
On May 9, 9:56 am, Arjen <d...@mail.mewr ote:
Just a suggestion, but if you want to load both divs at the same time,
why not implement the server-side protocol to send the contents for
both divs in one request as a JSON object, then you can loads them
both at the same time. Why make two separate requests when you can do
it in one, which will probably be quicker?

Cool ... I had never heard of anything like that. Ill gonna look into it
right away. Im still verry curious however why the original doesn't work
. If anyone can shed some light on thaty I would appreciate it verry much

for an example seehttp://www.arjenkarel. nl/archief/4_Multiple-ajax-calls.php

Arjen

--
Arjenhttp://www.hondenpage. com
One thing I noticed is that the onclick of the "Fill my divs" is
"show('/ajax.php?id=117 ','a');('/ajax.php?id=117 ','b');"
I think you probably want "show('/ajax.php?id=117 ','a');show('/
ajax.php?id=117 ','b');"
You're missing the second function name.

-jason

May 9 '07 #6
Jason schreef:
One thing I noticed is that the onclick of the "Fill my divs" is
"show('/ajax.php?id=117 ','a');('/ajax.php?id=117 ','b');"
I think you probably want "show('/ajax.php?id=117 ','a');show('/
ajax.php?id=117 ','b');"
You're missing the second function name.

Whoops ... sorry copied the original too hasty (it's on a local site).
But after fixing it still only one div gets filled (div b). Im quite
clueless as to why. Apache logs show 2 requests.

--
Arjen
May 9 '07 #7
On May 9, 10:06 am, Floortje <l...@zingmaarm etmijmee.enelwr ote:
Jason schreef:
One thing I noticed is that the onclick of the "Fill my divs" is
"show('/ajax.php?id=117 ','a');('/ajax.php?id=117 ','b');"
I think you probably want "show('/ajax.php?id=117 ','a');show('/
ajax.php?id=117 ','b');"
You're missing the second function name.

Whoops ... sorry copied the original too hasty (it's on a local site).
But after fixing it still only one div gets filled (div b). Im quite
clueless as to why. Apache logs show 2 requests.

--
Arjen
Can you post a link so that I can take a look using firebug. I think
the problem is that you are trying to do two requests at the same time
w/ the same request object and the response from only one of the
requests (the one that is completed the fastest) is the only one that
is coming back. If that is the problems (and I strongly suspect that
it is) you should take a look at YUI's connection manager. Someone
correct me if I'm wrong but to make two simultaneous requests you need
two instances of whatever your chosen request object is.

May 9 '07 #8
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.

May 9 '07 #9
Mister Joe wrote:
<snip>
... . I think the problem is that you are trying to do
two requests at the same time
Which would not be a problem as the limit on the number of simultaneous
asynchronous XML HTTP request that could be made would be whichever is
the smaller of the limit on the number of simultaneous HTTP connections
allowed by either the UA or the server.
w/ the same request object
No, each call to the - show - function calls the - GetXmlHttpObjec t -
function, which (if it works at all) will return a new and distinct
instance of an XML HTTP request object.
and the response from only one of the requests (the one
that is completed the fastest) is the only one that
is coming back.
Both requests are being made and both responses received. Both are
triggering - onreadystaechan ge - events but the function handling those
events is only paying attention to the readyState property of the _last_
object created, and only processing its contents (regardless of which
returns first).
If that is the problems (and I strongly suspect that
it is) you should take a look at YUI's connection manager.
That would be a very bad plan as it just ducks the issue, and bloats the
code with unneeded baggage along the way. While almost any AJAX
'library' written by a half decent programmer will be able to handle
multiple simultaneous requests without problems, switching to using one
while not understanding why the issue appeared in the first place just
means re-encountering the same issue in different contexts. Learning how
to program javascript is the best foundation for writing good javascript
programs.
Someone correct me if I'm wrong
Done.
but to make two simultaneous requests you need
two instances of whatever your chosen request object is.
Yes, but two instances were created and used.

Richard.

May 9 '07 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
2525
by: cmercier | last post by:
Hi everyone! I am using the Prototype library and ran into a serious limitation. I need to make many concurrent AJAX calls to the server, but Prototype is queueing them instead. Obviously, this is slowing my web application a lot. Is it a Javascript or Prototype limitation? If Prototype is in cause, is there a work around? I'd rather...
5
6151
by: steve.chambers | last post by:
I'm sure this q must have been asked before but I'm really struggling to find the answer anywhere so have finally given up and will consult the usenet community - hopefully there's someone out there who's seen it all before and can help me out! I have a webpage which needs to make some function calls after the page has loaded - won't go into...
3
3940
by: dhsieh | last post by:
I am trying out nested AJAX calls for the first time, but I seem to have hit a snag. The code snippet is the outer AJAX call and a function, it gathers information about a company. As we get towards the bottom of the onComplete function, there is a call to doGetAddressContacts(), which accepts an address ID. This then returns a list of contacts...
7
4595
by: =?Utf-8?B?QmlsbHkgWmhhbmc=?= | last post by:
我们现在遇到一个问题,通过wcf创建的webservice,选择windows service作为宿主,采用java作为客户端调用成功,但是无法使用asp.net ajax调用。 我们参考了http://msdn.microsoft.com/zh-cn/library/bb410780.aspx的资料,并且下载了相应的sample...
1
3073
by: kidalex | last post by:
So, I have a summary page of some stuff that gets updated through AJAX calls back to the server every 15 seconds or so. However, if you leave that page up for a few hours - it'll slow down the computer and eventually crash it with the following message: "Internet Explorer: out of memory on line..." I know AJAX got some memory leaks...
1
3499
by: andwan0 | last post by:
I have a legacy classic ASP website with lots of classic AJAX (many ASP files specially made for processing AJAX requests). We are slowly migrating the website to ASP.NET 2.0 and developing under Visual Web Developer 2005/2008. I notice VWD doesn't debug ASP files. Since we are still migrating a very large website, we are mixing ASP.NET code...
2
2402
by: sdkumar00 | last post by:
How can we avoid/detect multiple free calls for a dynamically allocated memory. void example() { int *a; a = (int *)malloc(10); free(a); free(a); //how can we detect/avoid multiple free calls }
2
2260
by: Early Woods | last post by:
Hey, In the following code the function showdivs() is called on body load, though only the second div is loaded. I've been searching on the web for similar problems and I know it has to do with the handler function, which is supposed to be run twice but now just cancels the first function as soon as the second one is called. Could anybody...
4
4269
by: Stephan Needank | last post by:
Hello, I'm encountering an AJAX problem when I try to execute multiple AJAX requests at the same time. What I want to do is delete a message and display the status (succes or failure) of that in div1, and refresh the messages on the page in div2. This needs (for as far as my knowledge reaches) two AJAX actions from which I both need the...
0
7789
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, well explore What is ONU, What Is Router, ONU & Routers main...
0
8215
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7800
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
5296
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3737
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3743
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2227
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1325
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1048
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.