Develop Reference

How to change variable inside twig in javascript

I want to change the variable inside Twig by javascript, but there is an error: Variable "max" does not exist.
my twig:
{% block body %}
<label for="maxN">Niveau MAX</label>
<input type="number" id="maxN" class="form-control">
{{ form_label(form.ncUoCommandeUo) }}
{{ form_widget(form.ncUoCommandeUo, {'attr':{'min':1, 'max': max}}) }}
{% endblock %}
{% block javascripts %}
<script>
my.ajax......
if (ncMaxUo.val() === 1) {
max = 1;
} elseif(ncMaxUo.val() === 2) {
max = 2;
} elseif(ncMaxUo.val() === 3) {
max = 3;
} else {
max = 4;
}
....
</script>
{% endblock %}

Just update my solution.
{% block body %}
<label for="maxN">Niveau MAX</label>
<input type="number" id="maxN" class="form-control">
{{ form_label(form.commande) }}
{{ form_widget(form.commande, {'attr':{'min':1}}) }}
{% endblock %}
{% block javascripts %}
<script>
my.ajax......
var maxN = $("#maxN");
maxN = ???;(get value from ajax)
$("#commande").attr("max", maxN.val());
....
</script>
{% endblock %}

How do I break up and display only 1 of three variants at a time?

