Home > Development Tools, iPhone, JQTouch > One battle won, but not the war (yet!)

One battle won, but not the war (yet!)

I have been working on how best to convert my iUI based phone application to use JQTouch. My application consists of several levels of dynamically created pages of data. So you start at the Home level, click a link, go to the Results1 level, click a link on there and go to the Results2 level etc. Basically you are drilling down.

When the click results in a call to the back end, the level number increases by one as you drill down. Clicking on a link to book marked data takes you to a DIV within the current result set so the level does not change since there is no back end call.

In order to generate the level numbers the back end includes the current  level number as a parameter in the url of each link within a result set and increments it each time it runs as you drill down.

When you hit the back button, iUI would simple replace the currently displayed page with the previous one from the history cache. If you then hit a link that drove the back end again, the next result set would have the same id as the one you just came back from and iUI would replace it (So Home Page, click->Level1 result set,back->Home Page, click->Leve1 result set again with same id as before).

So far, so good.

When I switched to JQtouch I found that jQT does not replace an existing DIV with the new one in the result set if it has the same id. This meant I ended up with two DIVS with the same id. Not a problem really except that:

  1. If I need to reference anything within the new DIV, it was after the old one in the DOM so it never got found.
  2. It’s a storage leak since the overall DOM just keeps getting bigger.

In fact, issue two was much larger than it appeared because any book mark DIVs within a result set might never be replaced as each set was unique.

So what I needed was some way to delete all the DIVs at previous higher logical level than the one I was at. So if I am on the home screen (level 0) and I go to the next screen I am at level 1 so delete anything at level 2 (should not be anything). When I return to the home screen (level 0) delete any DIVs under the body at level 1. That will delete the main result set DIV and any attached bookmark DIVs for that result set.

The problem was, how to know which divs were at which level, and how to know when to delete them?

The logical level problem is actually quite easy. Since my back end knows what logical level the current page is because of the parameter value in any link that is clicked that drives it, I simple included the level number in the DIVs class, along with any other class values it might need. For example:

       <div id="home" class="0">

Then, in the head section of the initial page I added the following script:

$('*').bind('pageAnimationEnd', function(e, info){
   if (info.direction == 'in') {
   var classes = \$(e.target).attr('class').split(' ');
   var level=-1;
   for (var i=0;i<classes.length;i++) {
      var myclass = parseInt(classes[i]);   // make integer    
      if (classes[i] == myclass) {          // if numeric
         if (myclass > level) {             // if greater then prev
         level = myclass;                // save it
         }
      }
   }
   var leveltoremove = level+1;             // curr level or -1
   if (leveltoremove > 0) {                 // do not del home div
      $('body > div').remove('.'+leveltoremove);  // Remove divs
      }
   };
 });

This code runs when jQT completes the page animation, it is only interested in the target page (info.direction == ‘in’). It grabs the class(s) from the target page (DIV) which is a space delimited string of class names and splits them into an array. Then it looks for the numeric one which should be the level number of that DIV. It then adds one to that level number (I.E, the level above the one we just went to) and deletes all DIVs under the body with the that level number, So if we went forward to from say level 1 output to level 2, it would delete all DIVs under the body with a class of 3 (should not be any since we are going forward!).

When you go back the target level is the previous pages level, (E.G. 1 in this example) so it would delete all DIVs under the body with a class of 2 (which is where we just came from).

The –1 level is used to ignore  ‘page’ DIVs that might be invoked from the toolbar buttons for example such as an About screen or a Settings screen. When you open them, if they had a level the code would try to delete any DIVs with the next level number so if the toolbar screen had a level of say 1 and you were at logical level 3 when you invoked it, the code would try to delete logical level 2 DIVs. Not what you want!

Advertisements
  1. brian
    January 14, 2010 at 4:30 pm

    This is EXACTLY what I was looking for. I´ve “named” all my divs 0 to the homescreen (with categories, this one is in my index.html), 1 to the “image list” (ajax loaded php file), 2 to the php file showing the chosen image.
    Added the script, but when I browse images and then go back in history to my “home” and try the same images again, both content and the image are cashed and showing instant.

    Any idea? – seems like my “cacheGetRequests: false,” doesnt work at all either…?

  2. January 14, 2010 at 6:24 pm

    Not sure about this but don’t confuse removing elements from the DOM with caching. Just because you remove them from the DOM won’t (so far as I know) do anything to remove them from the browser’s cache.
    I don’t know if there is anything you can use such as a server side setting or meta tag in the page header to turn caching off. I have no images in my data so caching of them is not an issue and iUI is inserting my textual data into my page directly so the text content is not cached either in my case.

    Re the cacheGetRequests issue. Try searching the issues list on the jQT Google project at http://code.google.com/p/jqtouch/issues/list

    There’s a couple of things on there that might help, or just ask on there if not.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: