Use axios for all ajax requests

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/AjaxContent.vue

@@ -8,6 +8,7 @@
 </template>
 <script>
     import $ from 'jquery'
+    import axios from 'axios'
     import EventBus from '../_bus'
     const $window = $(window);
 
@@ -22,11 +23,16 @@
         props: [ 'uri', 'loaderUri' ],
         methods: {
             loadContent () {
-                $.get(this.uri, (html) => {
+                axios({
+                    url: this.uri,
+                    responseType: 'text'
+                }).then((response) => {
                     this.loading = false;
-                    this.html = html;
+                    this.html = response.data;
                     $(this.$refs.trigger).remove();
                     EventBus.$emit('ajaxContentLoaded');
+                }).catch(() => {
+                    this.loading = false;
                 });
             },
             isInViewport ($triggerElement) {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue

@@ -25,7 +25,7 @@
 </template>
 <script>
     import Vue from 'vue'
-    import $ from 'jquery'
+    import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
 
@@ -85,8 +85,14 @@
                 query[this.argumentPrefix + '[months]'] = this.months;
                 this.loading = true;
                 this.showPrev = this.startDate.isAfter(dayjs());
-                $.get(this.uri, query, (html) => {
+                axios({
-                    this.calendarHtml = html;
+                    url: this.uri,
+                    responseType: 'text',
+                    params: query
+                }).then((response) => {
+                    this.calendarHtml = response.data;
+                    this.loading = false;
+                }).catch(() => {
                     this.loading = false;
                 });
             },

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/DestinationAutocomplete.vue

@@ -26,6 +26,7 @@
 
 <script>
     import $ from 'jquery'
+    import axios from 'axios'
 
     export default {
         props: {
@@ -74,14 +75,20 @@
                 let query = {};
                 query[this.argumentPrefix + '[filterSettings]'] = this.filterSettings;
                 query[this.argumentPrefix + '[search]'] = this.destination;
-                $.post(this.ajaxUri, query, (json) => {
+                axios({
-                    this.autocompleteOptions = json;
+                    url: this.ajaxUri,
+                    method: 'post',
+                    data: $.param(query)
+                }).then((response) => {
+                    this.autocompleteOptions = response.data;
                     this.showAutocompleteOptions = this.hasOptions();
                     if (this.showAutocompleteOptions) {
                         this.openDropdown();
                     }
                     this.loading = false;
-                }, 'json');
+                }).catch(() => {
+                    this.loading = false;
+                });
             },
             toggleOptions () {
                 if (!this.hasOptions()) {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchBar.vue

@@ -1,5 +1,5 @@
 <script>
-    import $ from 'jquery'
+    import axios from 'axios'
     import DaterangeSelect from './DaterangeSelect.vue'
     import DestinationSelect from './DestinationSelect.vue'
     import PaxSelect from './PaxSelect.vue'
@@ -25,9 +25,13 @@
             loadOptions () {
                 const query = {};
                 query[this.argumentPrefix + '[searchParams]'] = this.searchParams;
-                $.post(this.optionsUri, query, (json) => {
+                axios({
-                    this.applyOptions(json);
+                    url: this.optionsUri,
-                }, 'json');
+                    method: 'post',
+                    data: $.param(query)
+                }).then((response) => {
+                    this.applyOptions(response.data);
+                });
             },
             applyOptions (json) {
                 this.filterOptions.totalResults = json.totalResults;
@@ -65,9 +69,12 @@
                 this.loadOptions();
             },
             resetDestination () {
-                $.post(this.resetUri, (json) => {
+                axios({
-                    this.searchParams = json.searchParams;
+                    url: this.resetUri,
-                    this.applyOptions(json);
+                    method: 'post'
+                }).then((response) => {
+                    this.applyOptions(response.data);
+                    this.searchParams = response.data.searchParams;
                 });
             }
         }

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchBox.vue

@@ -1,5 +1,6 @@
 <script>
     import $ from 'jquery'
+    import axios from 'axios'
     import DestinationSelect from './DestinationSelect.vue'
     import PriceRangeSelect from './PriceRangeSelect.vue'
 
@@ -19,9 +20,13 @@
             loadOptions () {
                 const query = {};
                 query[this.argumentPrefix + '[searchParams]'] = this.searchParams;
-                $.post(this.optionsUri, query, (json) => {
+                axios({
-                    this.applyOptions(json);
+                    url: this.optionsUri,
-                }, 'json');
+                    method: 'post',
+                    data: $.param(query)
+                }).then((response) => {
+                    this.applyOptions(response.data);
+                });
             },
             applyOptions (json) {
                 this.filterOptions.totalResults = json.totalResults;
@@ -52,9 +57,12 @@
                 this.loadOptions();
             },
             resetDestination () {
-                $.post(this.resetUri, (json) => {
+                axios({
-                    this.searchParams = json.searchParams;
+                    url: this.resetUri,
-                    this.applyOptions(json);
+                    method: 'post'
+                }).then((response) => {
+                    this.applyOptions(response.data);
+                    this.searchParams = response.data.searchParams;
                 });
             }
         }

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResult.vue

@@ -1,6 +1,7 @@
 <script>
     import Vue from 'vue';
     import $ from 'jquery'
+    import axios from 'axios'
     import EventBus from '../_bus'
     import DaterangeSelect from './DaterangeSelect.vue'
     import DestinationCheckboxes from './DestinationCheckboxes.vue'
@@ -128,12 +129,18 @@
                 query[this.argumentPrefix + '[filterSettings]'] = this.filterSettings;
                 this.loading = true;
                 this.resultMeta = null;
-                $.post(this.resultsUri, query, (json) => {
+                axios({
-                    this.resultData = json.data;
+                    url: this.resultsUri,
-                    this.filterOptions = json.filterOptions;
+                    method: 'post',
-                    this.resultMeta = json.meta;
+                    data: $.param(query)
+                }).then((response) => {
+                    this.resultData = response.data.data;
+                    this.filterOptions = response.data.filterOptions;
+                    this.resultMeta = response.data.meta;
                     this.loading = false;
                     EventBus.$emit('ajaxContentLoaded');
+                }).catch(() => {
+                    this.loading = false;
                 });
             },
             resetFilterSettings () {

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue

@@ -23,6 +23,7 @@
 
 <script>
     import Vue from 'vue'
+    import axios from 'axios'
     import EventBus from '../_bus'
     import SearchResultItem from './SearchResultItem.vue'
 
@@ -71,11 +72,19 @@
                 let query = {};
                 query['tx_epproducts_ajax[watchlistUids]'] = this.watchlist;
                 this.loading = true;
-                $.post(this.watchlistUri, query, (json) => {
+                axios({
-                    this.teasers = json.data;
+                    url: this.watchlistUri,
-                    this.total = json.total;
+                    headers: {
+                        'Accept': 'application/json'
+                    },
+                    params: query
+                }).then((response) => {
+                    this.teasers = response.data.data;
+                    this.total = response.data.total;
                     this.loading = false;
                     EventBus.$emit('ajaxContentLoaded');
+                }).catch(() => {
+                    this.loading = false;
                 });
             }
         },