Итак, у меня есть этот код, который я хочу запустить, когда кто-то меняет поле ввода или выбора, очевидно, он выполняется дважды, потому что, когда я изменяю значение поля ввода, поля выбора тоже изменятся. Как сделать так, чтобы этот код запускался не дважды, а для работы с обоими селекторами? Я попытался использовать оператор e.originalEvent для выполнения только при человеческих изменениях, но это не сработает, потому что у меня есть несколько стилизованных выпадающих списков, которые изменят значения выбранного ввода через код, чтобы код не запускался ..

//refresh form ajax.
jQuery('#BookingForm input, #BookingForm select').change(function(e){
    //jQuery('option:first-child', this).removeAttr('selected disabled'); //resetto il campo al change
    var dati = jQuery('#BookingForm').serialize();
    jQuery.ajax({
    type: "POST",
    url: "https://justfunviaggievento.it/wp-admin/admin-ajax.php",
    data: { action: 'booking_data_fetch', data: dati },
    success: function(data) {   
        //refresh dropdown sistemazioni
        if( !jQuery(e.target).hasClass('sistemazione')) {       
            var sistemazione = jQuery(data).find('#BookingForm select[name="sistemazione"]').html();
            jQuery('#BookingForm select[name="sistemazione"] option:not(:first-child)').remove();
            jQuery('#BookingForm select[name="sistemazione"]').append(sistemazione);    
            jQuery('select').niceSelect('update');
        }
        //refresh prezzo
        var prezzo = jQuery(data).find('#preventivo-prezzo p:first-child').html();
        jQuery('#preventivo-prezzo p:first-child').html( prezzo );
        jQuery('#preventivo-prezzo').removeClass("price-animation");
        setTimeout(function(){ jQuery('#preventivo-prezzo').addClass("price-animation") }, 100);
        //refresh supplementi
        var currentSupplemento = jQuery('#BookingForm .supplemento-monolocale').val();
        var maxSupplementi = jQuery(data).find('#BookingForm .supplemento-monolocale').html();
        jQuery('#BookingForm select.supplemento-monolocale').html( maxSupplementi ).val( currentSupplemento ).niceSelect('update');
        //refresh intestazione e immagine
        if( jQuery(e.target).hasClass('destinazione')) {
        var intestazione = jQuery(data).find('.box-preventivo h2 span').html();
        jQuery('.box-preventivo h2 span').html( intestazione );
        setTimeout(function(){ jQuery('.box-preventivo h2 span').addClass("price-animation") }, 100);
        setTimeout(function(){ jQuery('.box-preventivo h2 span').removeClass("price-animation") }, 1000);
        jQuery('.pagina-preventivo .box-preventivo:first-child').animate({ opacity: 0 }, 100, function() {
            // Animation complete.
            jQuery(this).css('background','url(/wp-content/uploads/media/justfun-viaggi-evento-preventivo-' + intestazione + '-3.jpg) no-repeat center').animate({ opacity: 1 }, 50);
        });
        }
    },
    error: function() {
        console.log('errore JS');
    }
    });
});
0
silvered.dragon 17 Июл 2020 в 20:05

3 ответа

Лучший ответ

Хорошо, я исправил это используя bind и unbind внутри и снаружи функции следующим образом:

//refresh form ajax.
function ajax(e){
    //UNBIND AFTER CHANGE
    jQuery('#BookingForm input, #BookingForm select').unbind('change');
    var dati = jQuery('#BookingForm').serialize();
    jQuery.ajax({
    type: "POST",
    url: "https://justfunviaggievento.it/wp-admin/admin-ajax.php",
    data: { action: 'booking_data_fetch', data: dati },
    success: function(data) {
        //refresh dropdown sistemazioni
        if( !jQuery(e.target).hasClass('sistemazione') && !jQuery(e.target).hasClass('numero-passeggeri') ) {       
            var sistemazione = jQuery(data).find('#BookingForm select[name="sistemazione"]').html();
            jQuery('#BookingForm select[name="sistemazione"] option').remove();
            jQuery('#BookingForm select[name="sistemazione"]').append(sistemazione);    
            jQuery('select').niceSelect('update');
        }
        //refresh supplementi
        var currentSupplemento = jQuery('#BookingForm .supplemento-monolocale').val();
        var maxSupplementi = jQuery(data).find('#BookingForm .supplemento-monolocale').html();
        jQuery('#BookingForm select.supplemento-monolocale').html( maxSupplementi ).val( currentSupplemento ).niceSelect('update');
        //refresh prezzo
        var prezzo = jQuery(data).find('#preventivo-prezzo p:first-child').html();
        jQuery('#preventivo-prezzo p:first-child').html( prezzo );
        jQuery('#preventivo-prezzo').removeClass("price-animation");
        setTimeout(function(){ jQuery('#preventivo-prezzo').addClass("price-animation") }, 100);
        //REBIND AFTER DOING STUFFS
        jQuery('#BookingForm input, #BookingForm select').bind('change', function(e){
            ajax(e);
        });
    },
    error: function() {
        console.log('errore JS');
    }
    });
}
//INITIAL BIND TO CHANGE
jQuery('#BookingForm input, #BookingForm select').bind('change', function(e){
    ajax(e);
});
0
silvered.dragon 22 Июл 2020 в 07:17
send2 = false;

