Volt engine generates error in jQuery block when using elseif conditional

I'm getting weird PHP error when using Phalcon's Volt engine in my project. The case seems to be very simple but although I have checked my code many times I can't seem to get working the simple if-elseif-endif structure.

The template code is here, it is placed in Javascript block in context of jQuery callcack function:

{% if table.form.rendered_in == 'offcanvas' %}
            //offcanvas form
            //set attributes

            $(row).find('td.edit-control').

                attr('data-source', '{{table.form.full_action_url}}?get_form').
                attr('data-canvas', 'body').
                attr('data-target', '#rightSlider').
                attr('data-toggle', 'offcanvas').

                click(function () { 
                    console.log('! show edit form: '+record_id);    
                    //edit_one(record_id);
                    if (!right_offcanvas_visible) {

                        //request form with ajax
                        var url = $(this).attr('data-source');
                        var data = {
                            'choose_record': [record_id]
                        };

                        //console.log('Serialized data: '+data);    
                        //$('div#rightSlider').offcanvas('show');
                        TASK.Ajax.Post(url, data, function(response) {  
                            $('div#rightSlider').find('div.rightSliderContent').html(response);
                            //$('div.offcanvas').offcanvas({canvas: 'body'}); // todo: make it work!
                            console.log('! edit one record form set up');    
                        });

                    }

                });

            //delete    
            $(row).find('td.delete-control').

                attr('data-source', '{{table.form.full_action_url}}?get_delete_form').
                attr('data-canvas', 'body').
                attr('data-target', '#rightSlider').
                attr('data-toggle', 'offcanvas').

                click(function () { 
                    if (!right_offcanvas_visible) {

                        //request form with ajax
                        var url = $(this).attr('data-source');
                        var data = {
                            'choose_record': [record_id]
                        };

                        TASK.Ajax.Post(url, data, function(response) {  
                            $('div#rightSlider').find('div.rightSliderContent').html(response);
                        });

                    }

                });

        {% elseif table.form.rendered_in == 'page' %}
            //on same page above the table

            $(row).find('td.edit-control').
                attr('data-source', '{{table.form.full_action_url}}?get_form').
                click(function () { 
                    console.log('! show edit form above table: '+record_id);    
                    var url = $(this).attr('data-source');
                    var data = {
                        'choose_record': [record_id]
                    };

                    TASK.Ajax.Post(url, data, function(response) {  
                        $('div#form-page-main').html(response);
                        $('html, body').animate({ //scroll smoothly to form
                            scrollTop: $('div#form-page-main').offset().top - config.scrollDistanceFromTop
                        }, config.timeAnimateToAjaxForm);
                    });

                });            


            $(row).find('td.delete-control').
                attr('data-source', '{{table.form.full_action_url}}?get_delete_form').
                click(function () { 
                    console.log('! show delete form above table: '+record_id);    
                    var url = $(this).attr('data-source');
                    var data = {
                        'choose_record': [record_id]
                    };

                    TASK.Ajax.Post(url, data, function(response) {  
                        $('div#form-page-main').html(response);
                        $('html, body').animate({ //scroll smoothly to confirmation
                            scrollTop: $('div#form-page-main').offset().top - config.scrollDistanceFromTop
                        }, config.timeAnimateToAjaxForm);
                    });

                });

        {% elseif table.form.rendered_in == 'modal' %}
            // rendered in modal window

            $(row).find('td.edit-control').
                attr('data-source', '{{table.form.full_action_url}}?get_form').
                attr('data-target', '#largeModal').
                attr('data-toggle', 'modal').
                click(function () { 
                    console.log('! show edit form in modal: '+record_id);    
                    var url = $(this).attr('data-source');
                    var data = {
                        'choose_record': [record_id]
                    };

                    TASK.Ajax.Post(url, data, function(response) {  
                        $('div#largeModal').find('div.modal-body').html(response);
                    });

                });            


            $(row).find('td.delete-control').
                attr('data-source', '{{table.form.full_action_url}}?get_delete_form').
                attr('data-target', '#smallModal').
                attr('data-toggle', 'modal').
                click(function () { 
                    console.log('! show delete form in modal: '+record_id);    
                    var url = $(this).attr('data-source');
                    var data = {
                        'choose_record': [record_id]
                    };

                    TASK.Ajax.Post(url, data, function(response) {  
                        $('div#smallModal').find('div.modal-body').html(response);
                    });

                });

        {% endif %}

The error is generated possibly by Volt compiler at first elseif referenced below, volt file doesn't get compiled into PHP.

{% elseif table.form.rendered_in == 'page' %}

