Объединить 2 функции jquery

Question

Объединить 2 функции jquery

0

Я хотел бы оптимизировать этот код ниже, но не знаю, как это сделать, на pageload, я не проверял, истинно ли или нет мое радио, и на основании этого результата я не хочу отправлять соответствующий почтовый индекс в мой запрос ajax, Но если мой почтовый индекс изменен пользователем, я не буду повторно запрашивать ajax, но не может ли это быть более "аккуратным" способом?

 $("#PostalCode").live("change", function () {
    // check if change delivery is set 
    if ($('#radio-no').attr('checked')) {
        var postalCodeId = $(this).val();
        SetWebservice(postalCodeId);
    }
});

// Get delivery point from alternative location
$("#ShipPostalCode").live("change", function () {
    // check if change delivery is set 
    if ($('#radio-yes').attr('checked')) {
        var postalCodeId = $(this).val();
        SetWebservice(postalCodeId);
    }
});

// on page load run this ...
if ($('#radio-yes').attr('checked')) {
    var postalCodeId = $("#ShipPostalCode").val();
    SetWebservice(postalCodeId);
} else {
    var postalCodeId = $("#PostalCode").val();
    SetWebservice(postalCodeId);
}



function SetWebservice(postalCodeId) {
    if ($('#Webservice_1').length) {
        $.ajax({
            type: "POST",
            url: "/functions/api/postdk/controller.aspx",
            data: "postalCodeId=" + postalCodeId,
            success: function (data) {
                $('#Webservice_1').html(data);
            }
        });
    }
    if ($('#Webservice_2').length) {
        $.ajax({
            type: "POST",
            url: "/functions/api/gls/controller.aspx",
            data: "postalCodeId=" + postalCodeId,
            success: function (data) {
                $('#Webservice_1').html(data);
            }
        });
    }

}

ClarkBirkelund 23 март 2014, в 19:35

Источник

0

так как вы говорите об оптимизации .. знаете ли вы, что live () устарела ?? api.jquery.com/live
stackunderflow 23 март 2014, в 18:03

Теги:

javascript

jquery

2 ответа

0

Цель состоит в том, чтобы один метод рассматривал поля и вызывал вызов...

http://plnkr.co/edit/msIjZhJru0QJAr4Sh6L4

Автор сценария:

$( document ).ready(function() {
  var SetWebservice=function(postalCodeId){
    var url, resultToElId;
    if ($('#Webservice_1').length) {
      url="/functions/api/postdk/controller.aspx";
      resultToElId='Webservice_1';
    }else if ($('#Webservice_2').length) {
      url="/functions/api/postdk/controller.aspx";
      resultToElId='Webservice_2';
    }
    if(resultToElId){
      console.log('SetWebservice:',postalCodeId);
      $.ajax({
        type: "POST",
        url: "/functions/api/gls/controller.aspx",
        data: "postalCodeId=" + postalCodeId,
        success: function (data) {
            $('#'+resultToElId).html(data);
          }
      });
    }else{
     console.warn('SetWebservice: No call made for postacode:',postalCodeId);
    }
  };
  var updatePostalCode = function(el){
    // determine radio value (value is the input to get postal code from)
    var fieldId = $('input[name=rdo]:checked').val();
    var postalCodeId = $('#'+fieldId).val();
    SetWebservice(postalCodeId);
  };
  // setup listeners
  $("#PostalCode").on('change',updatePostalCode);
  $("#ShipPostalCode").on('change',updatePostalCode);
  $('input[type=radio][name=rdo]').on('change',updatePostalCode);
  // init on page load
  updatePostalCode();

});

Разметка:

<div>
       PostalCode
        <input id="PostalCode" value='01234'>
     </div>
     <div>
       ShipPostalCode
        <input id="ShipPostalCode" value='98765'>
     </div>

    <div>
      radio-no:  
      <input name="rdo" type="radio" 
        id="radio-no" 
        value="PostalCode"
        checked="checked">
    </div>
    <div>
      radio-yes:  
      <input name="rdo" type="radio" 
        id="radio-yes" 
        value="ShipPostalCode">
    </div>

Remento 23 март 2014, в 17:04

Ещё вопросы

так как вы говорите об оптимизации .. знаете ли вы, что live () устарела ?? api.jquery.com/live

Niko · Accepted Answer · 2014-03-23T17-00-00.000Z

есть множество вещей, которые вы должны настроить:

live устарел → используйте вместо
не проверяйте использование "attr".is(": checked")
вы можете иметь селектор в "on", чтобы применить событие к нескольким элементам dom

вы можете создать функцию, которая выполняет "проверку" и вызывать ее из "on" и при загрузке следующим образом:

$(function(){
    var checkPostal = function() {
        if ($('#radio-yes').is(':checked')) {
            SetWebservice($("#ShipPostalCode").val());
        }
        // check if change delivery is set 
        if ($('#radio-no').is(':checked')) {
            SetWebservice($("#PostalCode").val());
        }
    }

    $(document).on("change", "#PostalCode,#ShipPostalCode", function() {
        checkPostal();
    });

    // on page load run this ...
    checkPostal();
});

Редактировать: вы должны стараться избегать прослушивания глобальных событий, если это возможно. Поэтому, если вход "#PostalCode" не "заменен", вы должны скорее использовать

$("#PostalCode,#ShipPostalCode").change(function()  ...)

Это выглядит очень красиво и аккуратно ;-) Как раз то, что я искал!