in reply to Re^2: How to let a user sort a list on a web page
in thread How to allow a user to reorder rows from a database using a web form?

I didn't appreciate that this was the kind of sorting you were looking for, however I'm glad you've found this useful. You'll notice this example code from the jQuery page works as is, you don't need any Perl module to make it work. Using CGI (or CGI::Application or your framework of choice) you can output dynamic content. You simply include this example jQuery code in the output you send to the browser.

I'd suggest using a templating system such as HTML::Template or Template::Toolkit to separate your Perl code from the HTML/CSS/JavaScript code. If you look at the HTML::Template documentation you'll notice the <TMPL_LOOP> tag which you could use to populate your sortable data (in the example above each row is a HTML <li>, list item).

I'd also suggest that you benchmark performance of this method with your dataset and compare it to the performance of the datatable plugins I mentioned previously.

Replies are listed 'Best First'.
cgi scripts running javascript and passing control back and forth
by yaconsult (Acolyte) on Jan 04, 2011 at 16:58 UTC
    Well I wasn't sure what would be the best way for management types to be able to sort the items. When I found this demo, it seemed like the perfect solution.

    I have been using perl for years for things like data munging, converting, etc. What I'm not sure of is how to connect the non-perl stuff to perl.

    I have a perl script that runs, pulls in data in the most useful format it can access, munges it and creates an sqlite database out of it. Now, I'm working on the other half where a manager will use a webpage to access data specific to him, based on his login, and allow him to rearrange the order of the items.

    So, let's assume he's logged in, now he gets taken to a page like the one in the demo. Based on his login, the CGI has extracted relevant items from the database. In the first version, I generated an html table from the results of my database query. Instead, I would like to generate the javascript screen shown in the demo. After he rearranges the items, I want him to be able to hit a save button or something. At that point, I assume I will need to traverse the dom stuff in order to extract the ordering that he has just imposed on the list.

    But I don't yet see how the pieces fit together. What does the CGI script that invokes the Sortable function look like? How and when does my CGI script get control back after the javascript code has finished running so I can extract the changes that were made?

    As a start, could you show me how to get the Sortable demo working from CGI. Does the sortable stuff go into its own .js file or is it embeded in the perl script? How is control passed back and forth?

    I would like to see a simple conversion of the sortable demo so that it is started by or contained within a CGI script, the user rearranges the items on the screen, pushes a button, and them the CGI gets control back and prints the new order. This would help me to understand how they call and return from each other.

    This is very powerful to be able to interact with external libraries that are very good at doing specific tasks. Any books, articles, etc. about using perl with other toolkits, languages, etc. would be gratefully accepted.

    Thanks for you help and encouragement - it really helps! I'll send some time with the template toolkit but, again, I'm not sure how to tie all the pieces together between javascript and perl. Are there some examples I could study where CGI scripts invoke javascript toolkits and then get control back for further processing? Simple stuff just to illustrate would be fine. If templates were used too, that would be even better. Leo

      As I said before, you're not converting JavaScript to Perl. You say you can generate HTML, that's all you want to do here, simply generate the ordered list (as per the jQuery UI example you've found) using Perl to query a database.

      jeffa wrote a nice tutorial HTML::Template Tutorial which you should read. Simply use a <TMPL_LOOP> to create list items (<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><TMPL_VAR NAME=ITEM_NO>) based the results of your database results. Consider your template file as a standard HTML file, with some additional tags which HTML::Template populates before returning the HTML with your values. The first step here, before you do any Perl code, is to get a stand alone HTML file running this example code which works, then convert that into a template file.

      jeffa has provided working examples in that tutorial, all you'd need to do adapt the example, including your own database queries, include the jQuery.js and jQuery UI files (this is documented on the jQuery site).

        Template Tutorial will be digested tonight.

        Currently, my script is outputting a big html table. After writing the header, the main loop looks like this:

        foreach my $item (@$array_ref) { print Tr( { -align => 'LEFT', -valign => 'TOP', -width => '20%' }, [ td( [ $q->a( { href => ticket_link( $item->{id} ) }, "$item->{id}" ), "$item->{spocpri}", "$item->{priority}", "$item->{cfprojectname}", "$item->{subject}", name_from_email( $item->{requestors} ), date_only( $item->{created} ), date_only( $item->{requesteddue} ) ] ) ] ); }

        Just to keep things simple, could we leave templating out of it for the moment?

        How do I incorporate the sorttable code into this? Do I print the <style> and <script> sections from within my script after the header? I have not worked with javascript before at all and I don't understand how the perl and javascript work together. Does the javascript code get embedded in the perl script? I've seen some examples of this. Does the perl script load the javascript? Do the function definitions go into a separate file? How does the cgi script even know that JQuery-ui even exists?

        Maybe I will understand more after reading the template documentation tonight that you pointed me to.

        Thanks - I appreciate your help!