in reply to Re^3: 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?

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

  • Comment on cgi scripts running javascript and passing control back and forth

Replies are listed 'Best First'.
Re: cgi scripts running javascript and passing control back and forth
by marto (Cardinal) on Jan 04, 2011 at 22:20 UTC

    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).

[reply]
[d/l]
[select]
      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} )
                    ]
                )
            ]
        );
    }

      [download]

      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!

[reply]
[d/l]
[reply]

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

        To keep things even simpler for the time being, if you take the advice I've already given and create a HTML page which works you'll know exactly what your perl code will have to return to the browser/user. The CGI script doesn't know anything about jQuery or jQuery UI, you simple references them in the HTML you return, which is why it's essential you get this working as a HTML page before considering going further.

        Firebug is often helpful when debugging web applications or even HTML/CSS/JavaScript, consider familiarising yourself with it. The Anonymous Monk post also suggests reading Ovids famous tutorial on CGI, this is very good advice IMHO.

[reply]

In Section Seekers of Perl Wisdom