[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

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

Posted on 2010-04-08
4
Medium Priority
?
1,001 Views
Last Modified: 2013-11-11
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.

0
Comment
Question by:jahlife
  • 2
  • 2
4 Comments
 
LVL 3

Expert Comment

by:laneway
ID: 30129965
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
0
 
LVL 1

Author Comment

by:jahlife
ID: 30136560
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
0
 
LVL 3

Accepted Solution

by:
laneway earned 2000 total points
ID: 30142048
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?
0
 
LVL 1

Author Closing Comment

by:jahlife
ID: 31712682
Clean solution and thanks for taking time to provide supportive explanations.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question