dumas_gestion/mondumas/templates/devis/devis_ligne.pt

<metal:block use-macro="main_template">
<div metal:fill-slot="content">

    <div tal:condition="message" tal:content="message" class="alert alert-danger" />
	<br />
	<form id="devis_ligne-form" class="form-horizontal" action="${url}" method="post"
		data-fv-framework="bootstrap"
		data-fv-icon-valid="glyphicon glyphicon-ok"
		data-fv-icon-invalid="glyphicon glyphicon-remove"
		data-fv-icon-validating="glyphicon glyphicon-refresh">

		<!-- *** TEXTE *** -->
		<div id="TX" tal:condition="type_ligne=='TX'">
			<div class="form-group">
				<label class="control-label col-sm-2">Type de texte</label>
				<div class="col-sm-10">
					<label class="radio-inline"><input type="radio" name="ref" value="T1" 
						tal:attributes="checked ligne.ref=='T1'">Titre</label>
					<label class="radio-inline"><input type="radio" name="ref" value="T2"
							tal:attributes="checked ligne.ref=='T2'">Sous-titre</label>
					<label class="radio-inline"><input type="radio" name="ref" value="TX"
							tal:attributes="checked ligne.ref=='TX'">Texte libre</label>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2">Texte</label>
				<div class="col-sm-10">
					 <input class="form-control" type="text" id="libelle" name="libelle"  value="${ligne.libelle}">
				 </div>
			</div> 
		</div>
		
		<!-- *** ARTICLE *** -->
		<div id="AR" tal:condition="type_ligne=='AR'">
			<div class="form-group">
				<label class="control-label col-sm-2">Référence</label>
				<div class="col-sm-10">
					 <input class="form-control" type="text" id="ref" name="ref"  value="${ligne.ref}" >
				 </div>
			</div> 
			<div class="form-group">
				<label class="control-label col-sm-2">Désignation</label>
				<div class="col-sm-10">
					<textarea class="form-control monospace-font" rows="3" cols="40" id="libelle" name="libelle">${ligne.libelle}</textarea>
				 </div>
			</div> 
			<div class="form-group">
				<label class="control-label col-sm-2">Quantité</label>
				<div class="col-sm-10">
					 <input class="form-control" type="text" id="qte" name="qte"  value="${ligne.qte}">
				 </div>
			</div> 
			<div class="form-group">
				<label class="control-label col-sm-2">Prix HT</label>
				<div class="col-sm-10">
					<div class="input-group">
					<span class="input-group-addon add-on">
						<span class="glyphicon glyphicon-euro"></span>
					</span>
					<input class="form-control" type="text" id="prixht" name="prixht"  value="${ligne.prixht}">
					</div>
				</div>
			</div> 
			<div class="form-group">
				<label class="control-label col-sm-2" for="metrage">Métrage</label>
				<div class="col-sm-10">
					<input class="form-control monospace-font" type="text" id="metrage" name="metrage" value="${ligne.metrage}">
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2" for="deduction">déduction</label>
				<div class="col-sm-10">
					<input class="form-control monospace-font" type="text" id="deduction" name="deduction" value="${ligne.deduction}">
				</div>
			</div>
		</div>
		<!-- *** SOUS-TOTAL *** -->
		<div tal:condition="type_ligne=='ST'">
			<div class="form-group">
				<label class="control-label col-sm-2">Référence</label>
				<div class="col-sm-10">
					<p class="form-control-static">${ligne.ref}</p>
				</div>
				<label class="control-label col-sm-2">Désignation</label>
				<div class="col-sm-10">
					<p class="form-control-static">${ligne.libelle}</p>
				</div>
			</div>
		</div>

		<div class="form-group">
			<label class="control-label col-sm-2">Dern. modif le</label>
			<div class="col-sm-10">
				<p class="form-control-static">${ligne.datemaj.strftime('%d-%m-%Y %H:%M')} par ${ligne.usermaj}</p>
			</div>
		</div>
		<div class="form-group"> 
			<div class="col-sm-offset-3 col-sm-9">
				<div class="form-group">					
					<button class="btn btn-primary" type="submit" name="form.submited">
						<span class="glyphicon glyphicon-ok"></span> Enregistrer</button>
					<button class="btn btn-danger" type="submit" name="form.deleted" tal:condition="nolig != '0'">
						<span class="glyphicon glyphicon-remove"></span> Supprimer</button>
					<a class="btn btn-default" href="${request.route_url('devis_web', nodevis=nodevis)}">
						<span class="glyphicon glyphicon-arrow-left"></span> Annuler</a>
				</div>
			</div>
		</div>

	 </form>
	<br />
	<br />
	<br />
	<!-- https://makitweb.com/autocomplete-data-on-multiple-fields-with-jquery-and-ajax/ -->
</div>
<div metal:fill-slot="additional_scripts">
<!--  autocomplete plugin  -->
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
    // validate the form	
    $('#devis_ligne-form').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            type_ligne: {
                validators: {
                    notEmpty: {
                        message: 'Veuillez sélectionner un type de ligne.'
                    }
                }
            },
        }
    })

    $("input[name=type_ligne]").change(function() {
        var cas = $(this).val();
        $(".type-ligne-panel").hide();
        $("#"+cas).show();
    }); 
    $('#libelle').autocomplete({
        minLength: 3,
		appendTo: "#TX",
        source: function (request, response) {
            $.ajax({
                url:'/ajax_texte',
                dataType: 'json',
                data: {
                    recherche: 'TX' + request.term,
                },
                success: function (data) {
                    response( data );
                },
            });
        },
    });
    $('#ref').autocomplete({
        minLength: 3,
		appendTo: "#AR",
        source: function (request, response) {
            $.ajax({
                url:'/ajax_texte',
                dataType: 'json',
                data: {
                    recherche: 'AR' + request.term,
                },
                success: function (data) {
                    response( data );
                },
            });
        },
		select: function(event, ui) {
			var ref = ui.item.value.split(" ")[0]; // selected ref
			
			// lecture de l'article
			$.ajax({
			 url: '/ajax_article',
			 data: {ref:ref},
			 dataType: 'json',
			 success:function(response){
				var len = response.length;
		  
				if(len > 0){
					var ref = response[0]['ref'];
					var libelle = response[0]['libelle'];
					var prixht = response[0]['prixht'];
			 
					// Set value to textboxes
					document.getElementById('ref').value = ref;
					document.getElementById('libelle').value = libelle;
					document.getElementById('prixht').value = prixht;
				}
			 }
			});
		return false;
		}
    });
});
</script>
</div> 
</metal:block>