Passing DIV ID name to JavaScript as part of AJAX call in Classic ASP

Question

Long time listener, first time caller :) Need help - my Java Script knowledge is limited and I've been stuck on this issue for a while.

I have a classic ASP script with AJAX method implemented. The challenge for me is that I need to be able to tell the Java Script which DIV ID to load the html returned by Ajax call into.

The target DIV can vary depending on what the app is doing. My thought is to pass DIV name as a parameter to Java Script.

Here is what I have so far:

<div id="AjaxResponseDiv">Content displayed before the Ajax call is made</div>
<a href="javascript:CallAjaxPage('/dev/ajax/somePage.asp?par=1','AjaxResponseDiv');">Get Message From Server</a>

The Java Script is as follows:

 function XHConn() { var xmlhttp, bComplete = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; }}} if (!xmlhttp) return null; this.connect = function(sURL, sMethod, sVars, fnDone) { if (!xmlhttp) return false; bComplete = false; sMethod = sMethod.toUpperCase(); try { if (sMethod == "GET") { xmlhttp.open(sMethod, sURL+"?"+sVars, true); sVars = ""; } else { xmlhttp.open(sMethod, sURL, true); xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1"); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4 && !bComplete) { bComplete = true; fnDone(xmlhttp); }}; xmlhttp.send(sVars); } catch(z) { return false; } return true; }; return this; } var doAJAXCall = function (PageURL, ReqType, PostStr, FunctionName, AjaxResponseDiv) { // create the new object for doing the XMLHTTP Request var myConn = new XHConn(); // check if the browser supports it if (myConn) { // XMLHTTPRequest is supported by the browser, continue with the request myConn.connect('' + PageURL + '', '' + ReqType + '', '' + PostStr + '', FunctionName); } else { // Not support by this browser, alert the user alert("XMLHTTP not available. Try a newer/better browser, this application will not work!"); } } // launched from button click var CallAjaxPage = function (URL, AjaxResponseDiv) { // build up the post string when passing variables to the server side page var PostStr = ""; // use the generic function to make the request //alert(showMessageResponse) showMessageResponse = showMessageResponse doAJAXCall(URL, 'POST', '', showMessageResponse, AjaxResponseDiv); } // The function for handling the response from the server var showMessageResponse = function (oXML) { // get the response text, into a variable var response = oXML.responseText; // update the Div to show the result from the server document.getElementById("AjaxResponseDiv").innerHTML = response; }; </script> </code> So essentially the question is - how can I change "AjaxResponseDiv" in line: document.getElementById("AjaxResponseDiv").innerHTML = response; To a variable AjaxResponseDiv which I am catching here:    

function XHConn() { var xmlhttp, bComplete = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; }}} if (!xmlhttp) return null; this.connect = function(sURL, sMethod, sVars, fnDone) { if (!xmlhttp) return false; bComplete = false; sMethod = sMethod.toUpperCase(); try { if (sMethod == "GET") { xmlhttp.open(sMethod, sURL+"?"+sVars, true); sVars = ""; } else { xmlhttp.open(sMethod, sURL, true); xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1"); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4 && !bComplete) { bComplete = true; fnDone(xmlhttp); }}; xmlhttp.send(sVars); } catch(z) { return false; } return true; }; return this; } var doAJAXCall = function (PageURL, ReqType, PostStr, FunctionName, AjaxResponseDiv) { // create the new object for doing the XMLHTTP Request var myConn = new XHConn(); // check if the browser supports it if (myConn) { // XMLHTTPRequest is supported by the browser, continue with the request myConn.connect('' + PageURL + '', '' + ReqType + '', '' + PostStr + '', FunctionName); } else { // Not support by this browser, alert the user alert("XMLHTTP not available. Try a newer/better browser, this application will not work!"); } } // launched from button click var CallAjaxPage = function (URL, AjaxResponseDiv) { // build up the post string when passing variables to the server side page var PostStr = ""; // use the generic function to make the request //alert(showMessageResponse) showMessageResponse = showMessageResponse doAJAXCall(URL, 'POST', '', showMessageResponse, AjaxResponseDiv); } // The function for handling the response from the server var showMessageResponse = function (oXML) { // get the response text, into a variable var response = oXML.responseText; // update the Div to show the result from the server document.getElementById("AjaxResponseDiv").innerHTML = response; }; </script> </code> So essentially the question is - how can I change "AjaxResponseDiv" in line: document.getElementById("AjaxResponseDiv").innerHTML = response; To a variable AjaxResponseDiv which I am catching here:

 function XHConn() { var xmlhttp, bComplete = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; }}} if (!xmlhttp) return null; this.connect = function(sURL, sMethod, sVars, fnDone) { if (!xmlhttp) return false; bComplete = false; sMethod = sMethod.toUpperCase(); try { if (sMethod == "GET") { xmlhttp.open(sMethod, sURL+"?"+sVars, true); sVars = ""; } else { xmlhttp.open(sMethod, sURL, true); xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1"); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4 && !bComplete) { bComplete = true; fnDone(xmlhttp); }}; xmlhttp.send(sVars); } catch(z) { return false; } return true; }; return this; } var doAJAXCall = function (PageURL, ReqType, PostStr, FunctionName, AjaxResponseDiv) { // create the new object for doing the XMLHTTP Request var myConn = new XHConn(); // check if the browser supports it if (myConn) { // XMLHTTPRequest is supported by the browser, continue with the request myConn.connect('' + PageURL + '', '' + ReqType + '', '' + PostStr + '', FunctionName); } else { // Not support by this browser, alert the user alert("XMLHTTP not available. Try a newer/better browser, this application will not work!"); } } // launched from button click var CallAjaxPage = function (URL, AjaxResponseDiv) { // build up the post string when passing variables to the server side page var PostStr = ""; // use the generic function to make the request //alert(showMessageResponse) showMessageResponse = showMessageResponse doAJAXCall(URL, 'POST', '', showMessageResponse, AjaxResponseDiv); } // The function for handling the response from the server var showMessageResponse = function (oXML) { // get the response text, into a variable var response = oXML.responseText; // update the Div to show the result from the server document.getElementById("AjaxResponseDiv").innerHTML = response; }; </script> </code> So essentially the question is - how can I change "AjaxResponseDiv" in line: document.getElementById("AjaxResponseDiv").innerHTML = response; To a variable AjaxResponseDiv which I am catching here:    

function XHConn() { var xmlhttp, bComplete = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; }}} if (!xmlhttp) return null; this.connect = function(sURL, sMethod, sVars, fnDone) { if (!xmlhttp) return false; bComplete = false; sMethod = sMethod.toUpperCase(); try { if (sMethod == "GET") { xmlhttp.open(sMethod, sURL+"?"+sVars, true); sVars = ""; } else { xmlhttp.open(sMethod, sURL, true); xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1"); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4 && !bComplete) { bComplete = true; fnDone(xmlhttp); }}; xmlhttp.send(sVars); } catch(z) { return false; } return true; }; return this; } var doAJAXCall = function (PageURL, ReqType, PostStr, FunctionName, AjaxResponseDiv) { // create the new object for doing the XMLHTTP Request var myConn = new XHConn(); // check if the browser supports it if (myConn) { // XMLHTTPRequest is supported by the browser, continue with the request myConn.connect('' + PageURL + '', '' + ReqType + '', '' + PostStr + '', FunctionName); } else { // Not support by this browser, alert the user alert("XMLHTTP not available. Try a newer/better browser, this application will not work!"); } } // launched from button click var CallAjaxPage = function (URL, AjaxResponseDiv) { // build up the post string when passing variables to the server side page var PostStr = ""; // use the generic function to make the request //alert(showMessageResponse) showMessageResponse = showMessageResponse doAJAXCall(URL, 'POST', '', showMessageResponse, AjaxResponseDiv); } // The function for handling the response from the server var showMessageResponse = function (oXML) { // get the response text, into a variable var response = oXML.responseText; // update the Div to show the result from the server document.getElementById("AjaxResponseDiv").innerHTML = response; }; </script> </code> So essentially the question is - how can I change "AjaxResponseDiv" in line: document.getElementById("AjaxResponseDiv").innerHTML = response; To a variable AjaxResponseDiv which I am catching here:

function XHConn() { var xmlhttp, bComplete = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; }}} if (!xmlhttp) return null; this.connect = function(sURL, sMethod, sVars, fnDone) { if (!xmlhttp) return false; bComplete = false; sMethod = sMethod.toUpperCase(); try { if (sMethod == "GET") { xmlhttp.open(sMethod, sURL+"?"+sVars, true); sVars = ""; } else { xmlhttp.open(sMethod, sURL, true); xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1"); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4 && !bComplete) { bComplete = true; fnDone(xmlhttp); }}; xmlhttp.send(sVars); } catch(z) { return false; } return true; }; return this; } var doAJAXCall = function (PageURL, ReqType, PostStr, FunctionName, AjaxResponseDiv) { // create the new object for doing the XMLHTTP Request var myConn = new XHConn(); // check if the browser supports it if (myConn) { // XMLHTTPRequest is supported by the browser, continue with the request myConn.connect('' + PageURL + '', '' + ReqType + '', '' + PostStr + '', FunctionName); } else { // Not support by this browser, alert the user alert("XMLHTTP not available. Try a newer/better browser, this application will not work!"); } } // launched from button click var CallAjaxPage = function (URL, AjaxResponseDiv) { // build up the post string when passing variables to the server side page var PostStr = ""; // use the generic function to make the request //alert(showMessageResponse) showMessageResponse = showMessageResponse doAJAXCall(URL, 'POST', '', showMessageResponse, AjaxResponseDiv); } // The function for handling the response from the server var showMessageResponse = function (oXML) { // get the response text, into a variable var response = oXML.responseText; // update the Div to show the result from the server document.getElementById("AjaxResponseDiv").innerHTML = response; }; </script> </code> So essentially the question is - how can I change "AjaxResponseDiv" in line: document.getElementById("AjaxResponseDiv").innerHTML = response; To a variable AjaxResponseDiv which I am catching here:

function XHConn() { var xmlhttp, bComplete = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; }}} if (!xmlhttp) return null; this.connect = function(sURL, sMethod, sVars, fnDone) { if (!xmlhttp) return false; bComplete = false; sMethod = sMethod.toUpperCase(); try { if (sMethod == "GET") { xmlhttp.open(sMethod, sURL+"?"+sVars, true); sVars = ""; } else { xmlhttp.open(sMethod, sURL, true); xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1"); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4 && !bComplete) { bComplete = true; fnDone(xmlhttp); }}; xmlhttp.send(sVars); } catch(z) { return false; } return true; }; return this; } var doAJAXCall = function (PageURL, ReqType, PostStr, FunctionName, AjaxResponseDiv) { // create the new object for doing the XMLHTTP Request var myConn = new XHConn(); // check if the browser supports it if (myConn) { // XMLHTTPRequest is supported by the browser, continue with the request myConn.connect('' + PageURL + '', '' + ReqType + '', '' + PostStr + '', FunctionName); } else { // Not support by this browser, alert the user alert("XMLHTTP not available. Try a newer/better browser, this application will not work!"); } } // launched from button click var CallAjaxPage = function (URL, AjaxResponseDiv) { // build up the post string when passing variables to the server side page var PostStr = ""; // use the generic function to make the request //alert(showMessageResponse) showMessageResponse = showMessageResponse doAJAXCall(URL, 'POST', '', showMessageResponse, AjaxResponseDiv); } // The function for handling the response from the server var showMessageResponse = function (oXML) { // get the response text, into a variable var response = oXML.responseText; // update the Div to show the result from the server document.getElementById("AjaxResponseDiv").innerHTML = response; }; </script> </code> So essentially the question is - how can I change "AjaxResponseDiv" in line: document.getElementById("AjaxResponseDiv").innerHTML = response; To a variable AjaxResponseDiv which I am catching here:

  // launched from button click <br/> var CallAjaxPage = function (URL, AjaxResponseDiv) 

Answer 1

The callback function should be a closure within the CallAjaxPage function.

var CallAjaxPage = function (URL, AjaxResponseDiv) {

    // build up the post string when passing variables to the server side page
    var PostStr = "";

    // use the generic function to make the request
    //alert(showMessageResponse)

    function showMessageResponse (oXML) {
        // get the response text, into a variable
        var response = oXML.responseText;
        // update the Div to show the result from the server
        document.getElementById(AjaxResponseDiv).innerHTML = response;
    }

    doAJAXCall(URL, 'POST', '', showMessageResponse);
}

doAJAXCall doesn't need the AjaxResponseDiv argument.