it-swarm.com.ru

Сбор нескольких данных и отправка по Ajax в Laravel

Я использую ajax для отправки своих данных в контроллер и сохранения их в базе данных, прежде чем мой код заработал, мне нужно было отсортировать данные, когда они добавляются в blade-сервер, после сортировки они перестают работать на% 50.

Хорошо знать

Вот мой старый код и решение для сортировки моих данных (что вызвало Эту проблему, которая у меня сейчас)

Логика

  1. Я выбираю набор
  2. Набор дочерних элементов будет добавлен в блейд (отсортировано по пользовательскому столбцу)
  3. Я выбираю один или несколько вариантов и нажимаю кнопку Сохранить
  4. Данные сохраняются в базе данных

Больше знать

Мои добавленные данные (основанные на выбранном наборе) включают 2 типа данных

  1. Пользовательские вводы (текстовое поле и текстовое поле), которые я могу заполнить и сохранить вручную (все еще работает без проблем)
  2. Опция динамического выбора, которая возвращается из базы данных, и я могу выбрать и сохранить их идентификаторы (это динамика проблемы)

Код

Script of appending data

<script defer>
$(document).ready(function() {
    $('select[name="selectset"]').on('change', function() {
        var id = $(this).val();
        if(id) {
            $.ajax({
                url: '{{ url('admin/selectset') }}/'+encodeURI(id),
                type: "GET",
                dataType: "json",
                success:function(result) {
                    $('div#dataaamsg').empty();
                    $('div#dataaamsg').append('Use <kbd>CTRL</kbd> or <kbd>SHIFT</kbd> button to select multiple options');
                    result.sort(function(a,b) {
                        return (a.position > b.position) ? 1 : ((b.position > a.position) ? -1 : 0);
                    });

                    $.each(result, function(key1, value1) {

                        var vvvid = value1.id;

                        if(value1['type'] == 'textfield'){
                            var my_row = $('<div class="row mt-20 ccin">');
                            $('div#dataaa').append(my_row);
                        }else if(value1['type'] == 'textareafield'){
                            var my_row = $('<div class="row mt-20 ccin">');
                            $('div#dataaa').append(my_row);
                        }else{
                            var my_row = $('<div class="row mt-20">');
                            $('div#dataaa').append(my_row);
                        }

                        // second data
                        $.ajax({
                            url: '{{ url('admin/findsubspecification') }}/'+value1['id'],
                            type: "GET",
                            dataType: "json",
                            success:function(data) {
                                // Check result isnt empty
                                var helpers = '';
                                $.each(data, function(key, value) {
                                    helpers += '<option value="'+value.id+'">'+value.title+'</option>';
                                });

                                if(value1['type'] == 'textfield'){
                                    var my_html = '{{ Form::open() }}<input name="product_id" id="product_id" type="hidden" value="{{$product->id}}"><input name="specification_id" id="specification_id" type="hidden" value="'+vvvid+'"><div class="col-md-4">'+value1.title+'</div>';
                                    my_html += '<div class="col-md-6"><input id="text_dec" name="text_dec[]" placeholder="text field" class="text_dec form-control"></div>';
                                    my_html += '<div class="col-md-2"><button type="button" id="custmodalsavee" class="custmodalsavee btn btn-xs btn-success">Save</button>{{Form::close()}}</div>';
                                    my_row.html(my_html);
                                }else if(value1['type'] == 'textareafield'){
                                    var my_html = '{{ Form::open() }}<input name="product_id" id="product_id" type="hidden" value="{{$product->id}}"><input name="specification_id" id="specification_id" type="hidden" value="'+vvvid+'"><div class="col-md-4">'+value1.title+'</div>';
                                    my_html += '<div class="col-md-6"><textarea id="longtext_dec" name="longtext_dec[]" placeholder="text area field" class="longtext_dec form-control"></textarea></div>';
                                    my_html += '<div class="col-md-2"><button type="button" id="custmodalsavee" class="custmodalsavee btn btn-xs btn-success">Save</button>{{Form::close()}}</div>';
                                    my_row.html(my_html);
                                }else{
                                    var my_html = '{{ Form::open() }}<input name="product_id" id="product_id" type="hidden" value="{{$product->id}}"><div class="col-md-4">'+value1.title+'</div>';
                                    my_html += '<div class="col-md-6"><select class="subspecifications form-control tagsselector" id="subspecifications" name="subspecifications[]" multiple="multiple">'+helpers+'</select></div>';
                                    my_html += '<div class="col-md-2"><button type="button" id="savedynspecto" class="savedynspecto btn btn-xs btn-success">Save</button>{{Form::close()}}</div>';
                                    my_row.html(my_html);
                                }


                            }
                        });
                        // second data

                    });
                }
            });
        }else{
            $('div#dataaa').empty();
        }
    });
});
</script>

