Onclick AJAX Call To ASP Script Then Redirect Page - Partially Working


Here is what we are trying to do:

1. Form with onclick event to call AJAX function - see code here

<input type="button" value="Remove image" onclick="update_data_event('include/bizamajig-update-data-event.asp')" id="Delete" name="Delete"/>

2. The AJAX/javascript function POSTs to URL, in this example, bizamajig-update-data-event.asp.

2. The ASP script, bizamajig-update-data-event.asp, updates the database then does a RESPONSE.WRITE(nextURL) as we want to communicate back to the AJAX call causing a redirection to the nextURL location.

Below is our supporting AJAX function called by the onclick event:

var http_request__update_data_event = false;
var get_http_response__update_data_event;
function update_data_event(url) {

      url = url + "?process_desc="+document.SubParentForm.process_desc.value +"&lookup_type_desc="+document.SubParentForm.lookup_type_desc.value +"&view_by_identifier="+document.SubParentForm.view_by_identifier.value +"&Node="+document.SubParentForm.Node.value +"&sNode="+document.SubParentForm.sNode.value +"&Exp="+document.SubParentForm.Exp.value +"&doc_group_id="+document.SubParentForm.doc_group_id.value +"&doc_id="+document.SubParentForm.doc_id.value;

      http_request__update_data_event = false;

      if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request__update_data_event = new XMLHttpRequest();
            if (http_request__update_data_event.overrideMimeType) {
            } else if (window.ActiveXObject) { // IE
                  try {
                        http_request__update_data_event = new ActiveXObject("Msxml2.XMLHTTP");
                  } catch (e) {
                  try {
                        http_request__update_data_event = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {}

      if (!http_request__update_data_event) {
            alert("Cannot create an XMLHTTP instance");
            return false;

      http_request__update_data_event.onreadystatechange = alertContents;
      http_request__update_data_event.open('POST', url, true);


function alertContents() {

      if (http_request__update_data_event.readyState == 4) {
            if (http_request__update_data_event.status == 200) {
                  if (get_http_response__update_data_event=="0"){
//                        document.write(http_request__update_data_event.responseText);
                  } else if (get_http_response__update_data_event!="0"){
            } else {
                  alert("Please refresh your browser window. \n" + http_request__update_data_event.statusText);

Below is the RESPONSE.WRITE that the ASP script performs to send nextURL back to AJAX function for causing redirection/page refresh:

      nextURL="cm-dg-x-update.asp?process_desc=" & CStr( Request.QueryString("process_desc") ) & "&lookup_type_desc=" & CStr( Request.QueryString("lookup_type_desc") ) & "&view_by_identifier=" & CStr( Request.QueryString("view_by_identifier") ) & "&Node=" & CStr( Request.QueryString("Node") ) & "&sNode=" & CStr( Request.QueryString("sNode") ) & "&Exp=" & CStr( Request.QueryString("Exp") ) & "&doc_group_id=" & CStr( Request.QueryString("doc_group_id") )



Our problem is this - The AJAX function is successfully calling the ASP script and the database update is successful.  However, when the ASP script performs the RESPONSE.WRITE with the nextURL, the AJAX function does not successfully parse and react, so no redirection/page refresh.

Please let me know if I can provide more background on the problem.  Also, If you need to login to our website and see this page to debug, please let me know you need a password.  Or I can insert some debug into the AJAX as needed.  

Thanks for your help in advance.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

There are a lot of little things that could be the problem here.

I would like to suggest that you use JQuery instead of writing your own custom AJAX code. JQuery is an free javascript library that does AJAX very well. It's a very good skill to learn. The code below shows you how to use it to do what you are try to do. You can download JQuery here: http://jquery.com/ - but i've attached it to this post for convenience.
<!-- this is your input button, same as before -->
<input type="button" value="Remove image" onclick="update_data_event('include/bizamajig-update-data-event.asp')" id="Delete" name="Delete"/>

<!-- this is a script tag that includes jquery - make sure you download it first! -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<!-- this is your custom script tag, a lot has changed here -->
<script type="text/javascript">

   // this is the function that will be called after your ajax returns
   function alertContents( responseText ) {
     // let's alert the response text so you can see what it is - you can remove this line later
     // this is the same as what you had before
     if (responseText=="0"){
     } else if (responseText!="0"){
   // i completely changed this function to use jquery
   function update_data_event(url) {
     // build your url as before 
     var ajaxurl = url 
     + "?process_desc="+document.SubParentForm.process_desc.value  
     +"&view_by_identifier="+document.SubParentForm.view_by_identifier.value +"&Node="+document.SubParentForm.Node.value 
     +"&sNode="+document.SubParentForm.sNode.value +"&Exp="+document.SubParentForm.Exp.value 
     +"&doc_group_id="+document.SubParentForm.doc_group_id.value +"&doc_id="+document.SubParentForm.doc_id.value;
     // choose what function you are going to call when ajax returns
     var ajaxcallback = alertContents;
     // use jquery to call your asp page
     $.ajax({ url:ajaxurl, success:ajaxcallback });


Open in new window

jahlifeAuthor Commented:

Thanks very much for translating this into JQuery with your added comments.  The page already includes JQuery so I can test this immediately.  

One quick question to help me understand your solution (as a newbie to JQuery):

How are you constructing the $.ajax call to receive results from the ASP script, when executing the alertContents callback function.  Specifically, how is the ASP script return value generated by response.write(nextURL) or response.write("0") being received or mapped to the parameter, responseText, for the callback function, alertContents?

There is no quick answer to this question but I'll do my best.

JQuery's $.ajax() function is similar to the custom Ajax code you wrote earlier. All of the basic concepts you used when writing your own Ajax function were correct. However, there are a lot of pit falls to watch out for when writing an Ajax function and the author's of JQuery have done a good job tying up all the loose ends.

What exactly does an Ajax function do?
Imagine you have a file on your webserver called 'test.htm' and imagine that it contains the word "test" and nothing else. If you type http://myserver.com/test.htm into your browsers address bar, you will see "test" written on the screen. Similarly, if you use an Ajax function to call the file 'test.htm', the value of the responseText variable will be "test" (this is built in to how Ajax works). Ajax will always fetch the same text that you would see if you viewed the file in your browser.

What about ASP files?
The same is true of ASP files. If you make your ASP page print out a URL, then you would see that URL in the browser if you typed the address of your ASP page into the address bar. Ajax would therefore get the same URL and store it in responseText.

How is responseText passed to the alertContent() function?
So, when you call $.ajax({ url:ajaxurl, success:ajaxcallback }), you are telling jQuery to go fetch the contents of the file stored at 'ajaxurl' (your 'bizamajig-update-data-event.asp' file) and to pass that content to the function stored in 'ajaxcallback' (your 'alertContents' function). jQuery will fetch the the content using Ajax and, as soon as it's done, it will call the ajaxcallback function.

The alertContent function takes one parameter and you can name it whatever you want. I named it responseText for clarity. Regardless of what you name it, that parameter will always contain the response text. jQuery does the work of passing that parameter when it calls the function.

Did that help?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jahlifeAuthor Commented:
Clean solution and thanks for taking time to provide supportive explanations.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.