The error says: Unexpected ENDIF in .../app/views/partials/grideditor.volt on line 307

The if-elseif-endif structure works nicely elsewhere in Javascript blocks. Which makes things even more odd is that when I replace the elseif with multiple if-endif, if-endif, ... as below, everything works fine.

{% if table.form.rendered_in == 'offcanvas' %}
            //offcanvas form
            //set attributes

            $(row).find('td.edit-control').

                attr('data-source', '{{table.form.full_action_url}}?get_form').
                attr('data-canvas', 'body').
                attr('data-target', '#rightSlider').
                attr('data-toggle', 'offcanvas').

                click(function () { 
                    console.log('! show edit form: '+record_id);    
                    //edit_one(record_id);
                    if (!right_offcanvas_visible) {

                        //request form with ajax
                        var url = $(this).attr('data-source');
                        var data = {
                            'choose_record': [record_id]
                        };

                        //console.log('Serialized data: '+data);    
                        //$('div#rightSlider').offcanvas('show');
                        TASK.Ajax.Post(url, data, function(response) {  
                            $('div#rightSlider').find('div.rightSliderContent').html(response);
                            //$('div.offcanvas').offcanvas({canvas: 'body'}); // todo: make it work!
                            console.log('! edit one record form set up');    
                        });

                    }

                });

            //delete    
            $(row).find('td.delete-control').

                attr('data-source', '{{table.form.full_action_url}}?get_delete_form').
                attr('data-canvas', 'body').
                attr('data-target', '#rightSlider').
                attr('data-toggle', 'offcanvas').

                click(function () { 
                    if (!right_offcanvas_visible) {

                        //request form with ajax
                        var url = $(this).attr('data-source');
                        var data = {
                            'choose_record': [record_id]
                        };

                        TASK.Ajax.Post(url, data, function(response) {  
                            $('div#rightSlider').find('div.rightSliderContent').html(response);
                        });

                    }

                });

        {% endif %}


        {% if table.form.rendered_in == 'page' %}
            //on same page above the table

            $(row).find('td.edit-control').
                attr('data-source', '{{table.form.full_action_url}}?get_form').
                click(function () { 
                    console.log('! show edit form above table: '+record_id);    
                    var url = $(this).attr('data-source');
                    var data = {
                        'choose_record': [record_id]
                    };

                    TASK.Ajax.Post(url, data, function(response) {  
                        $('div#form-page-main').html(response);
                        $('html, body').animate({ //scroll smoothly to form
                            scrollTop: $('div#form-page-main').offset().top - config.scrollDistanceFromTop
                        }, config.timeAnimateToAjaxForm);
                    });

                });            


            $(row).find('td.delete-control').
                attr('data-source', '{{table.form.full_action_url}}?get_delete_form').
                click(function () { 
                    console.log('! show delete form above table: '+record_id);    
                    var url = $(this).attr('data-source');
                    var data = {
                        'choose_record': [record_id]
                    };

                    TASK.Ajax.Post(url, data, function(response) {  
                        $('div#form-page-main').html(response);
                        $('html, body').animate({ //scroll smoothly to confirmation
                            scrollTop: $('div#form-page-main').offset().top - config.scrollDistanceFromTop
                        }, config.timeAnimateToAjaxForm);
                    });

                });

        {% endif %}


        {% if table.form.rendered_in == 'modal' %}
            // rendered in modal window

            $(row).find('td.edit-control').
                attr('data-source', '{{table.form.full_action_url}}?get_form').
                attr('data-target', '#largeModal').
                attr('data-toggle', 'modal').
                click(function () { 
                    console.log('! show edit form in modal: '+record_id);    
                    var url = $(this).attr('data-source');
                    var data = {
                        'choose_record': [record_id]
                    };

                    TASK.Ajax.Post(url, data, function(response) {  
                        $('div#largeModal').find('div.modal-body').html(response);
                    });

                });            


            $(row).find('td.delete-control').
                attr('data-source', '{{table.form.full_action_url}}?get_delete_form').
                attr('data-target', '#smallModal').
                attr('data-toggle', 'modal').
                click(function () { 
                    console.log('! show delete form in modal: '+record_id);    
                    var url = $(this).attr('data-source');
                    var data = {
                        'choose_record': [record_id]
                    };

                    TASK.Ajax.Post(url, data, function(response) {  
                        $('div#smallModal').find('div.modal-body').html(response);
                    });

                });

        {% endif %}

I'm using Phalcon 1.3.3 TS on Windows (x86, PHP 5.4.19)

Any suggestions are very appreciated! Thanks!



82.2k

Anyway you can simplify your example code? It's currently hard to read