<div id="kampagner">
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<span><?php the_field('tagline_forside_kampagner'); ?></span>
				<h2><?php the_field('overskrift_forside_kampagner'); ?></h2>
			</div>
			<div class="col-md-6 right">
				<div class="select-wrp">
					<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
					  <select class="dataOutput" name="date">
					    <option value="DESC">Sortér efter nyeste</option>
					    <option value="ASC">Sortér efter ældste</option>
					  </select>
					  <div class="notify"></div>
					  <input type="hidden" name="action" value="datFilter">
					</form>
				</div>
			</div>
			<div class="post-wrp">

			</div>
		</div>
	</div>
	<script>

	  jQuery(function($){
	    var filter = $('#filter');
			$.ajax({
				url:filter.attr('action'),
				data:filter.serialize(), // Form data
				type:filter.attr('method'), // POST
				success:function(data){
					owl = $("#kampagner .post-wrp");
					filter.find('.notify').empty(); // Alert tom
					owl.html(data); // Vælg hvor data skal insættes
					owl.trigger('destroy.owl.carousel');
					owl.owlCarousel({
						loop: true,
						nav: false,
						dots: false,
						items: 3
					}).owlCarousel('refresh');
				}
			});
	  	$('.dataOutput').on('change', function() {
	  		$.ajax({
	  			url:filter.attr('action'),
	  			data:filter.serialize(), // Form data
	  			type:filter.attr('method'), // POST
	  			success:function(data){
						owl = $("#kampagner .post-wrp");
	  				filter.find('.notify').empty(); // Alert tom
	  				owl.html(data); // Vælg hvor data skal insættes
						owl.trigger('destroy.owl.carousel');
						owl.owlCarousel({
							loop: true,
							nav: false,
							dots: false,
							items: 3
						}).owlCarousel('refresh');
	  			}
	  		});
	  		return false;
	  	});
	  });

	</script>
</div>