множественный запрос AJAX в одном ответе с начальной загрузкой - PullRequest
0 голосов
/ 25 сентября 2019

У меня проблема с вызовом URL-адреса с несколькими запросами в ajax по одному и тому же URL-адресу и получению одного и того же ответа.У меня есть bootstrap-select, и я хочу вызвать n-адрес запроса в ajax, когда пользователь нажимает один, два или десять выбранных вариантов. У вас есть идея?

$(document).ready(function () {
  initmyDataTabl1List();
  changemyDataTabl1();
  changemyDataTabl2();
})

function initmyDataTabl1List() {
  $('#callmyDataTabl1').click(function () {
    $.getJSON(MYURL + 'myController/myActionDataTabl1', function () {

    }).done(function (data) {
      if (data !== null && data.length > 0) {
        $('#myDataTabl1').empty();
        $.each(data, function (i, theItem) {
          var libelle = theItem.myDataTabl1_libelle
          var idItem = theItem.myDataTabl1_id
          var combomyDataTabl1 = document.getElementById('myDataTabl1')
          var optionmyDataTabl1 = document.createElement('option')
          optionmyDataTabl1.text = libelle
          optionmyDataTabl1.value = idItem
          try {
            combomyDataTabl1.add(optionmyDataTabl1, null)

          } catch (error) {
            alert('error found')
            combomyDataTabl1.add(optionmyDataTabl1)
          }
        })
        $('.selectpicker').selectpicker('refresh');
      }
    })

  })
}

function changemyDataTabl1() {
  $('#myDataTabl1').on('changed.bs.select', function (e, clickedIndex, newSelect) {
    var idDiv = '#' + $(this).attr('id');
    var valDiv = $('#myDataTabl1').val();
    var arrayIdmyDataTabl1 = new Array(valDiv.length)
    if (newSelect) {
      for (var i = 0; i < valDiv.length; i++) {
        arrayIdmyDataTabl1[i] = MYURL + 'controller/myaction/' + valDiv[i]
      }
      loadmyDataTabl2BaseOnmyDataTabl1(arrayIdmyDataTabl1)
    } else {
      $(idDiv).selectpicker('refresh');
      for (var i = 0; i < valDiv.length; i++) {
        arrayIdmyDataTabl1[i] = MYURL + 'controller/myaction/' + valDiv[i]
      }
      loadmyDataTabl2BaseOnmyDataTabl1(arrayIdmyDataTabl1)
    }
  });
}


function getFullName(item) {
  var fullname = $.ajax({
    type: 'GET',
    contentType: 'application/json,charset=utf-8',
    dataType: 'json',
    url: item,
    async: true,
    success: function (result) { }
  })
  return fullname
}

function loadmyDataTabl2BaseOnmyDataTabl1(array) {
  var resultToSend = array.map(getFullName)

  switch (resultToSend.length) {
    case 1:
      $.when(resultToSend[0]).done(function (rep1) {
        var data = rep1[0]
        var optLength = $('#myDataTabl2 option').length;
        if (optLength > 0) {
          $('#myDataTabl2 option').remove();
        }
        $.each(rep1, function (key, value) {
          $('#myDataTabl2').append(
            $('<option></option>')
              .val(value.myId)
              .html(value.myName)
          )
        })
        $('.selectpicker').selectpicker('refresh');
      })
      break
    case 2:
      $.when(resultToSend[0], resultToSend[1]).done(function (rep1, rep2) {
        var data = rep1[0] + rep2[0]
        var optLength = $('#myDataTabl2 option').length;
        if (optLength > 0) {
          $('#myDataTabl2 option').remove();
        } if (rep1[0].length > 0) {
          $.each(rep1[0], function (key, value) {
            // $.each(value, function (key1, value1) {
            $('#myDataTabl2').append(
              $('<option></option>')
                .val(value.myId)
                .html(value.myName)
            )
            //  });

          })
        }
        if (rep2[0].length > 0) {
          $.each(rep2[0], function (key, value) {
            //$.each(value, function (key1, value1) {
            $('#myDataTabl2').append(
              $('<option></option>')
                .val(value.myId)
                .html(value.myName)
            )
            //});
          })
        }
        $('.selectpicker').selectpicker('refresh')
      })
      break
    case 3:
      $.when(resultToSend[0], resultToSend[1], resultToSend[2]).done(function (
        rep1,
        rep2,
        rep3
      ) {
        var optLength = $('#myDataTabl2 option').length;
        if (optLength > 0) {
          $('#myDataTabl2 option').remove();
        }
        $.each(rep1[0], function (key, value) {
          $('#myDataTabl2').append(
            $('<option></option>')
              .val(value.myId)
              .html(value.myName)
          )
        })
        $.each(rep2[0], function (key, value) {
          $('#myDataTabl2').append(
            $('<option></option>')
              .val(value.myId)
              .html(value.myName)
          )
        })
        $.each(rep3[0], function (key, value) {
          $('#myDataTabl2').append(
            $('<option></option>')
              .val(value.myId)
              .html(value.myName)
          )
        })
        $('.selectpicker').selectpicker('refresh')
      })
      break
    case 4:
      $.when(
        resultToSend[0],
        resultToSend[1],
        resultToSend[2],
        resultToSend[3]
      ).done(function (rep1, rep2, rep3, rep4) {
        var data = rep1[0] + rep2[0] + rep3[0] + rep4[0]
        $.each(rep1[0], function (key, value) {
          $('#myDataTabl2').append(
            $('<option></option>')
              .val(value.myId)
              .html(value.myName)
          )
        })
        $.each(rep2[0], function (key, value) {
          $('#myDataTabl2').append(
            $('<option></option>')
              .val(value.myId)
              .html(value.myName)
          )
        })
        $.each(rep3[0], function (key, value) {
          $('#myDataTabl2').append(
            $('<option></option>')
              .val(value.myId)
              .html(value.myName)
          )
        })
        $.each(rep4[0], function (key, value) {
          $('#myDataTabl2').append(
            $('<option></option>')
              .val(value.myId)
              .html(value.myName)
          )
        })
        $('.selectpicker').selectpicker('refresh')
      })
      break
    default:
      console.log('You must select four choices : ')
      break
  }
}
<select id="myDataTabl1" name="myDataTabl1" class="form-control selectpicker"
                                            multiple data-live-search="true">
</select>

<select id="myDataTabl2" name="myDataTabl2" class="form-control selectpicker"
                                            multiple data-live-search="true">
</select>

<select id="myDataTabl3" name="myDataTabl3" class="form-control selectpicker"
                                            multiple data-live-search="true">
 </select>

Проблема в том, как я могу агрегировать этот вызов, потому что, если пользователь выберет десять, мне будет очень трудно это сделать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...