Removing an iframe by using AJAX

One of our core products at Dovetail Software is our classic ASP application, Dovetail Agent. This application has been in production for many years, and is very stable and reliable. However, since it is a classic ASP application, there is a lot of room for improvement.

I recently upgraded the Notification feature of the application. Dovetail Agent is a web application that has a main page (the console), and notifications need to be delivered to users automatically, without the users having to find them manually.

In the previous releases of Dovetail Agent, this process used an iframe control on the console. The source page for the iframe control would query the database for new messages. If new messages were found, a hyperlink would be displayed on the console, and a window for the notifications was opened. The source page for the iframe control used a meta tag to make it automatically refresh after a number of seconds (x_notify_frequency – set by the user).

meta http-equiv=refresh content=%=x_notify_frequency%;url=check_notifier.asp

The first change was to replace this iframe and meta-refresh with an AJAX call, which is set to repeat. I am a big fan of jQuery, so I added a few lines of code to set up the timer and make it call the AJAX function.

$(document).ready(function() {


       $.timer(%=x_notify_frequency%, function (timer) {


             checkNotifier(timer);


          });


    });

This uses the jQuery timer plugin, which makes it easy to set the frequency and target for the recurring event. The timer plugin uses the standard javascript methods setInterval() and clearInterval(), but makes them shorter and easier to use.

The checkNotifier() function sets up the jQuery AJAX call and evaluates the result. If successful and new messages were found, a hyperlink is displayed on the console, and a window for the notifications is opened. If an error occurs, the recurring event is stopped, and an alert is displayed to the user.

 function checkNotifier(timer) {


       var strURL = strAppPath + notifier/ajax_notifier.asp;


     


       $.ajax({


          type: POST,


          url: strURL,


          dataType: json,


          success: function(results){


             if(results.success == true) {


                if(results.messages  0) {


                   $(#notifier_message).text(New Notifier Messages).css(color, %=x_notify_color1%);


                   if(%=x_notify_immediate% == 1) {


                      OpenNotifierWindow();


                   }


                } else {


                   $(#notifier_message).empty();


                }


             } else {


                alert(An error occurred while checking for Notifications:  + results.errorMessage);


                timer.stop();


             }


          },


          error: function(xhr) {


             alert(An error occurred while checking for Notifications);


             timer.stop();


          }


       });


    }

The success actions were previously being done by the iframe source page, and it was updating the iframe’s parent window (the console) controls.

Now the iframe and its surrounding div are completely removed. Making the updates directly from the console is much more reliable than referring to a parent window. After writing this post I realize it doesn’t sound like a huge change, but it does make the application easier to maintain.