Passing Javascript Variable Into Template Toolkit Without Form

Question

I would like a second menu to be updated dynamically based on the current selection of a first menu, without the user submitting a form.

I am learning to use Catalyst Framework with Template Toolkit, and the data for these menus is stored in a Model that I access using the TT directives.

I have previously used JQuery's .change() method to retrieve the status of a menu, and pass it to CGI for processing.

Can I do something similar with Template Toolkit? How do I pass a javascript variable into the TT directive? Other solutions?

RET · Accepted Answer · 2014-06-19 23:21:48Z

1

Yes, it can be done, but it's critical to bear in mind that once the template is rendered as HTML, TT plays no further part. It sounds like your previous experience with CGI will get you most of the way there: your .change() event will have to fire a Catalyst action that returns some JSON content for your menu.

Whatever variables need to be set up-front can be handled via TT, e.g. untested

$(document).ready(function(){
    $('#menu1').change(function(){
        var menuopt = $(this).val();
        $.ajax({
            url: "[% c.uri_for('/my/action') %]",
            data: "menu1=" + menuopt,
            dataType: "json",
            type: "GET",
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                $.map(data, function(item) {
                    // create menu2 here
                }
            }
        });
    });
});

edited Jun 19, 2014 at 23:21

answered Jun 19, 2014 at 4:27

RET

9,1881 gold badge32 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jonathan Over a year ago

I think it is .change(), not .onchange()

Jonathan Over a year ago

Also, it's $(this).val(); Otherwise, Thank you! This is very helpful.

RET Over a year ago

I did say it was untested :-). I'll correct the answer to match the question. Glad to help.

Leeft Over a year ago

FYI, the recommended way to attach events in jQuery is with on: $('#menu1').on( 'change', function() { ... } api.jquery.com/on

Collectives™ on Stack Overflow

Passing Javascript Variable Into Template Toolkit Without Form

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related