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 %}

Django referencing Javascript variable in server side template code

I have a page that adds textboxes dynamically, and on the dynamically added text boxes, I want to access the relevant context variable.
To do so, I somehow need to use the 'i' variable inside the javascript code/template code to reference it's value in the context.
Here's my javascript code where I need to use 'i' as an index for a context list:
<script>
var i = 2
function add_field()
{
var table = document.getElementById("tbl_location").getElementsByTagName('tbody')[0];
var input_name = document.createElement("th")
input_name.appendChild(document.createTextNode("S/N " + i))
var input_tb = document.createElement("td")
var input = document.createElement('input');
input.setAttribute("name", "sn" + i);
{% if curr_sn.i %}
input.setAttribute("value", {{ curr_sn.i }});
{% endif %}
input_tb.appendChild(input)
var input_row = document.createElement("tr")
input_row.appendChild(input_name)
input_row.appendChild(input_tb)
table.appendChild(input_row);
i++;
}
The specific lines are:
{% if curr_sn.i %}
input.setAttribute("value", {{ curr_sn.i }});
{% endif %}
Where 'i' is a javascript veriable, and curr_sn is a list the python code gives as a context.
The html part where I need to use 'i':
{% for i in max_board_list %}
{% if curr_sn.i %}
<tr>
<th>S/N {{ i }}</th>
<td><input type="text" name="sn{{ i }}" value="{{ curr_sn.i }}"></td>
</tr>
{% endif %}
{% endfor %}
Here 'i' is generated by a for loop, but I still need to access the same list.
How can I do this in both parts of code? All I could find the the opposite way which already works for me (using django template in javascript code).
Thanks
EDIT: for javascript side i found a solution (since I noticed that anyway my code is redundant and tries to do similar things in js&html). For the javascript part I use:
{% if curr_sn|length > 1 %}
i = {{ curr_sn|length }}
{% endif %}
Just to keep counting from the current number of boards.
Now I need to solve the html parts to display the saved boards in the context variable curr_sn

Found a solution for the html part as well.
I just use custom filters to do the checking.
I've registered two filters:
#register.filter(name='is_in')
def is_in(index, list):
if list is None:
return False
try:
list[int(index)]
return True
except:
return False
#register.filter(name='get_value')
def get_value(index, list):
if list is None:
return False
try:
return list[int(index)]
except:
return None
And in the HTML part I use the following:
{% for i in max_board_list %}
{% if i|is_in:curr_sn %}
<tr>
<th>S/N {{ i }}</th>
<td><input type="text" name="sn{{ i }}" value="{{ i|get_value:curr_sn }}"></td>
</tr>
{% endif %}
{% endfor %}
Hope this will help for others with the same problem.

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

Jquery datatable First load as html then paginate through ajax

I am working on an already written code base. I have to implement ajax pagination to a table. Right now we are using jquery datatable. When the page is opened they content is loaded as html thought jinja templating.
<table id="dataGrid" class="display">
<thead>
<tr>
{% if app_ctx.sub_nav == 'mine' or app_ctx.category == 'members' %}
<th class="no_sort mid"><input type="checkbox" value="" name="" id="dataGrid_check_all" /></th>
{% endif %}
{% if app_ctx.root == 'lab' %}
<th></th>
{% endif %}
<th>Access</th>
{% for field_title in field_titles() %}
<th>{{field_title}}</th>
{% endfor %}
</tr>
</thead>
<tfoot>
<tr>
{% if app_ctx.sub_nav == 'mine' or app_ctx.category == 'members' %}
<th></th>
{% endif %}
{% if app_ctx.root == 'lab' %}
<th></th>
{% endif %}
<th>Access</th>
{% for field_title in field_titles() %}
<th>{{field_title}}</th>
{% endfor %}
</tr>
</tfoot>
<tbody>
{% for item in items %}
<tr>
{% if app_ctx.sub_nav == 'mine' or app_ctx.category == 'members' %}
<td><input type="checkbox" class="item-ids" value="{{ item.id }}" /></td>
{% endif %}
{% if app_ctx.root == 'lab' %}
<td><a target="_blank" href="{{ '%s/%s' % ( app_ctx.url_for('details'), item.id) }}">More...</a></td>
{% endif %}
<td>{% if app_ctx.sub_nav != 'mine' %}<input name="item_ids" type=hidden value="{{ item.id }}">{% endif %}
<div style="width: 65px; display: block; overflow: auto;">{{ acl_display(item) }}</div></td>
{% for field_value in field_values(app_ctx, item) %}
{{field_value|safe}}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
What i need to do is, I just want to load first ten records as html and then load rest of the pages through Ajax request. Please tell how can this be achieved.
current js code
var table = $("{{ selector }}");
var dataTableInitOptions = {
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"aaSorting": {% if app_ctx and app_ctx.category == 'files' and app_ctx.sub_nav == 'mine' %}[[ 7, "desc" ]]{% else %}[[ 1, "desc" ]]{% endif %},
"oLanguage":{
"sSearch":"Search all columns:"
},
"bStateSave": true {# save search and sorting state in cookies #}
};
{% if init_options %}
var additionalOptions = ({{ init_options|safe }});
for (var i in additionalOptions) {
dataTableInitOptions[i] = additionalOptions[i];
}
{% endif %}
if (table.width() > 900) {
dataTableInitOptions.sScrollX = 920;
dataTableInitOptions.bScrollCollapse = true;
//dataTableInitOptions.sScrollXInner = table.width();
}
dataTableInitOptions.fnInitComplete = function() {
{% if filters and filters_placed_in_table %}{{ filters.render_filters_js() }}{% endif %}
{# sort by Uploaded #}
{% if app_ctx and app_ctx.category == 'files' %}
{% if app_ctx.sub_nav == 'mine' %}
this.fnSort( [[7,'desc']] );
{% else %}
this.fnSort( [[6,'desc']] );
{% endif %}
{% endif %}
//move footer column filters to the top
if ($('.dataTables_scroll').length) {
var scrollParts = $('.dataTables_scroll').children();
var footer = scrollParts[2],
body = scrollParts[1];
scrollParts[1] = footer;
scrollParts[2] = body;
$('.dataTables_scroll').append(scrollParts);
} else {
//no scroll
//append empty row to the header and move footer in place of that row
$(this).css({position:'relative'});
var footer = $('tfoot tr', $(this)).children(),
colNum = footer.length,
header = $('thead tr:first', $(this)).children();
var widths = header.map(function(){return $(this).width()});
$('tfoot', $(this)).css({'position':'absolute', 'top': $('thead', $(this)).height() + 'px', 'left':'0', 'right':'0'});
$('thead', $(this)).append($('<tr></tr>').css({'height':$('tfoot', $(this)).height() + 12 + 'px'}));
footer.each(function(i, el) { $(el).width(widths[i] + 2) });
}
};
$("{{ selector }}").dataTable(dataTableInitOptions).columnFilter();