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!
