Сделать ajax функцией, чтобы избежать дублирования кода и вызвать ее при необходимости - PullRequest
0 голосов
/ 06 мая 2020

Я работаю над сайтом электронной коммерции, где пользователи могут добавлять несколько адресов доставки и выставления счетов. Поскольку место доставки будет ограничено, пользователю необходимо выбрать регион, город и область из раскрывающегося списка. Я написал HTML, который выглядит так:

<form action="{{ route('address.store') }}" method="POST">
          @csrf
            <div class="row">
                <div class="col-sm-6">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group required-field">
                                <label for="acc-name">Full Name</label>
                                <input type="text" value="{{ @$data->name }}" class="form-control" name="name" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group required-field">
                                <label for="region">Region</label>
                                <select class="form-control" name="region_id" id="region_id">
                                  <option selected disabled>Please select your region</option>
                                  @if(!empty($region_data))
                                    @foreach($region_data as $data_region)
                                        <option value="{{ $data_region->id }}" @if(@$data->region_id == $data_region->id) selected @endif>{{ $data_region->name }}</option>
                                    @endforeach
                                  @endif
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group required-field">
                                <label for="acc-name">Contact Number</label>
                                <input type="text" value="{{ @$data->phone }}" class="form-control" name="phone" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group required-field">
                                <label for="acc-name">City</label>
                                <select class="form-control" name="city" id="city" disabled>
                                  <option selected disabled>Please select your city</option>

                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6"></div>
                <div class="col-sm-6">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group required-field">
                                <label for="acc-name">Area</label>
                                <select class="form-control" name="area" id="area" disabled>
                                  <option selected disabled>Please select your area</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6"></div>
                <div class="col-sm-6">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group required-field">
                                <label for="acc-name">Address</label>
                                <input type="text" value="" class="form-control" name="address" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6"></div>
                <div class="col-sm-6">
                    <div class="row mt-1">
                        <div class="col-md-12">
                            <div class="form-group required-field">
                              <input type="hidden" name="location" value="" id="location">
                              <button type="button" value="office" class="location_title office mr-1"><span ><i class="icon-company"></i> Office</span></button>
                              <button type="button" value="home" class="location_title home ml-1"><span ><i class="icon-home"></i> Home</span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mb-2"></div><!-- margin -->

            <div class="required text-right">* Required Field</div>
            <div class="form-footer">
                <div class="form-footer-right">
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div><!-- End .form-footer -->
        </form>

И внутри моего тега script у меня есть следующее:

<script type="text/javascript">
let edit = "{{ @$data }}";
let region = '';
let city = '';
if(edit !== ''){
  region = $('#region_id').val();
  if(region != 'undefined'){
    region = $('#region_id').val();
    $.ajax({
        method: "GET",
        url:"/get-city/"+region,
        dataType: 'json',
        success: function(response) {
            $.each(response, function(key, value) {
              let selected_data = '';
              if(edit != ''){
                let city_data = "{{ @$data->region_id }}";
                if(city_data != 'undefined'){
                  selected_data = 'selected';
                }
              }
                $('#city').html('<option selected disabled>Please select your city</option>');
                $('#city').append('<option value="'+response[key]['id']+'" '+selected_data+'>'+response[key]['name']+'</option>');
                $('#city').removeAttr('disabled');
            });
            city = "{{ @$data->city }}";
            $.ajax({
                method: "GET",
                url:"/get-area/"+city,
                dataType: 'json',
                success: function(response) {
                    $.each(response, function(key, value) {
                      let selected_data = '';
                        if(edit != ''){
                          let area_data = "{{ @$data->area }}";
                          if(area_data != 'undefined'){
                            selected_data = 'selected';
                          }
                        }
                        $('#area').html('<option selected disabled>Please select your area</option>');
                        $('#area').append('<option value="'+response[key]['id']+'" '+selected_data+'>'+response[key]['name']+'</option>');
                        $('#area').removeAttr('disabled');
                    });

                  }
            });
        },
    });
  }
}

$('#region_id').on('change', function(){
    let region = $(this).val();
    $('#area').html('<option selected disabled>Please select your area</option>');
    $('#city').html('<option selected disabled>Please select your city</option>');
    $('#area').attr('disabled', true);
    $.ajax({
        method: "GET",
        url:"/get-city/"+region,
        dataType: 'json',
        success: function(response) {
            $.each(response, function(key, value) {
                $('#city').append('<option value="'+response[key]['id']+'">'+response[key]['name']+'</option>');
                $('#city').removeAttr('disabled');
            });
            $('#city').on('change', function(){
              city = $(this).val();
              $.ajax({
                  method: "GET",
                  url:"/get-area/"+city,
                  dataType: 'json',
                  success: function(response) {
                      $.each(response, function(key, value) {
                          $('#area').append('<option value="'+response[key]['id']+'">'+response[key]['name']+'</option>');
                          $('#area').removeAttr('disabled');
                      });

                    }
              });
            })
        },
    });
  })
</script>

Приведенный выше код работает, но я хочу сделать ajax функция, позволяющая избежать дублирования кода. Можно ли сделать ajax функцией и заставить код работать как для добавления, так и для редактирования части? Любое предложение будет оценено.

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