More Than One Call

[Usagi]

1) Script Title:
Basic Ajax Routine (get & post)
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxroutine.htm
3) Describe problem:

When I try to call the functions more than one time only the last one called shows up



<script type="text/javascript">
//Step 2: Define a "callback" function to process the data returned by the Ajax request:
function processGetPost(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
document.getElementById("my_contests").innerHTML = myajax.responseText;

}
}
}

//Step 3: Invoke the Ajax routine method to make the desired Ajax request.
ajaxpack.getAjaxRequest("/iframes/my_contests.php/<? echo $AAuthorID ?>", "", processGetPost, "txt")
</script>

<script type="text/javascript">
//Step 2: Define a "callback" function to process the data returned by the Ajax request:
function processGetPost(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
document.getElementById("won_contests").innerHTML = myajax.responseText;

}
}
}

//Step 3: Invoke the Ajax routine method to make the desired Ajax request.
ajaxpack.getAjaxRequest("/iframes/won_contests.php/<? echo $AAuthorID ?>", "", processGetPost, "txt")
</script>

<script type="text/javascript">
//Step 2: Define a "callback" function to process the data returned by the Ajax request:
function processGetPost(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
document.getElementById("favorite_of").innerHTML = myajax.responseText;

}
}
}

//Step 3: Invoke the Ajax routine method to make the desired Ajax request.
ajaxpack.getAjaxRequest("/iframes/favorites.php/<? echo $AAuthorID ?>/favorite_of", "", processGetPost, "txt")
</script>

<script type="text/javascript">
//Step 2: Define a "callback" function to process the data returned by the Ajax request:
function processGetPost(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
document.getElementById("my_favorites").innerHTML = myajax.responseText;

}
}
}

//Step 3: Invoke the Ajax routine method to make the desired Ajax request.
ajaxpack.getAjaxRequest("/iframes/favorites.php/<? echo $AAuthorID ?>/my_favorites", "", processGetPost, "txt")
</script>


You can see the problem here:
http://testingsite.prose-n-poetry.com/author/1952
(near the middle of the page - "My Contests, My Awards, Favorite of, My Favorites")

Is there any way to fix this?

Thanks in advance,
Usagi

[ddadmin]

The problem looks more like a JavaScript error halting the script midway. In Firefox's error console, it complains of:


Error: document.getElementById("my_favorites") has no properties
Source File: http://testingsite.prose-n-poetry.com/author/1952
Line: 307

Make sure the following line in your script is correct:


document.getElementById("my_favorites").innerHTML = myajax.responseText

[Usagi]

I simplified the test scripts:

http://testingsite.prose-n-poetry.com/scripts/test1.php
Includes this:

<script type="text/javascript">
//Step 2: Define a "callback" function to process the data returned by the Ajax request:
function processGetPost(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
document.getElementById("my_contests").innerHTML = myajax.responseText;

}
}
}

//Step 3: Invoke the Ajax routine method to make the desired Ajax request.
ajaxpack.getAjaxRequest("/iframes/my_contests.php/<? echo $AAuthorID ?>", "", processGetPost, "txt")
</script>

http://testingsite.prose-n-poetry.com/scripts/test2.php
Includes this:

<script type="text/javascript">
//Step 2: Define a "callback" function to process the data returned by the Ajax request:
function processGetPost(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
document.getElementById("my_awards").innerHTML = myajax.responseText;

}
}
}

//Step 3: Invoke the Ajax routine method to make the desired Ajax request.
ajaxpack.getAjaxRequest("/iframes/my_awards.php/<? echo $AAuthorID ?>", "", processGetPost, "txt")
</script>

http://testingsite.prose-n-poetry.com/scripts/test3.php
includes both

<script type="text/javascript">
//Step 2: Define a "callback" function to process the data returned by the Ajax request:
function processGetPost(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
document.getElementById("my_contests").innerHTML = myajax.responseText;

}
}
}

//Step 3: Invoke the Ajax routine method to make the desired Ajax request.
ajaxpack.getAjaxRequest("/iframes/my_contests.php/<? echo $AAuthorID ?>", "", processGetPost, "txt")
</script>

<script type="text/javascript">
//Step 2: Define a "callback" function to process the data returned by the Ajax request:
function processGetPost(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
document.getElementById("my_awards").innerHTML = myajax.responseText;

}
}
}

//Step 3: Invoke the Ajax routine method to make the desired Ajax request.
ajaxpack.getAjaxRequest("/iframes/my_awards.php/<? echo $AAuthorID ?>", "", processGetPost, "txt")
</script>

