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