Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
user controlled article sorting
I haven’t seen this precisely addressed in this forum or elsewhere but if it has been forgive me. This should be simple to do.
I am working on a film review website and what I need is a table in my “Reviews” category that lists all of the review articles. By default they should be listed by Title descending, but I want to give users the option of sorting by year (custom field with film’s release year) or country (custom field for country associated with the film), and maybe a few others. Of course they should be able to sort ascending/descending for each field.
This is a screenshot from www.notcoming.com (another film review site) that has basically what I want:
http://th3lonius.byethost14.com/notcoming.jpg
I am new to textpattern. Any help with this is greatly appreciated!
Last edited by th3lonius (2010-02-09 01:15:27)
Offline
Re: user controlled article sorting
Two approaches to consider:
- Use javascript to handle the re-sorting (jquery is included with Txp, so that is a logical choice);
- Use the adi_gps plugin and create your own query paramater for the sort value, then apply that to the relevant
articleorarticle_customtag.
I think the javascript solution is the way to go. I can also conceive of no-plugin-no-javascript solutions, but nothing I’d actually want to attempt.
BTW check out this online Textile demo to learn Textile syntax for, inter alia, making links in the forum:
"http://th3lonius.byethost14.com/notcoming.jpg":http://th3lonius.byethost14.com/notcoming.jpgCode is topiary
Offline
Re: user controlled article sorting
Thank you but I’m afraid I’ll need more help. Can someone provide some sample code? I also need help structuring the review list itself. Should I use an XHTML table in a textpattern form?
Offline
Re: user controlled article sorting
I haven’t used it, but it looks as though this jQuery plugin would make it rather easy. You’d want something like this in your page template (not tested):
<table class="tablesorter">
<thead>
<tr>
<th>Title</th>
<th>Year</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<txp:article break="tr">
<td><txp:permlink><txp:title /></txp:permlink></td>
<td><txp:custom_field name="year" /></td>
<td><txp:custom_field name="country" /></td>
</txp:article>
</tbody>
</table>Although from your image I guess you also want paging. The above jQuery plugin seems to have a companion paging plugin.
Code is topiary
Offline
Re: user controlled article sorting
Thank you! This looks great. I’ll let you know how it works once I’ve tested it.
Offline
Re: user controlled article sorting
I can’t get tablesorter to work at all. Since my page uses a form called “header” containing <head> tags I tried inserting the function that calls the script in there. I followed the simple instructions from the tablesorter home page exactly, even using the same id for my table from the example, but nothing seems to work for me.
Last edited by th3lonius (2010-02-09 06:31:23)
Offline
Re: user controlled article sorting
See this thread for a similar question. In that thread the example use a plugin called chs_if_urlvar but a more reliable way nowadays is to use a ?sortby=ratings link as trigger as shown in the other thread and adi_gps to retrieve the url variable (adi_gps automatically assigns it to a txp variable). Then use txp’s in-built txp:if_variable to control your output according to the sortby instead of chs_if_urlvar.
Another jquery-based sort/paging plugin that I’ve used successfully in the past is datatables.
TXP Builders – finely-crafted code, design and txp
Offline
Re: user controlled article sorting
th3lonius wrote:
I can’t get tablesorter to work at all. Since my page uses a form called “header” containing <head> tags I tried inserting the function that calls the script in there. I followed the simple instructions from the tablesorter home page exactly, even using the same id for my table from the example, but nothing seems to work for me.
I know you said “exactly”, but just to be sure:
Did you load jquery.js first?
I tried it out and got it to work. One thing that surprised me was that the column headers did not automatically appear as links (no mouseover effect). But clicking them did sort the table.
However, jakob’s suggestion is certainly a fine alternative.
Code is topiary
Offline
Re: user controlled article sorting
<script src=“jquery.js” type=“text/javascript”></script>
Is there more to loading jquery than this? I have that placed in my header form between <head> tags. Well I’ve never used jquery before so I could be wrong.
I would really like to get this working though I’m considering jakob’s suggestion as well. Thanks again for your help jsoo.
Offline
Re: user controlled article sorting
When in doubt about whether or not a script is loaded, use Firebug, the WebKit inspector, or some such browser-based web development tool, to confirm that the script is loaded.
Txp keeps jquery.js in the textpattern directory. It’s used for the admin side. So you could load it like so:
src="<txp:site_url />textpattern/jquery.js"or even
src="/textpattern/jquery.js"bearing in mind that the root-relative form (second example) would not be portable to a subdirectory installation, as you might use for development.
Or if you prefer keeping scripts in a js directory at site-root level, you could put a copy of jquery there as well (or a symbolic link).
Last edited by jsoo (2010-02-09 22:38:39)
Code is topiary
Offline
Re: user controlled article sorting
Ha! It works! All thanks to Firebug. I love this tool. Thanks a million, jsoo.
Offline
Re: user controlled article sorting
If you use adi_gps to display a user-selected sortby value, using txp:variable, then you have another html form that you are using as a drop-down with custom field values to filter content, also using adi_gps, is there a way to preserve the sortby value after you submit the custom field filtering form? I hope that makes sense to someone.
I don’t know much about forms, but I’ve hacked one that works now. As you can see on the site, you can only use one of the custom field filters (Modalities…, Etiologies…) at a time, as the other value gets lost when you go to use the other filter. I’m using the following format:
<form class="selector" action='<txp:page_url type="request_uri" />' method="get">
<select name="modality" onChange="this.form.submit();">
<txp:if_variable name="modality" value="">
<option value="">Modalities...</option>
<txp:else /><option value="">All</option>
</txp:if_variable>
<option <txp:if_variable name="modality" value="CT">selected</txp:if_variable> value="CT">CT</option>
<option <txp:if_variable name="modality" value="Fluoro">selected</txp:if_variable> value="Fluoro">Fluoro</option>
<option <txp:if_variable name="modality" value="Mammography">selected</txp:if_variable> value="Mammography">Mammography</option>
<option <txp:if_variable name="modality" value="MRI">selected</txp:if_variable> value="MRI">MRI</option>
<option <txp:if_variable name="modality" value="Nuclear Imaging">selected</txp:if_variable> value="Nuclear Imaging">Nuclear Imaging</option>
<option <txp:if_variable name="modality" value="Plain Film">selected</txp:if_variable> value="Plain Film">Plain Film</option>
<option <txp:if_variable name="modality" value="Ultrasound">selected</txp:if_variable> value="Ultrasound">Ultrasound</option>
</select>
<noscript><input type="submit" value="Go!"></noscript>
</form>Should I be using something other than action='<txp:page_url type="request_uri" />' which will preserve the existing url queries? The textbook entry for page_url type=“request_uri” says that it will include any current query string, but it seems to be losing it when I submit the new form.
As a side note, is there a cleaner way of adding the selected attribute to the option elements other than what I’ve done? Possibly related to this, is there a way to automatically parse the custom field option elements using a form?
Last edited by aswihart (2010-02-16 00:21:35)
Offline