Translate

Thursday, June 28, 2012

jQuery - Multiple Subscriptions to a Topic

The other thing that caught me a couple of times this past month were multiple subscriptions to a topic when using subscribe. This was causing my AJAX action to be called multiple times. It turns out that if you do this:

$.subscribe('Whatever}', function(event,data) {...
in the page that you are returning using AJAX, the subscribe is saved. So the next time you make the same AJAX request and return with the page you will have another subscription to the topic.
What you need to do is specify the id of the tag like this this:

$('#TheID').subscribe('Whatever', function(event,data) {...

AJAX - Prevent Page Caching

There were a couple of little things that caught me this past. The first one was how Internet Explorer is so aggressive about caching and it's really annoying when it caches AJAX results. I decided to deal with it in my Struts action by adding a header to my response like this:

this.response.addHeader("Cache-Control", "max-age=0,no-cache,no-store,post-check=0,pre-check=0");

Monday, June 25, 2012

Internews - InfoAmazonia Launched: The Amazon as You’ve Never Seen It

Internews and O Eco, a Brazilian environmental news agency, have launched a pioneering new website. InfoAmazonia.org is an interactive mapping platform that provides timely news and reports of environmental challenges in the Amazon region through an innovative visualization of data. More...

Friday, June 15, 2012

AJAX - Browser History

One of the issues with using AJAX in a web site is that the browser history does not work. I spent a few days trying out quite a few of the solutions that you can find on the web and I was unable to find one that worked consistently in my application. The only option left was to add my own history and back button to my application.

The script file, rgUrlHistory.js:

var rgUrlStack = new Array();
var rgIdx = 0;

function rgPushAction(mAct, mApp, mID, mType) {
  rgObj = [];
  rgObj.action = mAct;
  rgObj.appID = mApp;
  rgObj.type = mType;
  rgObj.id = mID;
  rgUrlStack.push(rgObj);
  //limit to 10 items
  if (rgUrlStack.length > 10) rgUrlStack.splice(0,1); 
  rgIdx = rgUrlStack.length;
}

function rgBackAction() {
  var rgPop;
  //if we are at the top of the stack we need to pop this value because the first value popped is the current URL
  if (rgUrlStack.length == rgIdx) rgUrlStack.pop();
  //if we still have a value, pop it
  if(rgUrlStack.length > 0){
    rgPop = rgUrlStack.pop();
    //always keep one value on the stack
    if(rgUrlStack.length == 0) rgUrlStack.push(rgPop);
  }
  return rgPop;
}


In my application I call rgPushAction to save my URL and some additional information:

onclick="rgPushAction('%{urlFkey}','%{appTableID}','%{ID}','%{currentAppTable.type}');

On the menu bar in my web application I added a left arrow icon and call the the following JavaScript when the image is clicked:

function runBackQuery(){
   $.publish('HideViewMenu');
   var rgObj = rgBackAction();
   if(rgObj != ""){
     listView(rgObj.type, rgObj.appID, rgObj.id)
     $.post(rgObj.action, function(result){
          $("div#divBody").html(result);
        });
     $.publish('ShowDivBody');
   }
}

This script uses jQuery post with the URL we saved returned in rgObj.action to populate our target Div tag, divBody. "listView" is just another function that is called with the additional information we saved in the rgObj object. That's all there is to doing your own browser history for your AJAX actions.