Объединение оператора переключения javascript для функции ajax, не работающей должным образом - PullRequest
0 голосов
/ 08 мая 2020

У меня есть форма с разделами для добавления данных в мою базу данных через модальное окно, а затем динамического добавления данных в соответствующие элементы выбора в форме через ajax. Он отлично работает с первым модальным окном, но не с другими.

Я знаю, почему это происходит. Это потому, что написанный мной js использует оператор switch для получения значения скрытого ввода, но скрытый ввод не имеет уникального атрибута имени. Что я пытаюсь выполнить sh, так это объединить код вызова ajax в одну функцию, но то, как я это выполняю, явно не сработает.

Есть способ лучше сделать это? Должен ли я вместо этого иметь 5 разных ajax звонков?

Пример модального окна html с формой (их 5, каждый разный, например, поставщик, производитель, модель и т. Д. c):

<!-- Add New Supplier Modal -->
<div class="modal fade" id="supplierModal" tabindex="-1" role="dialog" aria-labelledby="supplierModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="supplierModalLabel">Add new asset supplier</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            <form method="post" class="modal-submit" autocomplete="off" action="{{ action('AddAssetController@addDescriptor', ['type' => 'supplier']) }}">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <input type="hidden" name="type" value="supplier">
                <div class="form-row">
                    <div class="col-md-12 mb-3">
                        <label for="inputModelNew">Supplier name *</label>
                        <div class="input-group">
                            <input type="text" name="inputSupplierNew" id="inputSupplierNew" class="form-control" placeholder="Enter supplier name" required="required">
                        </div>
                        <div class="backend-error"></div>
                    </div>
                </div>
                <div class="float-right">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
            </div>
        </div>
    </div>
</div>
<!-- / Add New Supplier Modal -->

<!-- Add New Manufacturer Modal -->
<div class="modal fade" id="manufacturerModal" tabindex="-1" role="dialog" aria-labelledby="manufacturerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="manufacturerModalLabel">Add new asset manufacturer</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            <form method="post" class="modal-submit" autocomplete="off" action="{{ action('AddAssetController@addDescriptor', ['type' => 'manufacturer']) }}">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <input type="hidden" name="type" value="manufacturer">
                <div class="form-row">
                    <div class="col-md-12 mb-3">
                        <label for="inputManufacturerNew">Manufacturer name *</label>
                        <div class="input-group">
                            <input type="text" name="inputManufacturerNew" id="inputManufacturerNew" class="form-control" placeholder="Enter manufacturer name" required="required" data-error="Enter a manufacturer name">
                        </div>
                        <div class="backend-error"></div>
                    </div>
                </div>
                <div class="float-right">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
            </div>
        </div>
    </div>
</div>
<!-- / Add New Manufacturer Modal -->

My ajax функция:

$(document).ready(function ()
{
    $('.modal-submit').on('submit', function(e){
        e.preventDefault(); //prevent default form submit action

        $(".backend-error").html(''); //clear out previous error messages
        $('input').removeClass('input-error'); //clear error border class

        var data = $(this).serialize();
        var type = $('input[name="type"]').val();

        switch(type){
            case "supplier":
                var url = '{{ action('AddAssetController@addDescriptor', ['type' => 'supplier']) }}';
                var modalName = '#supplierModal';
                var modalInput = '#inputSupplierNew';
                break;
            case "manufacturer":
                var url = '{{ action('AddAssetController@addDescriptor', ['type' => 'manufacturer']) }}';
                var modalName = '#manufacturerModal';
                var modalInput = '#inputManufacturerNew';
                break;
            case "model":
                var url = '{{ action('AddAssetController@addDescriptor', ['type' => 'model']) }}';
                var modalName = '#modelModal';
                var modalInput = '#inputModelNew';
                break;
            case "status":
                var url = '{{ action('AddAssetController@addDescriptor', ['type' => 'status']) }}';
                var modalName = '#statusModal';
                var modalInput = '#inputStatusNew';
                break;
            case "category":
                var url = '{{ action('AddAssetController@addDescriptor', ['type' => 'category']) }}';
                var modalName = '#categoryModal';
                var modalInput = '#inputCategoryNew';
                break;
        }

        $.ajax({
           url:url,
           method:'POST',
           data:data,
           success:function(response){
                refreshData(newId = response.id); // set newId to the id of the newly inserted item
                $(modalName).modal('hide'); //hide modal
                $(modalInput).val(''); //clear input value
           },
           error:function(e){
                //console.log(error.responseJSON.error)
                //console.warn(error.responseJSON.error);
                console.log(type);
                $.each(e.responseJSON.error, function (i, error) {
                    $(modalInput).addClass('input-error');
                    $(modalName + ' .backend-error').html(error[0]); //return error from backend
                });
           }
        });
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...