//refresh form ajax.
jQuery('#BookingForm input').change(function(e){    
  sendQuery(e);
  send2 = true;
});

jQuery('#BookingForm select').change(function(e){
  if(!send2){ sendQuery(e);}  
  send2 = false;
});

function sendQuery(e){  
  //jQuery('option:first-child', this).removeAttr('selected disabled'); //resetto il campo al change
  var dati = jQuery('#BookingForm').serialize();
  jQuery.ajax({
  type: "POST",
  url: "https://justfunviaggievento.it/wp-admin/admin-ajax.php",
  data: { action: 'booking_data_fetch', data: dati },
  success: function(data) {   
      //refresh dropdown sistemazioni
      if( !jQuery(e.target).hasClass('sistemazione')) {       
          var sistemazione = jQuery(data).find('#BookingForm select[name="sistemazione"]').html();
          jQuery('#BookingForm select[name="sistemazione"] option:not(:first-child)').remove();
          jQuery('#BookingForm select[name="sistemazione"]').append(sistemazione);    
          jQuery('select').niceSelect('update');
      }
      //refresh prezzo
      var prezzo = jQuery(data).find('#preventivo-prezzo p:first-child').html();
      jQuery('#preventivo-prezzo p:first-child').html( prezzo );
      jQuery('#preventivo-prezzo').removeClass("price-animation");
      setTimeout(function(){ jQuery('#preventivo-prezzo').addClass("price-animation") }, 100);
      //refresh supplementi
      var currentSupplemento = jQuery('#BookingForm .supplemento-monolocale').val();
      var maxSupplementi = jQuery(data).find('#BookingForm .supplemento-monolocale').html();
      jQuery('#BookingForm select.supplemento-monolocale').html( maxSupplementi ).val( currentSupplemento ).niceSelect('update');
      //refresh intestazione e immagine
      if( jQuery(e.target).hasClass('destinazione')) {
      var intestazione = jQuery(data).find('.box-preventivo h2 span').html();
      jQuery('.box-preventivo h2 span').html( intestazione );
      setTimeout(function(){ jQuery('.box-preventivo h2 span').addClass("price-animation") }, 100);
      setTimeout(function(){ jQuery('.box-preventivo h2 span').removeClass("price-animation") }, 1000);
      jQuery('.pagina-preventivo .box-preventivo:first-child').animate({ opacity: 0 }, 100, function() {
          // Animation complete.
          jQuery(this).css('background','url(/wp-content/uploads/media/justfun-viaggi-evento-preventivo-' + intestazione + '-3.jpg) no-repeat center').animate({ opacity: 1 }, 50);
      });
      }
  },
  error: function() {
      console.log('errore JS');
    }
  });
}
0
Daniel Lord 17 Июл 2020 в 17:23

Что вам нужно сделать, это поддерживать некоторое состояние, когда запрос находится в процессе. Убедитесь, что этот контекст специфичен - поэтому, если вы хотите ограничить только несколько запросов для конкретного варианта использования, назовите и управляйте этим состоянием соответствующим образом. Это означает, что вам потребуется несколько переменных состояния (например, requestInProgress) для разных полей формы и страниц вашего приложения; это не должно быть глобальным ограничителем запросов

var requestInProgress = false;

function sendRequest() {
  if (requestInProgress) return; // no action
  
  // otherwise, run request logic
  requestInProgress = true;
  // ... your code

  jQuery.ajax({
    // make sure to set the boolean to false in both the 
    // success and error cases

    success: function(data) {
      requestInProgress = false;
      // ... your code
    },
    error: function(data) {
      requestInProgress = false;
      // ... your code
    },
  });
}
0
duxfox-- 17 Июл 2020 в 17:30