Rendering Headings Issue

Steven Githens swgithen at mtu.edu
Wed Nov 25 18:06:00 UTC 2009


Hello Antranig,

Antranig Basman wrote:
> Hi there Steve - I might have an idea what is going on here (it might 
> well be related to FLUID-3276 reported by James ENG recently) but it 
> would help if you could paste in a section of the markup which is 
> generated by the renderer for the headers (slightly harder than in the 
> old RSF days but I'm sure you will manage) :P
>

The likely generated markup (from Firefox's perspective), which seems 
correct.

<table summary="" class="listHier lines nolines fl-pager-data" 
id="asnn-submissions-table" cellpadding="0" cellspacing="0">
         <thead>
             <tr class="sub-table-header">
                 <th class="flc-pager-sort-header">
                   <a href="#" title="Click to sort" 
class="student-name-sort" id="header::student-name-sort" 
checked="checked" value="true">Student Name</a>
                   <img src="/library/image/sakai/sortascending.gif" 
class="student-name-sort-img">
                 </th>

                 <th class="flc-pager-sort-header">
                   <a href="#" title="Click to sort" 
class="submitted-time-sort" id="header::submitted-time-sort" 
checked="checked" value="true">Submitted</a>
                  
                 </th>
                 <th class="flc-pager-sort-header">
                   <a href="#" title="Click to sort" 
class="submission-status-sort" id="header::submission-status-sort" 
checked="checked" value="true">Submission Status</a>
                  
                 </th>
                 <th class="grade-col-header" checked="checked" 
value="true">
                   <a href="#" title="Click to sort" 
class="grade-sort">Grade (Not Released)</a>

                   <!-- <img class="grade-sort-img" 
src="/library/image/sakai/sortascending.gif" /> TODO: Is this a renderer 
bug?-->
                 </th>
                
                 <th class="flc-pager-sort-header">
                   <a href="#" title="Click to sort" 
class="feedback-released-sort" id="header::feedback-released-sort" 
checked="checked" value="true">Feedback Released?</a>
                  
                 </th>
             </tr>
         </thead>


> One thing that makes me suspicious though is that you are giving a 
> value ("true") to "grade-col-header". I am uncertain what this might 
> mean, but my first expectation would be that this would try to destroy 
> the internal markup.

Thanks,  removing the value:true from the grade-col-header fixes it.

>
> Actually, the more I look at it, you are giving value: "true" to 
> absolutely everything. This may in fact be required to guide the duck 
> typing system but it was certainly not intended to be necessary.
>

Yeah, I can't exactly remember, but I started doing this to coerce some 
things into rendering the way I wanted, and then just started doing it.  
Some crappy programming by coincidence on my part.  :|


-Steve


> Cheers,
> A.
>
> Steven Githens wrote:
>> Hi all,
>>
>> We've been using the renderer+pager in production (albeit limited to 
>> a small pilot) for at least 5 months now I think (it's been at least 
>> that long since I've touched the code).  Anyways, I just realized one 
>> of our optional columns isn't sorting.
>>
>> I just tried upgrading to the Infusion 1.1.2 release.  Everything 
>> seems to work fine still (amazingly, since I was running off a random 
>> trunk revision before), but this is still an issue.
>>
>> Hopefully I'm setting things up wrong.
>>
>> I have this table header markup:
>> <thead>
>>             <tr class="sub-table-header">
>>                 <th class="flc-pager-sort-header">
>>                   <a class="student-name-sort" title="Click to sort" 
>> href="#">Student Name</a>
>>                   <img class="student-name-sort-img" 
>> src="/library/image/sakai/sortascending.gif" />
>>                 </th>
>>                 <th class="flc-pager-sort-header">
>>                   <a class="submitted-time-sort" title="Click to 
>> sort" href="#">Submitted</a>
>>                   <img class="submitted-time-sort-img" 
>> src="/library/image/sakai/sortascending.gif" />
>>                 </th>
>>                 <th class="flc-pager-sort-header">
>>                   <a class="submission-status-sort" title="Click to 
>> sort" href="#">Submission Status</a>
>>                   <img class="submission-status-sort-img" 
>> src="/library/image/sakai/sortascending.gif" />
>>                 </th>
>>                 <th class="grade-col-header flc-pager-sort-header">
>>                   <a class="grade-sort" title="Click to sort" 
>> href="#">Grade (Released)</a>
>>                   <!-- <img class="grade-sort-img" 
>> src="/library/image/sakai/sortascending.gif" /> TODO: Is this a 
>> renderer bug?-->
>>                 </th>
>>                 <th class="report-col-header 
>> flc-pager-sort-header">Report
>>                   <!-- <a class="submission-report-sort" title="Click 
>> to sort" href="#">Report</a>
>>                   <img class="submission-report-sort-img" 
>> src="/library/image/sakai/sortascending.gif" />-->
>>                 </th>
>>                 <th class="flc-pager-sort-header">
>>                   <a class="feedback-released-sort" title="Click to 
>> sort" href="#">Feedback Released?</a>
>>                   <img class="feedback-released-sort-img" 
>> src="/library/image/sakai/sortascending.gif" />
>>                 </th>
>>             </tr>
>>         </thead>
>>
>> The issue is with the grade-col-header which we don't always display.
>>
>> The selectors all look like:
>> [snip]
>>  { selector: ".submission-report-sort-img", id: 
>> "submission-report-sort-img" },
>>  { selector: ".feedback-released-sort", id: "feedback-released-sort" },
>>  { selector: ".feedback-released-sort-img", id: 
>> "feedback-released-sort-img" },
>>  { selector: ".grade-sort", id: "grade-sort" },
>>  { selector: ".grade-sort-img", id: "grade-sort-img" },
>>  { selector: ".grade-col-header", id: "grade-col-header" },
>> [snip]
>>
>> The first part of the tree for the headers looks like:
>>
>> var tree = {
>>      children: [
>>        { ID: "student-name-sort",
>>          value: true,
>>          decorators: [
>>            {"jQuery": ["click", onSortClick('studentName')]}
>>          ]
>>        },
>>        { ID: "submitted-time-sort",
>>          value: true,
>>          decorators: [
>>            {"jQuery": ["click", onSortClick('submittedTime')]}
>>          ]
>>        },
>>        { ID: "submission-status-sort",
>>          value: true,
>>          decorators: [
>>            {"jQuery": ["click", onSortClick('submissionStatus')]}
>>          ]
>>        },
>>        { ID: "feedback-released-sort",
>>          value: true,
>>          decorators: [
>>            {"jQuery": ["click", onSortClick('feedbackReleased')]}
>>          ]
>>        }
>>      ]
>>  };
>>
>>
>> Then if the optional column should be included:
>>
>> if (asnn2subview.graded === true) {
>>    tree.children.push({
>>      ID: "grade-col-header", value: true
>>    });
>>    tree.children.push({
>>      ID: "grade-sort",
>>      value: true,
>>      decorators: [
>>        {"jQuery": ["click", onSortClick('grade')]}
>>      ]
>>    });
>>      /*
>>    tree.children.push({
>>      ID: "grade-col-header:", value: [{
>>        ID: "grade-sort",
>>        value: true,
>>        decorators: [
>>          {"jQuery": ["click", onSortClick('grade')]}
>>        ]
>>      }]
>>    }); */
>>  }
>>
>>
>> The conditional rendering works fine, but on tables when we do 
>> enable, there is no event happening when the sort link for that 
>> column is clicked.  You can see from the commented out bit, that I 
>> also tried making the <th> a branch container rather than just an 
>> optionally rendering entry point.
>>
>> I realize this is pretty lame, and we should be doing more 
>> metaprogramming to set up this table, but it worked and was fast to 
>> set up in the time we had.  We're also rendering the inside our 
>> selves with the rendering because we do ajax requests for every sort 
>> page (which actually is fairly fast for this particular data set and 
>> solved some performance issues ).
>>
>> Any ideas or spot checks on what we're doing wrong to set up that 
>> link in the optional <th> with the event decorator?
>>
>> Megacheers,
>> Steve
>> _______________________________________________________
>> fluid-work mailing list - fluid-work at fluidproject.org
>> To unsubscribe, change settings or access archives,
>> see http://fluidproject.org/mailman/listinfo/fluid-work
>




More information about the fluid-work mailing list