I'm looking to build a multi-step product selector using tabs. I'm looking to display on variant per tab but can't find a way to break up variants to display them individually.
I have tried posting the code bellow multiple times (one in each tab) but this makes each selection "stuck". Yes I know this would of led to issues but I was just trying to make the code work.
<div class="product-size option-{{ option | handle }} {{ product_options }}">
<span class="option-label">{{ option }}:</span>
<div class="select-wrapper-sm">
<select class="form-control input-sm size-variants">
{% for name in option_names %}
<option {% if selected_value == name %}selected="selected"{% endif %} value="{{ name | handle | downcase | escape }}">{{ name }}</option>
{% endfor %}
</select>
</div>
{% if product_options == 'swatches' %}
<ul class="{% if option_title contains 'color' %}color-list{% else %}size-list{% endif %}" data-index="{{ forloop.index0 }}">
{% for name in color_image %}
{%- assign title = name | split:':' | first | replace:'!__!','' -%}
{%- assign img_src = name | split:':' | last -%}
<li {% if selected_value == title %}class="active"{% endif %}>
{% if option_title contains 'color' %}<span class="value"><img src="{% if settings.product_previews_colors_variants %}{{ img_src }}{% else %}{{ title | handle | prepend:'color-' | append: '.png' | file_url | downcase }}{% endif %}" alt=""></span>{% else %}{{ title | escape }}</span>{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
Currently the whole product form is being displayed with this code
<div class="product-actions product-id-{{ product.selected_or_first_available_variant.id }} {% if product.variants.size == 1 and quick_view == 'yes' %}product-no-options no-border{% endif %}">
{% form 'product', product %}
{% if product.selected_or_first_available_variant.inventory_management == "shopify" and product.selected_or_first_available_variant.inventory_quantity < 1 and product.selected_or_first_available_variant.inventory_policy == "continue" %}
<input type="hidden" name="properties[{{ 'general.theme.status' | t }}]" value="{{ 'general.theme.pre_order' | t }}">
{% endif %}
{% if product.metafields.c_f.line_properties != blank %}
{{ product.metafields.c_f.line_properties }}
{% endif %}
{% include 'product-options-form' design:'default' %}
{% if product.available %}
<div class="product-actions-row">
<div class="pull-left">
<div class="product-qty">
<div class="qty qty-changer">
<fieldset>
<input type="text" class="qty-input" name="quantity" value="1" data-min="1" {% if product.selected_or_first_available_variant.inventory_management == "shopify" and product.selected_or_first_available_variant.inventory_quantity > 0 and product.selected_or_first_available_variant.inventory_policy == 'deny' %}data-max="{{ product.selected_or_first_available_variant.inventory_quantity }}"{% endif %}>
<input type="button" value="+" class="increase">
<input type="button" value="-" class="decrease">
</fieldset>
</div>
</div>
<div class="product-stock-dynamic {% unless product.selected_or_first_available_variant.inventory_management == "shopify" and product.selected_or_first_available_variant.inventory_quantity > 0 and product.selected_or_first_available_variant.inventory_policy == 'deny' %}hidden{% endunless %} stock-dynamic">{% if product_inventory_count %}max <b>{% if product.selected_or_first_available_variant.inventory_management == "shopify" and product.selected_or_first_available_variant.inventory_quantity > 0 %}{{ product.selected_or_first_available_variant.inventory_quantity }}{% endif %}</b> {{ 'general.theme.itemss' | t }}{% endif %}</div>
</div>
<div class="pull-right">
{% capture status %}{{ 'general.theme.add_to_cart' | t }}{% endcapture %}
{% if product.selected_or_first_available_variant.inventory_management == "shopify" and product.selected_or_first_available_variant.inventory_quantity < 1 and product.selected_or_first_available_variant.inventory_policy == "continue" %}
{% capture status %}{{ 'general.theme.pre_order' | t }}{% endcapture %}
{% endif %}
<div class="product-actions-btn">
<button class="btn btn-lg js-add-to-cart-product-page" data-product-handle="{{ product.handle }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}" title="{{ status }}"><span>{{ status }}</span></button>
</div>
</div>
<div class="product-actions-link">
{% if quick_view == 'yes' %}{% assign position = 'bot' %}{% else %}{% assign position = 'right' %}{% endif %}
{% include 'product-card-and-page-actions' position:position %}
</div>
</div>
{% if section.settings.dynamic_checkout_button %}
<style>
.shopify-payment-button__more-options {
display: none;
}
.shopify-payment-button__button {
outline: none;
border-radius: 0;
text-transform: uppercase;
background: #d3fbc9;
color: #FFFFFF;
padding: 9px 35px 11px;
font-weight: 500;
line-height: 32px;
border: 0;
color: black;
font-weight: bold;
}
.shopify-payment-button__button--unbranded:hover:not([disabled]){
background: black !important;
color: #FFFFFF !important;
}
</style>
{{ form | payment_button }}
{% if section.settings.safe_checkout_image_yes %}
<br />
<h4>{{ settings.checkout_popup_guaranteed_caption }}</h4>
<img src="{% if section.settings.safe_checkout_image != blank %}{{ section.settings.safe_checkout_image | img_url:'master' }}{% else %}{{ 'guaranteed.png' | asset_url }}{% endif %}" alt="" class="img-responsive">
{% endif %}
{% endif %}
{% endif %}
{% endform %}
</div>
which uses {% include 'product-options-form' design:'default' %} to display the following code
<div class="product-options id_{{ product.id }} {{ product_options }} {% if product.variants.size == 1 %}product-no-options no-border{% endif %}">
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
{% unless product.options.size == 1 and product.options.first == 'Title' %}
{%- assign index = 0 -%}
{% for option in product.options %}
{%- assign option_names = '' -%}
{%- assign option_title = option | downcase -%}
{%- assign index = forloop.index0 -%}
{%- assign selected_value = '' -%}
{%- assign color_images = '' -%}
{%- assign color_image = '' -%}
{% for variant in product.variants %}
{% if variant == product.selected_or_first_available_variant %}
{% assign selected_value = variant.options[index] %}
{% endif %}
{%- assign img_url = variant.image.src | img_url: '1024x1024' -%}
{%- assign option_names = option_names | append:variant.options[index] | append:'<>' -%}
{%- assign color_images = color_images | append : img_url | append:'<>' -%}
{%- assign check_color_name = '!__!' | append:variant.options[index] | append:'!__!' -%}
{% unless color_image contains check_color_name %}
{%- assign color_image = color_image | append:'!__!' | append:variant.options[index] | append:'!__!:' | append:img_url | append:'<>' -%}
{% endunless %}
{% endfor %}
{%- assign color_images = color_images | split:'<>' | uniq -%}
{%- assign option_names = option_names | split:'<>' | uniq -%}
{%- assign color_image = color_image | split:'<>' | uniq -%}
<div class="product-size option-{{ option | handle }} {{ product_options }}">
<span class="option-label">{{ option }}:</span>
<div class="select-wrapper-sm">
<select class="form-control input-sm size-variants">
{% for name in option_names %}
<option {% if selected_value == name %}selected="selected"{% endif %} value="{{ name | handle | downcase | escape }}">{{ name }}</option>
{% endfor %}
</select>
</div>
{% if product_options == 'swatches' %}
<ul class="{% if option_title contains 'color' %}color-list{% else %}size-list{% endif %}" data-index="{{ forloop.index0 }}">
{% for name in color_image %}
{%- assign title = name | split:':' | first | replace:'!__!','' -%}
{%- assign img_src = name | split:':' | last -%}
<li {% if selected_value == title %}class="active"{% endif %}>
{% if option_title contains 'color' %}<span class="value"><img src="{% if settings.product_previews_colors_variants %}{{ img_src }}{% else %}{{ title | handle | prepend:'color-' | append: '.png' | file_url | downcase }}{% endif %}" alt=""></span>{% else %}{{ title | escape }}</span>{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endfor %}
{% endunless %}
<script>
var product_options_{{ product.id }} = [];
{%- assign options = product.options -%}
{% for option in options %}
{%- assign option_index = forloop.index0 -%}
{% for variant in product.variants %}
{%- assign params = variant.options -%}
product_options_{{ product.id }}{% for name in params %}{% if forloop.index0 > option_index %}{% continue %}{% endif %}['{{ params[forloop.index0]|handle|strip|downcase}}']{% endfor %}=[];
{% endfor %}
{% endfor %}
{% for variant in product.variants %}
{%- assign attributes = 'price,compare_at_price,id,image,inventory_quantity,inventory_management,inventory_policy,sku' | split:',' -%}
{% for attribute in attributes %}
product_options_{{ product.id }}{% for option in variant.options %}['{{ variant.options[forloop.index0] |handle|strip|downcase }}']{% endfor %}['{{ attribute|downcase }}']='{% if attribute == 'image'%}{% unless variant.image.src contains 'products' %}{{ product.featured_image | img_url: '1024x1024' }}{% else %}{{ variant.image.src | img_url: '1024x1024' }}{% endunless %}{% else %}{{ variant[attribute] }}{% endif %}';
{% endfor %}
{% endfor %}
</script>
{% if design == 'creative' %}</div>{% endif %}
{% if design == 'default' %}</div>{% endif %}
<script>
{% assign product_id = product.id %}
product_id = {{ product.id }}
options_product_id = $('.product-options.id_'+product_id);
$options_{{ product_id }} = $('.product-options.id_{{ product_id }}');
$select_{{ product_id }} = $('select',$options_{{ product_id }});
$ul_{{ product_id }} = $('ul',$options_{{ product_id }});
function updateSelectOptionsDisabling_{{ product_id }}(){
$('option',$select_{{ product_id }}.not(':first')).attr("disabled","disabled");
for(a in product_options_{{ product_id }}[$select_{{ product_id }}.first().val()]){
$('option[value='+a+']',$select_{{ product_id }}).removeAttr("disabled","disabled");
for(b in product_options_{{ product_id }}[$select_{{ product_id }}.first().val()][a]){
$('option[value='+b+']',$select_{{ product_id }}).removeAttr("disabled","disabled");
}
}
}
/*function currencyUpdate(){
Currency.convertAll(shopCurrency, jQuery('.selected-currency').text());
}*/
function removeAbsentOption_{{ product_id }}($variant,current,$ul,$this_a){
_this=$this_a;
$inventory_management = $variant['inventory_management'];
$inventory_policy = $variant['inventory_policy'];
$inventory_quantity = $variant['inventory_quantity']
if (($inventory_management != 'shopify') ||
($inventory_management == 'shopify' && $inventory_policy == 'continue') ||
($inventory_management == 'shopify' && $inventory_quantity > 0))
{
$('a[data-value=' + current + ']', $ul).parent().removeClass('absent-option');
}
};
function showAvailableOptions_{{ product_id }}(first_option_only,last_option_only)
{
first_option_only = typeof first_option_only !== 'undefined' ? first_option_only : false;
last_option_only = typeof last_option_only !== 'undefined' ? last_option_only : false;
if(first_option_only)
{
$a = $('a', $ul_{{ product_id }}.first());
} else if(last_option_only)
{
$('li',$ul_{{ product_id }}.last()).addClass("absent-option");
$a = $('a', $ul_{{ product_id }}.last());
} else
{
$('li',$ul_{{ product_id }}).addClass("absent-option");
$a = $('a', $ul_{{ product_id }}.not(':first'));
}
$a.each(function () {
current = $(this).data('value');
_this = $(this);
for (size in product_options_{{ product_id }})
{
if(!first_option_only || last_option_only){
size=$('li.active a',$ul_{{ product_id }}.first()).data('value');
}
if($ul_{{ product_id }}.length == 3){
flag_ignore_selection = false;
for (color in product_options_{{ product_id }}[size])
{
if(last_option_only){
color=$('li.active a',$ul_{{ product_id }}.not(':first').not(':last')).data('value');
}
for (material in product_options_{{ product_id }}[size][color])
{
switch (_this.closest('ul').data('index')) {
case 0:
if (product_options_{{ product_id }}[current] != undefined && product_options_{{ product_id }}[current][color] != undefined && product_options_{{ product_id }}[current][color][material] != undefined) {
removeAbsentOption_{{ product_id }}(product_options_{{ product_id }}[current][color][material],current,$ul_{{ product_id }},_this);
}
break;
case 1:
if (product_options_{{ product_id }}[size] != undefined && product_options_{{ product_id }}[size][current] != undefined && product_options_{{ product_id }}[size][current][material] != undefined) {
removeAbsentOption_{{ product_id }}(product_options_{{ product_id }}[size][current][material],current,$ul_{{ product_id }},_this);
}
break;
case 2:
if (product_options_{{ product_id }}[size] != undefined && product_options_{{ product_id }}[size][color] != undefined && product_options_{{ product_id }}[size][color][current] != undefined) {
removeAbsentOption_{{ product_id }}(product_options_{{ product_id }}[size][color][current],current,$ul_{{ product_id }},_this);
}
break;
}
}
}
}
else if($ul_{{ product_id }}.length == 2)
{
for (color in product_options_{{ product_id }}[size]) {
switch (_this.closest('ul').data('index')) {
case 0:
if (product_options_{{ product_id }}[current] != undefined && product_options_{{ product_id }}[current][color] != undefined) {
removeAbsentOption_{{ product_id }}(product_options_{{ product_id }}[current][color], current, $ul_{{ product_id }},_this);
}
break;
case 1:
if (product_options_{{ product_id }}[size] != undefined && product_options_{{ product_id }}[size][current] != undefined) {
removeAbsentOption_{{ product_id }}(product_options_{{ product_id }}[size][current], current, $ul_{{ product_id }},_this);
}
break;
}
}
}
else
{
if (product_options_{{ product_id }}[current] != undefined) {
removeAbsentOption_{{ product_id }}(product_options_{{ product_id }}[current],current,$ul_{{ product_id }},_this);
}
}
}
})
}
function renderSwatches_{{ product_id }}()
{
showAvailableOptions_{{ product_id }}(); //2nd and 3rd
showAvailableOptions_{{ product_id }}(true); //1st only
$('li.active.absent-option',$ul_{{ product_id }}).each(function(){
$(this).removeClass('active').siblings().not('.absent-option').first().addClass('active');
});
showAvailableOptions_{{ product_id }}(false,true); //1st only
$('li.active.absent-option',$ul_{{ product_id }}).each(function(){
$(this).removeClass('active').siblings().not('.absent-option').first().addClass('active');
});
}
$(function($) {
{% unless product_options == 'swatches' %}updateSelectOptionsDisabling_{{ product_id }}();{% endunless %}
$select_{{ product_id }}.first().addClass('first');
$ul_{{ product_id }}.first().addClass('first');
$select_{{ product_id }}.change(function(){
{% unless product_options == 'swatches' %}updateSelectOptionsDisabling_{{ product_id }}();{% endunless %}
if($(this).hasClass('first'))
{
for (var first_option_to_select in product_options_{{ product_id }}[$select_{{ product_id }}.first().val()])break;
$('option',$select_{{ product_id }}.not(':first')).removeAttr("selected");
$('option[value='+first_option_to_select+']',$select_{{ product_id }}.not(':first')).attr("selected","selected");
}
updateData('select',product_id,options_product_id);
Currency.convertAll('{{ shop.currency }}', Currency.cookie.read());
})
{% if product_options == 'swatches' %}
$('a',$ul_{{ product_id }}).click(function(e){
_this = $(this);
if(!_this.parent().hasClass('absent-option')){
if (!_this.parent('li').is('.active')){
_this.closest('ul').find('li').removeClass('active');
_this.parent('li').addClass('active');
}
renderSwatches_{{ product_id }}();
$this=$('ul.color-list:first > li.active:first > a:first',$options_{{ product_id }});
if($this.data('image')){
var $image = $('.main-image img',$ul_{{ product_id }});
imgSrc = $this.data('image');
var newImg = document.createElement("img");
newImg.src = imgSrc;
newImg.onload = function () {
$image.attr('src', imgSrc);
$image.attr('data-zoom-image', imgSrc);
}
}
updateData('ul > li.active > a',{{ product_id }},$options_{{ product_id }});
Currency.convertAll('{{ shop.currency }}', Currency.cookie.read());
}
e.preventDefault();
})
renderSwatches_{{ product_id }}();
{% endif %}
});
</script>
{{ 'custom.js' | asset_url | script_tag }}
Within there I can kinda of see that this code is what displays the variants but I can't figure out how to break up each variant to be able to display them individually.
<div class="product-size option-{{ option | handle }} {{ product_options }}">
<span class="option-label">{{ option }}:</span>
<div class="select-wrapper-sm">
<select class="form-control input-sm size-variants">
{% for name in option_names %}
<option {% if selected_value == name %}selected="selected"{% endif %} value="{{ name | handle | downcase | escape }}">{{ name }}</option>
{% endfor %}
</select>
</div>
{% if product_options == 'swatches' %}
<ul class="{% if option_title contains 'color' %}color-list{% else %}size-list{% endif %}" data-index="{{ forloop.index0 }}">
{% for name in color_image %}
{%- assign title = name | split:':' | first | replace:'!__!','' -%}
{%- assign img_src = name | split:':' | last -%}
<li {% if selected_value == title %}class="active"{% endif %}>
{% if option_title contains 'color' %}<span class="value"><img src="{% if settings.product_previews_colors_variants %}{{ img_src }}{% else %}{{ title | handle | prepend:'color-' | append: '.png' | file_url | downcase }}{% endif %}" alt=""></span>{% else %}{{ title | escape }}</span>{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
Any help is appreciated. I'm looking to just brake them up so i can style them individually with tabs. I can manage all the rest by studying more. This has just stumped me.
I was able to find this code which outputs what I need but I can't seem to make them clickable to make them an option
{% for option in product.options %}
{% if option == 'Size' %}
{% assign index = forloop.index0 %}
{% assign sizelist = '' %}
{% assign size = '' %}
{% for variant in product.variants %}
{% capture size %}
{{ variant.options[index] }}
{% endcapture %}
{% unless sizelist contains size %}
<span>{{ size }}</span>
{% capture tempList %}
{{sizelist | append: size | append: ' '}}
{% endcapture %}
{% assign sizelist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}

You may use a loop through product.variants object:
{% for variant in product.variants %}
What you need to do with variant.
{% endfor %}

Javascript does not work in the second page of a data table

Actually I'm working with the following datatable:
Data Table code:
<table aria-describedby="dataTable_info" cellspacing="0" class="table table-hover dataTable" id="dataTable" role="grid" style="width:100%;" width="100%">
<thead>
<tr>
<th>{{'fsaGeneralPlan.table.Auditors'|trans({}, 'FSABundle')}}</th>
<th>{{'fsaGeneralPlan.table.Audits'|trans({}, 'FSABundle')}}</th>
<th>{{'fsaGeneralPlan.table.Areas'|trans({}, 'FSABundle')}}</th>
</tr>
</thead>
<tbody>
{% for audit in auditsByArea %}
{% set myArray = audit.Audits|split(',') %}
{% set AuditsStatus = audit.AuditsStatus|split(',') %}
<tr>
<td>{{ audit.Auditor }}</td>
<td>
{# {% set long = numberOfAudits|length + 2 %} #}
{# <h1>{{ long }}</h1> #}
{% for i in 0..3 %}
{% set e = i + 1 %}
<a title="{{ AuditsStatus[i] }}" class="btn btn-outline-primary btn-sm auditButton {{ AuditsStatus[i] }}" data-id="Audit{{ myArray[i] }}" data-area="{{ audit.area_name }}" data-status="{{ AuditsStatus[i] }}" id="auditButton{{ myArray[i] }}" name="auditButton">{{'w' ~ e }}</a>
{# <input class ="auditButton {{ AuditsStatus[i] }} mx-2" value="{{'W' ~ i }}" href="" data-id="Audit{{ myArray[i] }}" data-area="{{ audit.area_name }}" data-status="{{ AuditsStatus[i] }}" id="auditButton{{ myArray[i] }}" name="auditButton" type='text' readonly ></input> #}
{% endfor %}
</td>
<td>{{ audit.area_name }}</td>
</tr>
{% endfor %}
</tbody>
</table>
And I have this Javascript to change the class of the buttons in the datatable once that the page is loaded:
<script type="text/javascript">
$(document).ready(function(){
$(".auditButton.Submitted").removeClass('btn-outline-primary');
$(".auditButton.Submitted").addClass('btn-outline-success');
$(".auditButton.Expired").addClass('btn-outline-danger');
$(".auditButton.Capturable").addClass('btn-outline-warning');
});
It works correctly but just in the first page of the datatable, it does not work in the other pages.
Any idea or subject of how to fix it or what is wrong?

You need to listen to the draw event for your table.
Why?
Your current setup works fine for the first page, because those elements are all rendered when $(document).ready() fires. However, the other pages are rendered after the document is ready.
Try:
const table = $('#dataTable').DataTable();
// Event listener for DT 1.10+
table.on('draw', function() {
$(".auditButton.Submitted").removeClass('btn-outline-primary');
$(".auditButton.Submitted").addClass('btn-outline-success');
$(".auditButton.Expired").addClass('btn-outline-danger');
$(".auditButton.Capturable").addClass('btn-outline-warning');
});
Doing this, you can also remove the same block of code from `$(document).
You can also place all this inside the draw callback for your datatable if you'd prefer:
const table = $('#dataTable').DataTable({
drawCallback: function(settings) {
// changes in here
}
});

jQuery datetimepicker- unable to select date from next year

I am working on a Python/ Django project, and one of the forms on a webpage has a datetimepicker field on which the user can select a date/ time from the drop-down that appears when the field is selected.
The problem that I currently have is that although the calendar displays a full month at a time, and the user can move through months/ years at a time by selecting next/ previous month, or choosing the year from a drop down inside the calendar, if they move to a month beyond the end of this year, then none of the dates are available for selection.
Having Google'd datetimepicker, it seems that this is a jQuery function, and I want to make sure that there is no value for its maxDate attribute- I've looked through jquery.datetimepicker.full.js, and although it's referenced there, it doesn't see to be given a value at all... so I can't see why this field is not allowing me to select a date beyond the end of this year... anyone have any ideas?
The view that is rendering this page is:
def concept(request, project_id):
project = Project.objects.prefetch_related('budget_versions').get(id=project_id)
deposit = Deposit.objects.get_or_create(project=project)[0]
presentations = project.budget_versions.select_related('meeting').prefetch_related('budget_items', 'cci_items', 'presenters').filter(version_number__isnull=False).annotate(vn=F('version_number') * -1).order_by('presentation_date', 'created', '-vn')
end_details = EndDetails.objects.get_or_create(project=project)[0]
presentation_formset = BudgetPresentationFormset(prefix="presentations", instance=project, queryset=presentations)
drawing_formset = DrawingUploadFormset(prefix="drawings", queryset=Drawing.objects.filter(budget__in=presentations).order_by('budget__presentation_date', 'budget__created'))
context = {
'project': project,
'presentations': presentations,
'presentation_formset': presentation_formset,
'drawing_formset': drawing_formset,
'deposit_form': DepositInfoForm(instance=deposit),
'ended_form': EndDetailsForm(instance=end_details),
'budget_notes_form': BudgetNotesForm(instance=project.budget_overview),
}
return render(request, 'projects/concept.html', context)
and the Django that is displaying the form on which the 'date' field is displayed is:
{% if not forloop.last and presentation_form.instance.budget_items.count %}
<tr class="split-rows">
<td colspan="3">Exc VAT {% if not presentation_form.instance.current_marker %}{{presentation_form.instance.grand_total_exc_vat|money:'£'}}{% else %}{{project.budget_overview.updated_exc_vat|money:'£'}}{% endif %}</td>
<td colspan="3">Inc VAT {% if not presentation_form.instance.current_marker %}{{presentation_form.instance.grand_total_inc_vat|money:'£'}}{% else %}{{project.budget_overview.updated_inc_vat|money:'£'}}{% endif %}</td>
</tr>
{% endif %}
<tr>
{% for hidden in presentation_form.hidden_fields %}
<td class="hidden">{{ hidden }}</td>
{% endfor %}
</tr>
{% for field in presentation_form.visible_fields %}
<tr class="split-rows">
{% if not field.name == 'pdf_package_dep' %}
<td colspan="6"><label>{{field.label}}</label></td>
{% endif %}
</tr>
<tr class="split-rows">
<td colspan="6">
{% if not field.name == 'pdf_package_dep' %}
{% if field.name == 'presentation_date' %}
{% with presentation_form.instance.meeting as meeting %}
{% include "projects/includes/meeting_bit.html" with employee=request.user.employee meeting=meeting UID=presentation_form.instance.id %}
{% endwith %}
{# <a class="ical_trigger button" data-view-url="{% url 'events:add_to_cal' %}" {% if not field.value %}style="display:none"{% endif %}>Add to calendar</a> #}
{% else %}
{{field}}
{% endif %}
{% endif %}
</td>
</tr>
{% endfor %}
Edit
It would appear that what's actually displaying the calendar is the HTML file included by the line:
{% include "projects/includes/meeting_bit.html" with employee=request.user.employee meeting=meeting UID=presentation_form.instance.id %}
The meeting_bit.html file has the following code:
{% if meeting and meeting.event_creator and meeting.event_creator != employee %}
<table>
<tr>
<td>
{{meeting.date|date:"d/m/Y H:i"}}<br>
</td>
<td rowspan="2"><a class="change_event_organiser" data-view-url="{% url 'events:change_event_creator' meeting.id %}" class="button">Edit</a></td>
</tr>
<tr>
<td class="text-sm">
Organised by {{meeting.event_creator}}
</td>
</tr>
</table>
{% else %}
<div id="cal_{{field.name}}_{{UID}}">
{{field}}
<a class="ical_trigger button" data-view-url="{% url 'events:add_to_cal' %}" {% if not field.value %}style="display:none"{% endif %}>
{% if meeting.event_id %}Update calendar event{% else %}Add to calendar{% endif %}
</a>
</div>
{% endif %}
I can see when I 'inspect' the date field of the form in the browser, that it is in a div which has an ID in the format cal_{{field.name}}_{{UID}}, so I know that this is where the calendar is initialised/ displayed... But I can't see anything that is restricting the available options for selection to dates from this year only... why can't I select a date from next year, or any other year in the future?

(symfony2) how to persist an entity using ajax

i'm coding a simple forum, and i want that the user add the message without refreshing the page, i dont know about ajax , i tried to make things work but when i click on the submit button nothing happens, any help please ??
here is my cotroller :
$request = $this->get('request');
$entityManager = $this->getDoctrine()->getManager();
$msga = new Msg();
$form = $this->get('form.factory')->create(new MsgType());
$form->handleRequest($request);
if ($form->isValid())
{
if($request->isXmlHttpRequest())
{
$msga->setContenu($form->get('contenu')->getData());
$msga->setDateEcriture($date);
$msga->setNbvote(0);
$msga->setUser($user);
$msga->setForum($forum);
$entityManager->persist($msga);
$entityManager->flush();
return $this->render('otaotaBundle:Forum:forum.html.twig', array(
'forum'=>$forum,
'msg'=>$msg,
'msgUF' =>$msgByUser,
'id' => $forum->getIdForum(),
'form' => $form->createView(),
'action' => "add",
));
}
}
and the view:
{% extends "::base.html.twig" %}
{% block body %}
<form action="{{path("show_forum", {id: id} )}}" method="post" novalidate>
Date de création :
<h7>{{forum.datedebforum|date("Y-m-d")}}</h7><br/><br/>
{{forum.description}}<br/><br/><br/>
<table>
{% for m in msg %}
<tr>
<td>
{{m.dateEcriture|date("Y-m-d")}}<br/>
{{m.nbVote}}
{{m.contenu}}
<br/><br/>
</td>
<td>
{% for ms in msgUF %}
{%if ms.idMsg == m.idMsg %}
<a class="link" href="{{ path('delete_msg',{id: ms.idMsg}) }}">supprimer</a>
{% endif %}
{% endfor %}
</td>
</tr>
{% endfor %}
</table>
<br/>
{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
{{ form_widget(form._token) }}
<textarea name="textarea" id="contenu"></textarea>
<input type="submit" value="Repondre" />
<script>
$(document).ready(function() {
$('form').submit(function(event) {
// prevents the browser from "following" the link
event.preventDefault();
var $url = $("form").attr("action");// + '.json';
var $value = $('#contenu').val();
$.ajax({
type: "POST",
url: $url,
data: $value
});
});
});
</script>
{% endif %}
</form>
{%endblock%}
i want that the message shows up after the submitting without refreshing