Help with AJAX Beginning

[DonO]

I have a directory profile page that has the option of viewing
additional info like the hardware assigned to an individual, the
programs they've been trained on, etc. To display each of these
options, I have created an external PHP page that I pass the info type
I'm looking for, and the user's id. The returned info should come back
to specific ID of a DIV tag.

I can't seem to get it to return to a pre-specified DIV though without
setting up separate responses.

The caller looks like...

<a href="#" onclick="load_external_data('it_hwsw', '<?=$id?>'); return
false;">Display Assigned Hardware</a>
<div id="it_hwsw_detail"></div>



The JS code I've cobbled together is here....


<script type="text/javascript">
function createRequestObject() {
if(navigator.appName == "Microsoft Internet Explorer"){
var ro = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
var ro = new XMLHttpRequest();
}
return ro;
}

var http = createRequestObject();

function load_external_data(inUpdateElement, inEmpID) {
http.open('get', 'AJAX_load_element.php?element='+inUpdateElement
+'&empID='+inEmpID);
switch(inUpdateElement){
case "it_training" :
http.onreadystatechange = handleResponse1;
break;
case "it_hwsw" :
http.onreadystatechange = handleResponse2;
break;
case "hr_acknowledgement" :
http.onreadystatechange = handleResponse3;
break;
}
//http.updateElementName = inUpdateElement + "_detail";
http.send(null);
}

function handleResponse1() {
if(http.readyState == 4){
document.getElementById('it_training_detail').innerHTML =
http.responseText;
}
}

function handleResponse2() {
if(http.readyState == 4){
document.getElementById('it_hwsw_detail').innerHTML =
http.responseText;
}
}

function handleResponse3() {
if(http.readyState == 4){
document.getElementById('hr_acknowledgement_detail').innerHTML =
http.responseText;
}
}
</script>

 

[Thomas 'PointedEars' Lahn]

<a href="#" onclick="load_external_data('it_hwsw', '<?=$id?>'); return
false;">Display Assigned Hardware</a>
<div id="it_hwsw_detail"></div>

What about users without enabled client-side script support?

The JS code I've cobbled together is here....

<script type="text/javascript">
function createRequestObject() {
if(navigator.appName == "Microsoft Internet Explorer"){
var ro = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
var ro = new XMLHttpRequest();
}
return ro;
}
http://pointedears.de/scripts/test/whatami

Thanks for any help on consolidating the handeResponse functions.

http://developer.mozilla.org/en/docs/AJAX:Getting_Started
http://jibbering.com/faq/

HTH

PointedEars

 

[DonO]

First, I appreciate the help. I followed the developer.mozilla link
and found the = function() option, which I think is close to what I'm
needing. I've changed the code to what's below. It works in FireFox,
but it only works once in IE. There are three links on the page. All
of them call the same PHP page and pass 2 variables. One helps PHP
decide which SQL statement to run and info to build in a table for
return, and the second is the user's id so it knows what info to grab.
Any one of the three work, but subsequent clicks do nothing and I
don't see any kind of feedback to help me find the failure.

Is there some kind of "reset" like an array's pointer that needs to be
done?

Thanks again.

CODE BELOW:
-------------------------

<script type="text/javascript">
var httpRequest;
if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
httpRequest = new XMLHttpRequest(); // Mozilla, Safari, ...
}

function load_external_data(inUpdateElement, inEmpID) {
httpRequest.onreadystatechange = function(){
handleResponse(inUpdateElement);
}

httpRequest.open('GET', AJAX_load_element.php?element=' +
inUpdateElement + '&empID=' + inEmpID, true);
httpRequest.send(null);
}

function handleResponse(inUpdateDiv) {

if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
alert(inUpdateDiv);
} else {
alert('There was a problem with the request.');
}
}
}
</script>

 

[Thomas 'PointedEars' Lahn]

[...] I've changed the code to what's below. It works in FireFox,
but it only works once in IE. [...]

I am surprised it works at all.

Is there some kind of "reset" like an array's pointer that needs to be
done?

On the contrary, it is done already by calling httprequest.open().
Therefore, you have to assign to httprequest.onreadystatechange
*after* that call.

function load_external_data(inUpdateElement, inEmpID) {
httpRequest.onreadystatechange = function(){
handleResponse(inUpdateElement);
}

httpRequest.open('GET', AJAX_load_element.php?element=' +

^
You have not properly delimited all your string literals.

inUpdateElement + '&empID=' + inEmpID, true);

httprequest.open(
'GET',
[
'AJAX_load_element.php?element=', inUpdateElement,
'&empID=', inEmpID
].join(""),
true);

might be more efficient.

httpRequest.send(null);
}

HTH

PointedEars

 

[DonO]

[...] I've changed the code to what's below. It works in FireFox,
but it only works once in IE. [...]

I am surprised it works at all.

I appreciate your patience. I had a copy/paste error b/c I tried to
clean up the code. Here it is as-is.

When I run it in FF - works fine. In IE it runs once fine and the
second time the alert('test') kicks off, but the info inside the check
for readyState==4 does NOT.

Thanks,
D.


<script type="text/javascript">
var httpRequest;
if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
httpRequest = new XMLHttpRequest(); // Mozilla, Safari, ...
}

function load_external_data(inUpdateElement, inEmpID) {
httpRequest.onreadystatechange = function(){
handleResponse(inUpdateElement);
}

httpRequest.open('GET', 'AJAX_load_element.php?
element='+inUpdateElement+'&empID='+inEmpID, true);

httpRequest.send(null);
alert('test');
}

function handleResponse(inUpdateDiv) {

if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
alert(inUpdateDiv);
returnDivName = inUpdateDiv + "_detail";
document.getElementById(returnDivName).innerHTML =
httpRequest.responseText;
} else {
alert('There was a problem with the request.');
}
}
}
</script>

 

[Thomas 'PointedEars' Lahn]

[...] I've changed the code to what's below. It works in FireFox,
but it only works once in IE. [...]

I am surprised it works at all.

I appreciate your patience.

I appreciate your reading (my) postings *whole*.


PointedEars