We Keep Coding

Shopify Store Refresh cart content. AJAX request

I have product page on which I have shop now btn. When user clicks on this button, page opens cart drawer with custom ajax template content.
I rewrited click event with my own logic. I use AJAX and send request for adding product by myself. Products are adding but is not showing in the cart drawer. Only after reloading page it is appearing.
Question is to can I refresh cart content? I'm trying to past content template via inner html. But it is looks like not liquid format.
Here is the template
<script id="CartTemplate" type="text/template">
{% render 'banana-stand-cart-top-container' %}
{% raw %}
<div class="drawer__scrollable">
{{#items}}
<div class="ajaxcart__product appear-animation appear-delay-{{animationRow}}">
<div class="ajaxcart__row">
<div class="grid">
<div class="grid__item one-third">
<img src="{{img}}" alt="{{name}}">
</div>
<div class="grid__item two-thirds">
<div class="ajaxcart__product-name--wrapper">
{{{name}}}
{{#if variation}}
<div class="ajaxcart__product-meta">{{variation}}</div>
{{/if}}
{{#if selling_plan_name}}
<div class="ajaxcart__product-meta">{{selling_plan_name}}</div>
{{/if}}
{{#properties}}
{{#each this}}
{{#if this}}
<span class="ajaxcart__product-meta">{{#key}}: {{this}}</span>
{{/if}}
{{/each}}
{{/properties}}
</div>
<div class="grid grid--full display-table">
<div class="grid__item display-table-cell one-half">
<label for="updates_{{key}}" class="visually-hidden">{% endraw %}{{ 'products.product.quantity' | t }}{% raw %}</label>
<div class="js-qty__wrapper">
<input type="text" id="updates_{{key}}"
class="js-qty__num"
value="{{itemQty}}"
data-id="{{key}}"
min="0"
aria-label="quantity"
pattern="[0-9]*"
name="updates[]">
<button type="button"
class="js-qty__adjust js-qty__adjust--minus"
aria-label="{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}">
{% endraw %}<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" viewBox="0 0 20 20"><path fill="#444" d="M17.543 11.029H2.1A1.032 1.032 0 0 1 1.071 10c0-.566.463-1.029 1.029-1.029h15.443c.566 0 1.029.463 1.029 1.029 0 .566-.463 1.029-1.029 1.029z"/></svg>{% raw %}
<span class="icon__fallback-text" aria-hidden="true">−</span>
</button>
<button type="button"
class="js-qty__adjust js-qty__adjust--plus"
aria-label="{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}">
{% endraw %}<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 20 20"><path fill="#444" d="M17.409 8.929h-6.695V2.258c0-.566-.506-1.029-1.071-1.029s-1.071.463-1.071 1.029v6.671H1.967C1.401 8.929.938 9.435.938 10s.463 1.071 1.029 1.071h6.605V17.7c0 .566.506 1.029 1.071 1.029s1.071-.463 1.071-1.029v-6.629h6.695c.566 0 1.029-.506 1.029-1.071s-.463-1.071-1.029-1.071z"/></svg>{% raw %}
<span class="icon__fallback-text" aria-hidden="true">+</span>
</button>
</div>
</div>
<div class="grid__item display-table-cell one-half text-right">
{{#if discountsApplied}}
<small class="cart__price--strikethrough">{{{price}}}</small>
<span class="ajaxcart__price">
{{{discountedPrice}}}
</span>
{{else}}
<span class="ajaxcart__price">
{{{price}}}
</span>
{{/if}}
</div>
</div>
<div class="grid grid--full display-table">
{{#if discountsApplied}}
<div class="grid__item text-right">
{{#each discounts}}
<small class="ajaxcart__discount cart__discount">
{{this.discount_application.title}} (-{{{this.formattedAmount}}})
</small>
{{/each}}
</div>
{{/if}}
{{#if unitBase}}
<div class="grid__item text-right">
<div class="product__unit-price">
{{{ unitPrice }}}/{{{ unitBase }}}
</div>
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
{{/items}}
{% endraw %}{% if settings.cart_notes_enable %}{% raw %}
<div class="appear-animation appear-delay-{{lastAnimationRow}}">
<label for="CartSpecialInstructions" class="ajaxcart__note">{% endraw %}{{ 'cart.general.note' | t }}{% raw %}</label>
<textarea name="note" class="input-full cart-notes" id="CartSpecialInstructions">{{note}}</textarea>
</div>
{% endraw %}{% endif %}{% raw %}
</div>
<div class="drawer__footer appear-animation appear-delay-{{lastAnimationRow}}">
{{#if cartDiscounts }}
<div class="grid grid--full">
<div class="grid__item one-half">
<p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.discounts' | t }}{% raw %}</p>
</div>
<div class="grid__item one-half text-right">
{{#each cartDiscounts}}
<p class="ajaxcart__price cart__discount">
{{this.title}} (-{{{this.formattedAmount}}})
</p>
{{/each}}
</div>
</div>
{{/if}}
<div class="grid grid--full">
<div class="grid__item one-half">
<p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</p>
</div>
<div class="grid__item one-half text-right">
<p class="ajaxcart__price"><span class="tdf-cart-total-parent">{{totalPrice}}</span></p>
</div>
</div>
<p class="ajaxcart__note">
{% endraw %}{{ 'cart.general.shipping_at_checkout' | t }}{% raw %}
</p>
{% endraw %}{% if settings.cart_terms_conditions_enable %}
<p class="ajaxcart__note ajaxcart__note--terms">
<input type="checkbox" id="CartAgree" />
<label for="CartAgree">
{% if settings.cart_terms_conditions_link != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_link }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</p>
{% endif %}{% raw %}
{% endraw %}
{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
{% raw %}
<button type="submit" class="btn btn--full cart__checkout{% endraw %}{% if settings.cart_terms_conditions_enable %}{% raw %} cart__checkout--ajax{% endraw %}{% endif %}{% raw %}" name="checkout">
{% endraw %}{{ 'cart.general.checkout' | t }}{% raw %}
</button>
</div>
{% endraw %}

Usually, there is some way (js-function) that allows you to rebuild the cart with new items.
You need to check the js-code that is responsible for showing the drawer-cart

So, need fire some event that you can find in your theme.js file. In my case I needed to add this:
document.dispatchEvent(new CustomEvent('cart:build', {
detail: {
cart: cart
}
}));

How can I add Javascript to change header text color on scroll in Shopify (District Theme)

So I have this js code but it's not being applied. I want the on-scroll class to be added to .logo-nav-contain, but when I scroll nothing happens. If I apply the red background to the .logo-nav-contain class it changes, so I know the style block is right. I think it may have something to do with Shopify and JS. Does anyone see a mistake here?
<script type="text/javascript">
$(function() {
$(window).on("scroll", function() {
if($(window).scrollTop() > 1) {
$(".logo-nav-contain").addClass("on-scroll");
} else {
$(".logo-nav-contain").removeClass("on-scroll");
}
});
});
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=397982167525776&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<style>
.on-scroll {
background-color: red !important;
}
</style>
<div data-section-id="{{ section.id }}" data-section-type="header-section" >
<div class="site-header-wrapper">
<header class="site-header {% if section.settings.minimal_padding == "minimal" %}minimal{% endif %} {% if section.settings.header_full_width %}full-width{% endif %}" data-scroll-lock="{{ section.settings.scroll_lock }}" role="banner">
<div class="wrapper" style="position: fixed; z-index: 1000; width: 100%; padding-right: 40px">
<div class="logo-nav-contain layout-{{ section.settings.header_layout }}">
{% comment %}
Use the uploaded logo from theme settings if enabled.
Site name gets precedence with H1 tag on homepage, div on other pages.
{% endcomment %}
{% comment %}
mobile menu below
{% endcomment %}
<header class="util">
<div class="wrapper">
<div class="left-wrapper">
<ul class="text-links">
<li class="mobile-menu">
<a href="#menu" class="toggle-menu menu-link">
<span class="icon-text">
<span class="icon icon-menu" aria-hidden="true">{% include 'icon-ui-menu' %}</span>
<span class="text" data-close-text="{{ 'layout.drawers.close_menu' | t }}">{{ 'layout.navigation.menu' | t }}</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</header>
<div class="logo-contain">
{% if template.name == 'index' %}
<h1 class="site-logo {% if section.settings.logo %}has-image{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="site-logo {% if section.settings.logo %}has-image{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% endif %}
{% if section.settings.logo %}
<a href="/" itemprop="url" class="logo-image">
{%- assign image = section.settings.logo -%}
{%- assign image_default_width = section.settings.logo_max_width -%}
{%- assign image_2x_width = image_default_width | times: 2 -%}
{%- assign image_3x_width = image_default_width | times: 3 -%}
{%- assign image_default = image_default_width | append: 'x' -%}
{%- capture widths -%}{{ image_default_width }},{{ image_2x_width }},{{ image_3x_width }}{%- endcapture -%}
{% assign image_widths = widths %}
{% include 'theme-rias' %}
<img id="{{ img_id }}" class="lazyload"
src="{{ image | img_url: image_default }}"
data-src="{{ image_url_pattern }}"
data-widths="[{{ image_widths }}]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape | default: shop.name }}">
</a>
{% else %}
{{ shop.name }}
{% endif %}
{% if template.name == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>
<nav class="nav-bar" role="navigation">
{% include 'site-nav' %}
</nav>
<header class="util">
<div class= "right-wrapper">
{% if shop.customer_accounts_enabled %}
{% include 'accounts-nav' %}
{% endif %}
<a href="/cart" id="CartButton">
<span class="icon-fallback-text"></span>
{{ 'layout.cart.title' | t }}
<span id="CartCount">({{ cart.item_count }})</span>
</a>
{% if settings.ajax_cart_enable %}
{% include 'cart-preview' %}
{% endif %}
</div>
</header>
</div>
</div>
</header>
</div>
</div>
<nav id="menu" class="panel" role="navigation">
<div class="search">
{% include 'search-bar' %}
</div>
{% include 'site-nav' %}
<div class="account">
{% if shop.customer_accounts_enabled %}
{% include 'accounts-nav' %}
{% endif %}
</div>
</nav>

let logo = document.querySelector('.logo-nav-contain');
window.addEventListener("scroll", (e) => {
let scrolled = document.scrollingElement.scrollTop;
if(scrolled > 1){
logo.classList.add(
'on-scroll');
}else {
logo.classList.remove(
'on-scroll');
}
});
.logo-nav-contain {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
.on-scroll {
background: red;
color: #fff;
}
<div class="logo-nav-contain">logo</div>
<div style="height:1000px"></div>

jquery - not able to replace siblings div with id or class

I have this jQuery script that I do not fully understand. I was wondering why I cannot replace the siblings('div') with a class or id? I think my code doesn't work properly. What I was trying to do is replace some content with a button click, and then the second content, replace it again with the second function.
<script>
$(document).ready(function () {
$('.btnClick').on('click', function () {
var faculty_id = $(this).attr('id');
$('#' + faculty_id + '_tab').show().siblings('div').hide();
});
$('.btnClick2').on('click', function () {
var department_id = $(this).attr('id');
$('#' + department_id + '_tab').show().siblings('div').hide();
});
});
</script>
<div class="row">
<div class="col-md-3">
<div class="jumbotron">
<h4>Search courses</h4>
<hr>
<br>
<ul>
{% for faculty in faculties %}
<li class="btnClick" id="fac_{{ faculty.pk }}">{{ faculty.name }}</li>
<ul>
{% for department in faculty.department_set.all %}
<li class="btnClick2" id="dep_{{ department.pk }}">{{ department.name }}</li>
<ul>
{% for study in studies %}
{% if study.department == department %}
<li>{{ study.name }}</li>
{% endif %}
{% endfor %}
</ul>
{% endfor %}
</ul>
{% endfor %}
</ul>
</div>
</div>
<div class="col-md-9">
<div class="jumbotron">
<div>
<h3>All courses</h3>
<ul>
{% for course in courses %}
<li>
<a class="first" href={{ course.slug }}>{{ course.name }}</a>
</li>
{% endfor %}
</ul>
</div>
{% for faculty in faculties %}
<div id="fac_{{ faculty.pk }}_tab" style="display:none;">
<h3> {{ faculty.name }} courses</h3>
<ul>
{% for department in faculty.department_set.all %}
{% for study in studies %}
{% if study.department == department %}
{% for course in courses %}
{% if course.study_programme == study %}
<li>
<a class="first"
href={{ course.slug }}>{{ course.name }}</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
{% endfor %}
{% for faculty in faculties %}
<ul>
{% for department in faculty.department_set.all %}
<div id="dep_{{ department.pk }}_tab" style="display:none;">
<h3>Department of {{ department.name }} courses</h3>
<ul>
{% for study in studies %}
{% if study.department == department %}
{% for course in courses %}
{% if course.study_programme == study %}
<li>
<a class="first"
href={{ course.slug }}>{{ course.name }}</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
</div>
</div>

Long loading Javascript (modal window)

On this site http://nashedom.ru there are JS scripts. Most are fast.
The modalka fancybox pages (for login users, in user cabinet, page объявления -> добавление объявления) are very slow. In Chrome loading is 25-28 seconds. In Firefox - 2,5 seconds.
The data is taken out of context.
HTML:
{% load hosts %}
<div class="b-header">
<div class="b-header__menu">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="b-menu">
<a>...</a>
<a>...</a>
<a>...</a>
<a>...</a>
<span class="b-menu__item btn_change-location">
<a href="#change-location" class="fancybox dashed">
{% if user.is_authenticated %}
View ads on site:
{% if user.districts.all.count > 1 %}
{% for district in user.districts.all %}
{% if forloop.last %}
<span>{{ district }}</span>
{% else %}
<span>{{ district }},</span>
{% endif %}
{% endfor %}
{% else %}
{% for district in user.districts.all %}
<span>{{ district }}</span>
{% endfor %}
{% endif %}
{% if user.regions.all.count > 1 %}
{% for region in user.regions.all %}
{% if forloop.last %}
<span>{{ region }}</span>
{% else %}
<span>{{ region }},</span>
{% endif %}
{% endfor %}
{% else %}
{% for region in user.regions.all %}
<span>{{ region }}</span>
{% endfor %}
{% endif %}
{% if user.cities.all.count > 1 %}
{% for city in user.cities.all %}
{% if forloop.last %}
<span>{{ city }}</span>
{% else %}
<span>{{ city }},</span>
{% endif %}
{% endfor %}
{% else %}
{% for city in user.cities.all %}
<span>{{ city }}</span>
{% endfor %}
{% endif %}
{% else %}
View ads on site:
{% endif %}
</a>
</span>
</div>
</div>
</div>
</div>
</div>
Templates modal window
{% load hosts %}
{% load widget_tweaks static %}
<div id="change-location">
<form action="{% host_url "setlocation" host "www" %}" method="post">
{% csrf_token %}
<div id="chose-city-wrap">
<div class="b-modal__title">Select your city</div>
<p>
<div class="b-modal__item">
<span>{{ location_form.country.label }}</span>
{{ location_form.country }}
</div>
</p>
<p>
<div class="b-modal__item">
<span>{{ location_form.districts.label }}</span>
{{ location_form.districts }}
</div>
</p>
<p>
<div class="b-modal__item">
<span>{{ location_form.regions.label }}</span>
{{ location_form.regions }}
</div>
</p>
<p>
<div class="b-modal__item">
<span>{{ location_form.cities.label }}</span>
{{ location_form.cities }}
</div>
</p>
<br />
<div class="b-modal__item b-modal__item_btn">
<input class="b-btn b-btn_red" type="submit" value="Сохранить">
</div>
</div>
</form>
</div>
<!-- end snippet -->
cities download form on the page where the brakes modal window!
<fieldset>
<legend>The territory of distribution of the ads</legend>
{{ form.country|add_class:"b-input__input js-select" }}
{{ form.districts|add_class:"b-input__input js-select chosen-select" }}
{{ form.regions|add_class:"b-input__input js-select chosen-select" }}
{{ form.cities|add_class:"b-input__input js-select chosen-select" }}
{# form.geo|add_class:"b-input__input" #}
</fieldset>

As you explain it, you have a lot of data to get (countries, cities), if you do it in php, you will lock the page until you retrive all those datas.
To have a shorter loading time, you just have to make everything in js (ajax).
You load your page with the cities, countries, ... without data.
Once the page is loaded (document.ready), you call your ajax to fill your cities, countries and so on.

How can I modify a date type field based when changing another date type field

I have two input type date fields and when changing the first one I need to add 14 business days to set the second one. How can I do this?
Here is all the code:
{% extends 'daciproveedorBundle::main.html.twig'%}
{% form_theme form 'dacicontratosBundle:Form:my_form_theme.html.twig' %}
{% block title %}{{ parent() }} - Edición de Contratos{% endblock %}
{% block css1st %}
<link rel="stylesheet" href="{{ asset('bootstrap/css/custom-bootstrap-header.css') }}" >
<link rel="stylesheet" href="{{ asset('bootstrap/css/custom-bootstrap-collapse.css') }}" >
<link rel="stylesheet" href="{{ asset('bootstrap/css/custom-bootstrap-grid_and_table.css') }}" >
<link rel="stylesheet" href="{{ asset('bootstrap/css/custom-bootstrap-tabs.css') }}" >
{% endblock css1st %}
{% block css2nd %}
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="{{ asset('bundles/genemuform/select2-3.5.0/select2.css') }}" rel="stylesheet"/>
<script src="{{ asset('bundles/genemuform/select2-3.5.0/select2.js') }}"></script>
{{ form_javascript(form) }}
{% endblock css2nd %}
{% block javascripts %}
<script type="text/javascript" src="{{ asset('bundles/dacicontratos/js/jquery-2.0.3.js') }}"></script>
<!-- <script type="text/javascript" src="{{ asset('bundles/dacicontratos/js/set_form_seguimiento.js') }}"></script> -->
<!-- <script type="text/javascript" src="{{ asset('bundles/dacicontratos/js/set_form_garantia.js') }}"></script> -->
<script type="text/javascript" src="{{ asset('bundles/dacicontratos/js/set_form_contratos_completo.js') }}"></script>
<!-- jquery ui -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
{% endblock %}
{% block page_content %}
{{ form_start(form) }}
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li {{ tab_selector|default('evaluacion') in ['evaluacion'] ? 'class="active"' : '' }} style="padding: 0px;">Evaluación</li>
<li {{ tab_selector|default('seguimiento') in ['seguimiento'] ? 'class="active"' : '' }} style="padding: 0px;">Seguimientos</li>
<li {{ tab_selector|default('garantia') in ['garantia'] ? 'class="active"' : '' }} style="padding: 0px;">Garantías y Pólizas</li>
<li {{ tab_selector|default('visita') in ['visita'] ? 'class="active"' : '' }} style="padding: 0px;">Visitas de Campo</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade {{ tab_selector|default('evaluacion') in ['evaluacion'] ? 'in active' : '' }}" id="evaluacion">
<br/><br/>
<h2 style="font-family: 'Oswald', sans-serif; font-weight: 300;">Contratos</h2>
<br/><br/>
<ul>
<li>{{ form_row(form.proveedor) }}</li>
<li>{{ form_label(form.codigo_referencia, 'Código referencia') }}{{ form_widget(form.codigo_referencia) }}</li>
<li>{{ form_row(form.nombre) }}</li>
<li>{{ form_label(form.contratoTipo, 'Tipo') }}{{ form_widget(form.contratoTipo) }}</li>
<li>{{ form_row(form.fecha_inicio) }}</li>
<li>{{ form_row(form.fecha_fin) }}</li>
<li>{{ form_row(form.monto) }}</li>
<li><p class="subtitle">Unidades</p></li>
<div class="panel-group" id="accordion">
{% set counter = 0 %}
{% for array_unidad in unidades %}
{% set counter = counter + 1 %}
{% set unidad_nombre = "unidad_nombre" ~ counter %}
{% set unidad_id = array_unidad.id %}
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" {# data-parent="#accordion" #} href="#{{ unidad_nombre }}">
<h4 class="panel-title">
{{ array_unidad.nombre }}
</h4>
</div>
<div id="{{ unidad_nombre }}" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="wide_label">
{% for array_contacto in array_unidad.contactos %}
{% for contacto in form.contactos %}
{% if contacto.vars.value == array_contacto.id %}
<li>
{{ form_widget(contacto) }}
{{ form_label(contacto) }}
{{ form_errors(contacto) }}
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</div>
{% endfor %}
</div>
<li><p class="subtitle">Sets de Preguntas</p></li>
{% set contador = 1 %}
{% set count = 0 %}
{% set cerrar_div = 'si' %}
{% for conjunto in form.conjuntos %}
{% if contador == 1 and count == 0 %}
<div class="row bg-custom-default">
{% set count = 1 %}
{% else %}
{% if contador == 1 and count == 1 %}
<div class="row bg-custom-white">
{% set count = 0 %}
{% endif %}
{% endif %}
<div class="col-md-3">
{{ form_widget(conjunto) }} {{ form_label(conjunto) }}
</div>
{% if contador == 3 %}
</div> <!-- <br/><br/> -->
{% set contador = 1 %}
{% set cerrar_div = 'no' %}
{% else %}
{% set contador = contador + 1 %}
{% set cerrar_div = 'si' %}
{% endif %}
{% endfor %}
{% if cerrar_div == 'si' %}
</div> <!-- <br/><br/> -->
{% endif %}
<br/>
<br/>
<li>{{ form_row(form.archivo) }}</li>
{% if file_url is defined and file_url != "" %}
<div id="file_attached">
<li>{{ asset(file_url) }} - Descargar <br/><img src="{{ asset('images/attachment.png')}}"></li>
</div>
{% endif %}
</ul>
</div>
<div class="tab-pane fade {{ tab_selector|default('seguimiento') in ['seguimiento'] ? 'in active' : '' }}" id="seguimiento">
<br/><br/>
<h2 style="font-family: 'Oswald', sans-serif; font-weight: 300;">Registro</h2>
<br/><br/>
<table style="width: 750px; text-align: justify; border-collapse:separate; border-spacing:1em;">
<tr>
<td>{{ form_label(form.proveedor, 'Proveedor') }}</td>
<td>
{% set label = '' %}
{% for choice in form.proveedor.vars.choices %}
{% if choice.value == form.proveedor.vars.value %}
{% set label = choice.label %}
{% endif %}
{% endfor %}
{{ label }}
</td>
</tr>
<tr>
<td>{{ form_label(form.nombre, 'Nombre contrato') }}</td>
<td>{{ form.nombre.vars.value }}</td>
</tr>
</table>
<!-- <hr/> -->
<ul>
<li><ul class="seguimientos" data-prototype="{{ form_widget(form.seguimientos.vars.prototype)|e }}">
{% for pregunta in form.seguimientos %}
<li>
{{ form_row(pregunta.titulo) }}
{# <!-- {{ form_row(pregunta.seguimientoTipo) }} --> #}
{{ form_row(pregunta.fecha_entrega) }}
{# <!-- {{ form_row(pregunta.fecha_prorroga) }} --> #}
{{ form_row(pregunta.descripcion) }}
{{ form_row(pregunta.loQueSeEspera) }}
{{ form_row(pregunta.isRecibido) }}
{{ form_row(pregunta.contactos) }}
{{ form_row(pregunta.comentarios) }}
{{ form_row(pregunta.archivo) }}
{% if pregunta.archivo.vars.value.name is defined %}
{% if pregunta.archivo.vars.value.name is not null %}
<label style="padding-bottom: 40px;">Descargar Archivo: </label> {{ pregunta.archivo.vars.value.name }}
{% else %}
<label style="padding-bottom: 40px;">Descargar Archivo: </label> Clic Aquí
{% endif %}
{% endif %}
{{ form_row(pregunta.cumplimientoNoCumplimiento) }}
</li>
{% endfor %}
</ul>
</li>
</ul>
</div>
<div class="tab-pane fade {{ tab_selector|default('garantia') in ['garantia'] ? 'in active' : '' }}" id="garantia">
<br/><br/>
<h2 style="font-family: 'Oswald', sans-serif; font-weight: 300;">Registro</h2>
<br/><br/>
<table style="width: 750px; text-align: justify; border-collapse:separate; border-spacing:1em;">
<tr>
<td>{{ form_label(form.proveedor, 'Proveedor') }}</td>
<td>
{% set label = '' %}
{% for choice in form.proveedor.vars.choices %}
{% if choice.value == form.proveedor.vars.value %}
{% set label = choice.label %}
{% endif %}
{% endfor %}
{{ label }}
</td>
</tr>
<tr>
<td>{{ form_label(form.nombre, 'Nombre contrato') }}</td>
<td>{{ form.nombre.vars.value }}</td>
</tr>
</table>
<ul>
<li><ul class="garantias" data-prototype="{{ form_widget(form.garantias.vars.prototype)|e }}">
{% set cuenta = 0 %}
{% for garantia in form.garantias %}
<li>
{{ form_row(garantia.garantiaTipo) }}
{{ form_row(garantia.fecha_emision) }}
{{ form_row(garantia.fecha_vencimiento) }}
{{ form_row(garantia.fecha_recibido_daci) }}
{{ form_row(garantia.fecha_entrega) }} {# fecha entrega al proveedor #}
{{ form_row(garantia.empresa_emite_garantia) }}
{{ form_row(garantia.tiempo_de_garantia) }}
{{ form_row(garantia.estado) }}
{{ form_row(garantia.isRecibido) }}
{{ form_row(garantia.porcentaje) }}
{{ form_row(garantia.monto) }}
{{ form_row(garantia.comentarios) }}
{{ form_row(garantia.archivo) }}
{% if garantia.archivo.vars.value.name is defined %}
{% if garantia.archivo.vars.value.name is not null %}
<label style="padding-bottom: 40px;">Descargar Archivo: </label> {{ garantia.archivo.vars.value.name }}
{% else %}
<label style="padding-bottom: 40px;">Descargar Archivo: </label> Clic Aquí
{% endif %}
{% endif %}
</li>
{% set cuenta = cuenta + 1 %}
{% endfor %}
<script>
(function($) {
$(document).ready(function(){
//alert("hola");
/*
var $second = jQuery('#contratos_garantias_0_fecha_entrega').datepicker({
dateFormat: 'yy-mm-dd'
});*/
var prefix = 'myClass';
var $inputs = $('.' + prefix);
$inputs.each(function (k, v) {
if (k % 2 === 0) {
var $second = jQuery($inputs.get(k +1)).datepicker({
dateFormat: 'yy-mm-dd'
});
var $first = jQuery(v).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (dateStr) {
var newDate = jQuery.datepicker.parseDate('yy-mm-dd', dateStr);
newDate.setDate(newDate.getDate() + 10);
$second.datepicker('setDate', newDate);
}
});
}
});
});
})(jQuery);
</script>
</ul>
</li>
</ul>
</div>
<div class="tab-pane fade {{ tab_selector|default('visita') in ['visita'] ? 'in active' : '' }}" id="visita">
<br/><br/>
<h2 style="font-family: 'Oswald', sans-serif; font-weight: 300;">Registro</h2>
<br/><br/>
<table style="width: 750px; text-align: justify; border-collapse:separate; border-spacing:1em;">
<tr>
<td>{{ form_label(form.proveedor, 'Proveedor') }}</td>
<td>
{% set label = '' %}
{% for choice in form.proveedor.vars.choices %}
{% if choice.value == form.proveedor.vars.value %}
{% set label = choice.label %}
{% endif %}
{% endfor %}
{{ label }}
</td>
</tr>
<tr>
<td>{{ form_label(form.nombre, 'Nombre contrato') }}</td>
<td>{{ form.nombre.vars.value }}</td>
</tr>
</table>
<ul>
<li><ul class="visitas" data-prototype="{{ form_widget(form.visitas.vars.prototype)|e }}">
{% for visita in form.visitas %}
<li>
{{ form_row(visita.fechaProgramada) }}
{{ form_row(visita.fechaDeVisita) }}
{{ form_row(visita.isRealizada) }}
{{ form_row(visita.observaciones) }}
{{ form_row(visita.archivoInforme) }}
{% if visita.archivoInforme.vars.value.name is defined %}
{% if visita.archivoInforme.vars.value.name is not null %}
<label style="padding-bottom: 25px;">Descargar informe: </label> {{ visita.archivoInforme.vars.value.name }}
{% else %}
<label style="padding-bottom: 25px;">Descargar informe: </label> Clic Aquí
{% endif %}
{% endif %}
{{ form_row(visita.archivoImagen) }}
{% if visita.archivoImagen.vars.value.name is defined %}
{% if visita.archivoImagen.vars.value.name is not null %}
<label style="padding-bottom: 25px;">Descargar imagen: </label> {{ visita.archivoImagen.vars.value.name }}
{% else %}
<label style="padding-bottom: 25px;">Descargar imagen: </label> Clic Aquí
{% endif %}
{% endif %}
</li>
{% endfor %}
</ul>
</li>
</ul>
</div>
</div>
{{ form_end(form) }}
{% endblock %}
Here is the generated code but I have three of them because I have many contratos_garantias_ _fecha_recibido_daci and contratos_garantias_ _fecha_entrega fields
<div>
<label style="vertical-align: top; padding-bottom: 35px;" for="contratos_garantias_0_fecha_recibido_daci" class="required">Fecha de recibido DACI</label>
<input type="date" id="contratos_garantias_0_fecha_recibido_daci" name="contratos[garantias][0][fecha_recibido_daci]" required="required" class="myClass" value="2014-12-12" /></div>
<div><label style="vertical-align: top; padding-bottom: 35px;" for="contratos_garantias_0_fecha_entrega" class="required">Fecha de devolución al proveedor</label>
<input type="date" id="contratos_garantias_0_fecha_entrega" name="contratos[garantias][0][fecha_entrega]" required="required" class="myClass" value="2014-10-15" /></div>
This is the part of the code that is working but right now the problem is the new fields added with prototype capability that are added after page has loaded
<ul>
<li><ul class="garantias" data-prototype="{{ form_widget(form.garantias.vars.prototype)|e }}">
{% set cuenta = 0 %}
{% for garantia in form.garantias %}
<li>
{{ form_row(garantia.garantiaTipo) }}
{{ form_row(garantia.fecha_emision) }}
{{ form_row(garantia.fecha_vencimiento) }}
{{ form_row(garantia.fecha_recibido_daci) }}
{{ form_row(garantia.fecha_entrega) }} {# fecha entrega al proveedor #}
{{ form_row(garantia.empresa_emite_garantia) }}
{{ form_row(garantia.tiempo_de_garantia) }}
{{ form_row(garantia.estado) }}
{{ form_row(garantia.isRecibido) }}
{{ form_row(garantia.porcentaje) }}
{{ form_row(garantia.monto) }}
{{ form_row(garantia.comentarios) }}
{{ form_row(garantia.archivo) }}
{% if garantia.archivo.vars.value.name is defined %}
{% if garantia.archivo.vars.value.name is not null %}
<label style="padding-bottom: 40px;">Descargar Archivo: </label> {{ garantia.archivo.vars.value.name }}
{% else %}
<label style="padding-bottom: 40px;">Descargar Archivo: </label> Clic Aquí
{% endif %}
{% endif %}
</li>
{% set cuenta = cuenta + 1 %}
{% endfor %}
<script>
(function($) {
$(document).ready(function(){
//alert("hola");
/*
var $second = jQuery('#contratos_garantias_0_fecha_entrega').datepicker({
dateFormat: 'yy-mm-dd'
});*/
var prefix = 'myClass';
var $inputs = $('.' + prefix);
$inputs.each(function (k, v) {
if (k % 2 === 0) {
var $second = jQuery($inputs.get(k +1)).datepicker({
dateFormat: 'yy-mm-dd'
});
var $first = jQuery(v).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (dateStr) {
var newDate = jQuery.datepicker.parseDate('yy-mm-dd', dateStr);
newDate.setDate(newDate.getDate() + 10);
$second.datepicker('setDate', newDate);
}
});
}
});
});
})(jQuery);
</script>
</ul>
The answer works like a charm with tomanow solution but I had to add this code to my related javascript file that makes prototype functionality work. With this, every use case is covered, I mean when adding and modifying an item.

var prefix = 'myClass';
var $inputs = $('.' + myClass);
$inputs.each(function (k, v) {
if (k % 2 === 0) {
var $second = $($inputs.get(k +1)).datepicker({
dateFormat: 'yy-mm-dd'
});
var $first = $(v).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (dateStr) {
var newDate = $.datepicker.parseDate('yy-mm-dd', dateStr);
newDate.setDate(newDate.getDate() + 14);
$second.datepicker('setDate', newDate);
}
});
}
});
FIDDLE