Phalcon's Volt engine generates error in jQuery block when using elseif conditional
Question
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!
1 answers
solution1
2 2014-11-03 22:33:27
You can start php inside volt and do those things, what volt don't provide.
i believe in future we will have
{% literal %} {% endliteral %}
or
{% verbatim %} {% endverbatim %}
there is already NFR in github: https://github.com/phalcon/cphalcon/issues/1253
Now i can't find any wayout, just to use pure php in this part like:
...
<?php
// your code like it would be simple *.php file
?>
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Autoescape setting for Phalcon's Volt-engine?
Using a datepicker with Phalcon Volt template engine
Phalcon Framework volt template engine
Have problems with using Volt with phalcon
Show block depending on user group in volt, phalcon
How to convert a variable to int in Phalcon's .volt?
phalcon volt template engine remove php code blocks
Adding id and attributes to Form element, Volt engine and Phalcon 3
How to integrate javascript to .volt template engine of phalcon php
How can I show a list of comma-separated related model titles using Phalcon's Volt templates?
Related Tags