Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / [xTableHeaderFixed] development of r7, was 'need tutorial'

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

  • Index
  •  » X Library
  •  » [xTableHeaderFixed] development of r7, was 'need tutorial'

#51 January 11, 2010 5:45:40 pm

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] development of r7, was 'need tutorial'

I've made some attempts at the AJAX version of this, but am still failing.

Here's the javascript I used (where "xthf" is the name of my class and "content" is the name of the div):

<script type="text/javascript">
    function pageLoad(sender,args){
        if (args.get_isPartialLoad()) {           
            document.getElementById('xthf-xthf-0').innerHTML="";
            xAddEventListener(window, 'load',
              function() {
               new xTableHeaderFixed('xthf', 'content');
              }, false
            );
        }
        else {
            xAddEventListener(window, 'load',
              function() {
                  new xTableHeaderFixed('xthf', 'content');
              }, false
            );
        }
    }
</script>

My idea was to try to delete the table that gets created (xthf-xthf-0) by the xTableHeaderFixed function only on partial postback. I've succeeded in blowing away the contents of that table with the above code, but I am unable to repopulate it with the updated contents. The xAddEventListener just doesn't seem to want to run again.

I've also tried code like this instead of xAddEventListener, which is based on the code in demo 3:

xthf.init('xthf','content')

This also doesn't work.

Any other ideas? Thanks.

Offline

 

#52 January 11, 2010 11:46:07 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] development of r7, was 'need tutorial'

Hi theseeker, I'm very sorry for my late reply. I've been really swamped with other things lately. I'm taking a look at your posts now.

Offline

 

#53 January 12, 2010 12:46:31 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] development of r7, was 'need tutorial'

theseeker wrote:

Did you make any changes to xTableHeaderFixed for Demo 3 (AJAX)?



Yes. I've now placed compressed files in the examples directory and the demos are using them. xthf1.js is for demos 1 and 2, and xthf3.js is for demo 3.

theseeker wrote:

Finally, can you explain a bit about how the requestTable and receiveTable functions work?



When the load event occurs, all <a> elements in the hmenu are assigned requestTable as a click listener.

When a menu item is clicked, requestTable is called. It first checks if the xHttpRequest object is busy with a previous request, if not it then determines which menu item was clicked by getting the number from the href property of this, which points to the <a> element clicked. This is the "table number" we want to request from the server, and it is assigned to the variable t.

When xhr.send is called, an object is passed as the 7th argument. This "user data" will be passed to the callback function (receiveTable). The object I use here is just a convenient way to pass two bits of info to the callback function: the ID of the element to which the table HTML will be assigned, and the table number.

When receiveTable is called, it checks the response status and assigns either the responseText or an error message to the innerHTML of the element with id = o.c, which is the container ID passed to the xhr.send method in the requestTable function.

Now that the table's HTML is on the page, we call xthf.init, passing it 2 args: 1) the className of the table, which is obtained by using the table number (o.t) as an index into the c array; and 2) the container ID to which the fixed header will be attached.

And so, if you only have one table, the requestTable and receiveTable functions could be as follows. Of course, this could be done many different ways.

function requestTable()
{
  var u;
  if (xhr.busy) {
    alert("In a hurry, eh?");
  }
  else {
    u = 'xthf-server.php';
    if (!xhr.send('GET', u, '', 6000, 'r', false, null, receiveTable)) {
      alert('Request error: ' + xhr.error.name + ', ' + xhr.error.message);
    }
  }
  return false;
}

function receiveTable(req, status)
{
  var e, s = '';
  if (status == 0) {
    s = req.responseText;
  }
  else {
    if (status & 2) { s = 'Request Error'; }
    if (status & 4) { s += ', Timeout Error'; }
    if (status & 8) { s += ', Response Error'; }
  }
  e = xGetElementById('content');
  if (e) {
    e.innerHTML = s; // insert the table into its container
    if (status == 0) {
      xthf.init('xthf', 'content'); // reinitialize xTableHeaderFixed for the table
    }
  }
}



Now, each time you want to reload the table just call requestTable.

Offline

 

#54 January 12, 2010 3:05:17 pm

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] development of r7, was 'need tutorial'

Hi Mike,

Thanks to your detailed response, I was able to get the new version of the code (xthf3.js) working with an ASP.NET UpdatePanel! I did not end up having to use the requestTable and receiveTable functions after all.

In case it helps others in the future, here's the javascript code I added in the head to make this work:

<script type="text/javascript">

    var myTable = new xTableHeaderFixed();

    function pageLoad(sender, args) {

        if (args.get_isPartialLoad()) {   
            myTable.init('xthf', 'content'); 
        }
        else {           
            xAddEventListener(window, 'load',
              function() {
                  myTable.init('xthf','content');
              }, false
            );
            // Next line only seems necessary for IE... why can't it init the table properly above?
            myTable.init('xthf', 'content');
        }
    }
</script>

pageLoad executes each time the page is loaded. The if statement checks whether we're doing an ajax partial postback or not. If partial postback, then just initialize the table with the new header. Otherwise (if it's the initial load), then create the listener.

Note: I'm not sure why I had to execute myTable.init twice for IE, but the fixed table headers would not work on the initial page load in IE without this. I'm open to suggestions on a way to avoid this, but it doesn't seem to hurt anything in IE or other browsers.

Then you just have to define your updatepanel, and your triggers (if necessary), and you should have success!

Thanks again to Mike for all the support!

Offline

 

#55 January 12, 2010 4:13:20 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] development of r7, was 'need tutorial'

That's excellent! Great work! tup

Since you are not using the xHttpRequest object you can just use the "xthf1.js" file. It is smaller because it does not have the code for xHttpRequest.

You said "pageLoad executes each time the page is loaded". That sounds like pageLoad itself is getting called on the window load event. You may have already tried it, but it would be interesting to try the following:

<script type="text/javascript">

    var myTable = new xTableHeaderFixed();

    function pageLoad(sender, args) {
        myTable.init('xthf', 'content'); 
    }
</script>



BTW, you might want to keep an occasional eye on this thread, as well as this one. We now know that xTableHeaderFixed has problems, especially in IE, when the table has border-collapse: collapse. Of course, it depends on many factors, so maybe your particular table is not having this problem. I'll be continuing to work on this issue and will post results in this and the other thread.

All the best! smile

Offline

 

#56 January 13, 2010 3:58:48 pm

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] development of r7, was 'need tutorial'

Mike, your much simpler code worked perfectly, and also prevented the need to initialize the table twice in IE. Thanks again.

Offline

 

#57 January 15, 2010 2:04:22 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] development of r7, was 'need tutorial'

I'm closing this topic since it has become very large. If anyone has a question or comment on xTableHeaderFixed feel free to start another topic.

Thanks! smile

Offline

 
  • Index
  •  » X Library
  •  » [xTableHeaderFixed] development of r7, was 'need tutorial'

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load