Link to home
Start Free TrialLog in
Avatar of jahlife
jahlifeFlag for United States of America

asked on

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

Greetings,

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) {
                  http_request__update_data_event.overrideMimeType('text/xml');
                  }
            } 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);
      http_request__update_data_event.send('');

}

function alertContents() {

      if (http_request__update_data_event.readyState == 4) {
            if (http_request__update_data_event.status == 200) {
                  get_http_response__update_data_event=http_request__update_data_event.responseText;
                  if (get_http_response__update_data_event=="0"){
//                        document.write(http_request__update_data_event.responseText);
                        document.all.myerror.style.display="inline";
                  } else if (get_http_response__update_data_event!="0"){
                        document.location.href=get_http_response__update_data_event;
                  }
            } 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") )


      response.write(nextURL)

%>


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.

Avatar of laneway
laneway
Flag of Canada image

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
     alert('responseText:'+responseText);
     // this is the same as what you had before
     if (responseText=="0"){
       document.write(responseText);
       document.all.myerror.style.display="inline";
     } else if (responseText!="0"){
        document.location.href=responseText;
     }
   }
   
   // 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  
     +"&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;
     // 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 });
   }

</script>

Open in new window

jquery-1.4.2.min.js
Avatar of jahlife

ASKER

laneway,

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?

Thanks
ASKER CERTIFIED SOLUTION
Avatar of laneway
laneway
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jahlife

ASKER

Clean solution and thanks for taking time to provide supportive explanations.