Developer Corner

Ajax request

The jQuery ajax() method is used for the request. The script is part of the List.html template.

The result is loaded inside the div element #ajaxCallResult with a fade effect. After the website has fully loaded, the change event is triggered to load the content of the first select option.

Again, you can modify this to fit your needs. If you don’t want to rely on jQuery, you can achieve the same with vanilla JavaScript (XMLHttpRequest()).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 jQuery(document).ready(function ($) {
     var form = $('#ajaxselectlist-form');
     var selectForm = $('.ajaxFormOption');
     var resultContainer = $('#ajaxCallResult');
     var service = {
         ajaxCall: function (data) {
             $.ajax({
                 url: 'index.php',
                 cache: false,
                 data: data.serialize(),
                 success: function (result) {
                     resultContainer.html(result).fadeIn('fast');
                 },
                 error: function (jqXHR, textStatus, errorThrow) {
                     resultContainer.html('Ajax request - ' + textStatus + ': ' + errorThrow).fadeIn('fast');
                 }
             });
         }
     };
     form.submit(function (ev) {
         ev.preventDefault();
         service.ajaxCall($(this));
     });
     selectForm.on('change', function () {
         resultContainer.fadeOut('fast');
         form.submit();
     });
     selectForm.trigger('change');
 });