Change tabbar and refresh

[barts2108]

Hi,

I have a webpage using jQTouch and the jqt.tabs sucessfully so far. Now that I want to configure the tabbar automatically I am running into the issue that I can't add or delete items to it and get the tabbar refreshed.

My page (index.html) contains default an about tab and 5 other tabs (say A, B, C, D and E). This works perfectly.

However in the $(document).ready(function..... I am loading an xml file from a webserver. This xml file represents the page contents for the 5 tabs (A to E).

Now I want to remove the A to E parts from the index.html (remove the entire

...

and when the xml is received, I want to add

...

parts for only those tabs that have contents. The addition of this through ajax is also no problem, but I cannot get the tabbar to refesh to display the new contents.

I have tried jQT.setPageHeight() but it does not do anything. When I look in the error console I do not see any errors.

Any hints for getting the tabbar to refresh and show the data that I have set ?

[DataZombies]

So you want dynamic tabs? Ok. Put "refreshTabbar: initTabbar," in the return {} so it looks like this...

  return {
    init_iScroll: init_iScroll,
    refreshTabbar: initTabbar, 
    setPageHeight: setPageHeight
  };

You might also have to comment out line 390. Let me know how this works.

[barts2108]

Works for me... only added the extra line to the return{} (at first I thought... how am I going to find that return{}, but I found it. Just for future reference it is the last return{ .. } before the end of the file jqt.bars.js)

EDIT: Just pressed comment + close too early: In Safari if I load the page for the first time, it works. If I do a refresh clicking the refresh button at the end of the address bar, the tab buttons do not change to the corrseponding page anymore. This is an intermittent problem. Say 9 out of 10 times the tab buttons do not work, rarely it does work. In Google Chrome this is even more consistent.

I did not comment out anything. Just calling jQT.setPageHeight() does not work well. It does show the texts in the tabbar for the dynamic tabs, but it does not show the icons. calling jQT.refreshTabbar() does work.

With jQT.refreshTabbar() I now first see an empty tabbar appearing from left to right, and when the AJAX data has loaded it re-appears from left to right. This is something cosmetic and I can overcome it by adding the entire tabbar dynamically

[barts2108]

Did some debugging on this:

line 410 and 411: default_target is set to the correct href first time. After that, the default target is set to javascript:void(0).

for testing I added an if statement

if (!$me.data('default_target')) { $me.data('default_target', $me.attr('href')); $me.attr('href', 'javascript:void(0);'); }

This makes it work for safari (desktop), safari on iPod touch and google chrome. Althoug I am getting better into javascript, I am not sure if this is the best solution to overcome the problem.

Please let me know if the if statement above is a suitable solution.

[DataZombies]

So refreshTabbar() works? Great! You're right about checking default_target, although I'd use the following code instead of just checking (!$me.data('default_target')).

// Put href target into data('default_target') and void href
if ($me.data === null || typeof ($me.data) === 'undefined') {
  $me.data('default_target', $me.attr('href'));
  $me.attr('href', 'javascript:void(0);');
}

If you don't mind I'd like to add refreshTabbar() and the above code in the fork.

Thanks! djp

[barts2108]

As you wrote to me in the email:

if ($me.data !== null && typeof ($me.data) !== 'undefined') {

And as you proposed above:

if ($me.data === null || typeof ($me.data) === 'undefined') {

Both will not work. The href should be stored and voided only when it is not done. This can't be detected by $me.data. Especially since I use animation as well and animation is set into data just before the if statement. As such, the if statement will work only if no animation is used. Whenever an animation is used, the if statement will not work anymore, nor will the tabbar refresh.

For the moment I will stick to:

if (!$me.data('default_target')) {

As it is working correctly

[DataZombies]

You'd think I'd learn not to respond to emails at 11:00 PM on a weekend.

Your right, 'default_target' has to be tested. However, you also have to test for typeof...'undefined' because when the app starts the attribute has no value and is 'undefined'.

if($me.data('default_target) === null || typeof('$me.data('default_target) === 'undefined' {

But if only testing for null works for you that's great.

[barts2108]

Ha ha, if you know you shouldn't write weekends after 11pm, then you shouldn't

I tested your last code, and I can agree that your tests are better than the single test that I did.

if ($me.data('default_target) === null || typeof('$me.data('default_target)) === 'undefined') {

I have tested the above (mind the parenthesis) and it works as well. So please go ahead and use your if statement. I will update my scripts after it has been updated in github.