script of saving data (issue part)

<script defer>
  $(document).ready(function() {
   $("body").on("click", ".savedynspecto", function(e){
      var form = $(this).closest('form');
      var id = form.find('input[name="product_id"]').val();
      // e.preventDefault();
      $.ajax({
        type: "post",
        url: '{{ url('admin/spacssendto') }}',
        data: {
          '_token': $('input[name=_token]').val(),
          'product_id': id,
          'subspecifications': $(this).closest('form').find('select.subspecifications').val()
        },
        success: function (data) {
          alert('Specifications added successfully.');
          console.log($(this));
        },
        error: function (data) {
          console.log(data);
        }
      });
    });
  });
</script>

Вопрос

  1. Когда я пытаюсь сохранить свои динамические значения, я не могу получить идентификатор выбранной опции/опций

    // возвращаем данные в параметрах сети _ токен g1GnKZvzXDztR1lqgDdjI5QOg67SfmmBhjm80fKu product_id 18

Ps1

Я пытался изменить val() на serialize(), и я получил

_token g1GnKZvzXDztR1lqgDdjI5QOg67SfmmBhjm80fKu
product_id 18
subspecifications subspecifications%5B%5D=20&subspecifications%5B%5D=21&subspecifications%5B%5D=23&subspecifications%5B%5D=32"

Все, что мне было нужно, это 21,23,32 вместо этого я получил subspecifications%5B%5D= перед каждым из них.

Ps2

Я попытался изменить функцию $("body").on("click", ".savedynspecto", function(e){, которая не будет отправлять какие-либо данные на сервер (в сети ничего не печатается, даже коды ошибок)

Любая идея?

9
mafortis

После кнопки ... в строке для добавления, у вас есть {{Form::close()}}</div>.

Я думаю, что </div> должен предшествовать {{Form::close()}}.

Запутанная структура HTML может быстро привести к странностям.
Я не уверен на 100%, что это проблема ... Но это возможно.

2
Louys Patrice Bessette

Привет, измени эту строку в своем коде

'subspecifications': $ (Это) .closest ( 'форма'). Найти ( 'select.subspecifications'). Вал ()

в

'subspecifications': $ (this) .closest ('form'). find ('select.subspecifications option: selected'). map (function () {return this.value}). get ()

Это должно помочь

2
Andrey Svyrydov

У вас есть МНОГИЕ select с классом subspecifications... Таким образом, вы должны просмотреть их, чтобы получить их значения.

<script defer>
  $(document).ready(function() {
   $("body").on("click", ".savedynspecto", function(e){
      var form = $(this).closest('form');
      var id = form.find('input[name="product_id"]').val();

      // An array to store the subspecifications values.
      var spec_array = [];

      // A loop to go through all them.
      form.find('select.subspecifications').each(function(){
        spec_array.Push($(this).val());
      });

      // e.preventDefault();
      $.ajax({
        type: "post",
        url: '{{ url('admin/spacssendto') }}',
        data: {
          '_token': $('input[name=_token]').val(),
          'product_id': id,
          'subspecifications': spec_array  // The array containing each SELECT values
        },
        success: function (data) {
          alert('Specifications added successfully.');
          console.log($(this));
        },
        error: function (data) {
          console.log(data);
        }
      });
    });
  });
</script>
0
Louys Patrice Bessette