jb-data.de/template/tpl/v_urlaub.tpl

<div id="spinner-div" class="pt-5">
    <div class="spinner-border text-primary" role="status">
		<i class="fas fa-spinner fa-pulse fa-10x"></i>
		<p>Loading...</p>
    </div>
</div>
<section class="col-md-12">
	<div class="row sortable">
		<div class="col-md-4">
			<div class="mwahl">
				<select style="width:100%;font-size:16pt;background-color:#115270;border-color:#115270" name="mitarbeiter" id="maID"  onChange="ma_wahl({$jahr})">
					{foreach from=$malist item=mlist}
						<option value="{$mlist.id}">{$mlist.name}</option> 
					{/foreach}
				</select>
			</div>         
		</div>                 
		<!-- summe	--> 
		<div class="col-md-6">
			<div class="mwahl" id="urlaub" align="center" style="font-size:12pt">
				<p>Bitte Mitarbeiter auswählen.</p> 
			</div>         
		</div>      
			<!-- Jahresauswahl	-->       
		<div class="col-md-2">
			<div class="mwahl" align="center">
				<div class="btn-group">
					<a class="btn btn-primary btn-sm" href="?s=kalender&wahl=3&jahr={$jahr}&kw={$kw}" aria-label="Skip to main navigation">
					<i class="fa fa-arrow-left" aria-hidden="true"></i>
					</a>
					<button type="button" class="btn btn-sm" style="font-size:12pt;background-color:#115270">{$jahr}</button>
					</a>
					<a class="btn btn-primary btn-sm" href="?s=kalender&wahl=4&jahr={$jahr}&kw={$kw}" aria-label="Skip to main navigation">
					<i class="fa fa-arrow-right" aria-hidden="true"></i>
					</a>                        
				</div>
			</div> 
		</div> 
	</div>  






</section>    
   
   
     
           
        
   
{if $mid==0}   
    <!-- MA auswahl -->
<section class="col-md-12">
	<div class="row sortable" id="kaledit">
		<p align="center" style="font-size:200pt;background-color:#333333;color:#115270">
			<i class="fa fa-edit" aria-hidden="true"></i>
		</p>
	</div>           
</section>    
{/if}       
        
    

	
<!------------------------------------------------>        
<script> var jahr = '{$jahr}';</script>
<script> var mitarbeiter = '{$madata.mid}';</script>
{literal}
<style>
ul.nav-tabs > li {
  width: 33%;
  text-align: center; 
}
</style> 
<script>
	function ma_wahl(jahr) {
		$('#spinner-div').show();
		var mdata = $("#maID").val();
		$.ajax({
			type: 'POST',
			url: "ajax.php?s=kal_urlaub&tpl",
			dataType: 'html',
			data: 'jahr=' + jahr + "&maID=" + mdata,
			success: function (data) {
				console.log(data)
				$("#kaledit").html(data); 
				$('#spinner-div').hide();
			}
		}); 			
	}
	function kaledit2(time,maID,gID) {
		
		
		var remember = document.getElementById('info_'+time);
		if (remember.checked){
			var istC = 1;
		}else{
			var istC = 0;
		}
		
		$.ajax({
			
			type: 'POST',
			url: "ajax.php?s=kal_save&a=date_save",
			dataType: 'json',
			data: 'time=' + time + "&maID="+maID+"&istC="+istC+"&gID="+gID,
			beforeSend:function() {
                $('.loader').show();
            },
			success: function (data) {
				if(data.success == true) {
					$.notify({
						icon: 'glyphicon glyphicon-warning-ok',
						message: data.lastnote
					},{
						type: 'info',
						showProgressbar: true,
						delay: 300,
						newest_on_top: false,
						element: 'body',
						placement: {
							from: "bottom",
							align: "right"
						},
						animate: {
							enter: 'animated fadeInDown',
							exit: 'animated fadeOutUp'
						}						
					});	
				}
				console.log(data)
			}
		});load_free_urlaub(mitarbeiter,jahr)
	}
	load_free_urlaub(mitarbeiter,jahr);


$(document).ready(function () {
    $("#do-call").click(function () {//The load button
        $('#spinner-div').show();//Load button clicked show spinner
        $.ajax({
            url: "https://jb-data.de/",
            type: 'GET',
            dataType: 'json',
            success: function (res) {
               //On success do something....
            },
            complete: function () {
                $('#spinner-div').hide();//Request is complete so hide spinner
            }
        });
    });
});	
</script>
 
<style>
.loader{
display: none;
}	
.mwahl {
	align-content: center;
	background: #115270;
	color: #aaaaaa;
	padding: 5px;
	border: 1px solid;
	border-radius:6px;
	margin-left: 0px;
	margin-top: -10px;
	margin-bottom: 10px;
	height: 45px;
}		
.malist {
	background: #115270;
	color: #808080;
	padding: 5px;
	border: 1px solid;
	border-radius:6px;
	margin-top: -12px;
	margin-bottom: 60px;
}		
</style>	
{/literal}