jquery Ajax

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<div class="container">

  <button onclick="__ecms_ajax('1','Files','Filter')">Ajax Test</button>

  <div class="success"></div>
  <div class="fail"></div>

</div>

CSS

html,
body {
  color: #454545;
}

.container {
  margin-top: 5%;
  padding: 5%;
  background: #F9F9F9;
  border: 1px solid #CCCCCC;
}

button,.button {
  background: #EEEEEE;
}

JavaScript

function __ecms_ajax(dataString, ActiveModule, Category) {

  var dataString = '# Content';
  /* var url = '/ajax/Files/Filter'; */
  var url = '/ajax/' + ActiveModule + '/' + Category;
  /* /ajax/Files/Filter */
  console.log(url);
  $.ajax({
    type: 'POST',
    data: dataString,
    url: url,
    headers: {
      'X-EuroCMS-Ajax': dataString
    },

    success: function(result) {
      $(".success").html(result);
    },
    error: function(result) {
      var error_message = result.statusText + ': ' + result.status;
      console.log(error_message);
      $(".fail").text(error_message);

    },
  });

}