Each function fine individually but when both calls are made the first is ignored or passed over.
I do see errors in the FF error Console:

Error: mismatched tag. Expected: </br>.
Source File: http://testingsite.prose-n-poetry.com/iframes/my_contests.php/1952?
Line: 48, Column: 3
Source Code:
</body>--^

but looking at the code I see no errors. I'm confused.

Thanks for any help.
Usagi

P.S. I do realize that I could do basically the same thing with IFrames. The main difference
is that with IFrames I cannot make the output into links to Javascript popups.

[ddadmin]

You shouldn't have duplicate function names, as you currently do. See the changes in red:


<script type="text/javascript">
//Step 2: Define a "callback" function to process the data returned by the Ajax request:
function processGetPostA(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
document.getElementById("my_contests").innerHTML = myajax.responseText;

}
}
}

//Step 3: Invoke the Ajax routine method to make the desired Ajax request.
ajaxpack.getAjaxRequest("/iframes/my_contests.php/1952", "", processGetPostA, "txt")
</script>

<script type="text/javascript">
//Step 2: Define a "callback" function to process the data returned by the Ajax request:
function processGetPostB(){
var myajax=ajaxpack.ajaxobj
var myfiletype=ajaxpack.filetype
if (myajax.readyState == 4){ //if request of file completed
if (myajax.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful or running script locally
if (myfiletype=="txt")
document.getElementById("my_awards").innerHTML = myajax.responseText;

}
}
}

//Step 3: Invoke the Ajax routine method to make the desired Ajax request.
ajaxpack.getAjaxRequest("/iframes/my_awards.php/1952", "", processGetPostB, "txt")

</script>

Or better yet, you should just combine the two functions into one, which can easily be done, but it depends on what you're trying to do here before I can show you an example.

[Usagi]

I was hoping for one function that I could pass parameters to.

The general idea is to use ajax to query an mySQL database using PHP. Two parameters are needed, the PHP file to run and the author number to find in the database. My usual way of passing a parameter is like this:
http://sitename.com/program.php/parameter
This format runs program.php. The parameter can be separated out from $HTTP_REQUEST_URI. This method is very search-engine friendly.

The result is displayed in a <div> which is formatted to be scrollable.

After the first server query is completed a second one must be made using a different PHP program but the same author number.


So far I can't get this script to make the second query without erasing the result of the first query.

Here's the example:
http://testingsite.prose-n-poetry.com/scripts/test7.php

I made the changes that you said in the code. You can check the source and see that. I added some notes to help. In the FF error console it does give:

Error: mismatched tag. Expected: </br>.
Source File: http://testingsite.prose-n-poetry.com/iframes/my_contests.php/1952?
Line: 49, Column: 3
Source Code:
</body>--^

But the source shows no such mis-coding.

I've looked all over the web for a script that will do this and couldn't find one. I'm surprised because I would think that this would be a popular way of using ajax. If you click one of the links in the window you'll see that they create a javascript popup.

Usagi

[ddadmin]

Is there any reason why the second example is commented out in the source?

[Usagi]

Oops, sorry. I did that to see what the FF error console would report. But anyways, you could see that the left box was filled when the second function was commented out. I removed the commenting and if you look now you'll see that the left box is empty. Either the first function is passed over or more likely, it's result is erased.

Usagi

[ddadmin]

Ok, I see what you mean. Looking at ajaxroutine.js, I see that certain variables aren't localized so when the script is run more than once at the exact same time, only the last one will execute.

I'll probably be rewriting this script, since it contains a number of limitations. In the meantime, if I'm correct, all you're trying to do is populate DIVs on the page with data from external URLs. If so, just use the temporary, new ajaxroutine.js attached below, and do something like this on your page:


<div id="my_contests"> </div>

<div id="my_awards"> </div>

<script type="text/javascript">

ajaxpack.connect("test.htm", "my_contests")

ajaxpack.connect("test2.htm", "my_awards")

[Usagi]

THANK YOU !!!!

That is perfect, concise, simple and works perfectly. It also accepts a parameter in the form which I normally use:


<script type="text/javascript">

ajaxpack.connect("/iframes/my_contests.php/<? echo $AAuthorID ?>", "my_contests")

ajaxpack.connect("/iframes/my_awards.php/<? echo $AAuthorID ?>", "my_awards")

</script>


You can see it working here:
http://testingsite.prose-n-poetry.com/scripts/test8.php

Thank you very much

Usagi