jQuery как использовать управляемую событиями переменную в нескольких функциях - PullRequest
0 голосов
/ 28 февраля 2020

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

Вот код для динамических c входов в таблице

<table id="requested-wh-stock-table" class="table table-bordered table-hover dataTable" width="100%">
                        <thead>
                        <tr>
                            <th width="50%">Luminaire</th>
                            <th>Shelve Number</th>
                            <th>Order Quantity</th>
                            <th>Delivered Qty</th>
                            <th>Back Order Qty</th>
                        </tr>
                        </thead>
                        <tbody>
                            @foreach ($salesorder as $request)
                            <tr>
                                <td>
                                    <input type="hidden" class="wh_id" name="wh_id" value="{{$request->wh_id}}">
                                    <input type="hidden" class="wh_id" name="light_id" value="{{$request->light_id}}">
                                    <input type="text" class="form-control" name="luminaire" value="{{$request->luminaire}}" readonly></td>
                                <td><input type="text" class="form-control shelve_number" name="shelve_number" id="shelve_number" value="" onfocus="popModal(this)"></td>
                                <td><input type="number" class="form-control order_quantity" name="order_quantity" id="order_quantity" value="{{$request->quantity}}" readonly/></td>
                                <td><input type="number" class="form-control delivered_quantity" name="delivered_quantity" id="delivered_quantity" value=""/></td>
                                <td><input type="number" class="form-control backorder_quantity" name="backorder_quantity" id="backorder_quantity" value="" readonly/></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

Вот модальный код

<!--Shelve Modal-->
<!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Select Shelve Number</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12" style="text-align:center;margin-bottom:5%;margin-right:10%">
                            <div class="row">
                                <div class="col-sm-6">
                                    <label>Shelve Number</label>
                                </div>
                                <div class="col-sm-6">
                                    <select id="shelve_no" class="form-control select2" style="width: 100%;" name="shelve_no">
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="save_modal" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        /div>
    </div>
  <!--End of Model--> 

Вот мои две функции

function popModal(x){
          $('#myModal').modal('show');
        }

        //Return list of Shelves based on ordered luminaire
        $('.shelve_number').on('focus',function(){  
            var wh_id = 1; 
            var light_id = 9963;
            var elementChanges = "<option value='0' disabled selected>Select Shelve Number</option>";
            document.getElementById('shelve_no').innerHTML = elementChanges;
            $.ajax({
              type:"GET",
              url: '{!! url('warehouse/getshelveByluminaire') !!}/'+wh_id+"/"+light_id, 
            }).done(function(res) {
                  console.log(res);
                  var elems ="<option value='0' disabled  selected='selected'>Choose Shelve</option>";
                  for(var x=0;x<res.length;x++){
                    elems =elems + "<option value='"+JSON.stringify(res[x])+"'>"+res[x].shelve_no+"</option>";
                  }
                  document.getElementById('shelve_no').innerHTML = elems;
            });
        });

         //Assign Shelve number
        $(document).ready(function() {
            $('.shelve_number').on('change',function() {
                let parent = $(this).parents('tr');
                let shelve = parent.find('.shelve_number');
                var selected_shelve = jQuery("#shelve_no option:selected").val();
                var shelve_selected =JSON.parse(selected_shelve).shelve_no;


           //Save Modal function
             $('#save_modal').on('click',function(x){
                    shelve.val(shelve_selected);
                    $('#myModal').modal('hide');
                });
            });




           });

Функция перечисления полок работает нормально, так как полки отображаются в раскрывающемся списке и Я могу выбрать полку, но в тот момент, когда я нажимаю «Сохранить изменения», ничего не происходит, и в консоли ничего не появляется. Пожалуйста, помогите, у меня возникли проблемы с последними 2 функциями введите описание изображения здесь

1 Ответ

0 голосов
/ 28 февраля 2020

Вы можете сделать переменные глобальными, используя window.

function popModal(x){
    $('#myModal').modal('show');
}

$('.shelve_number').on('focus', function() {
    let parent = $(this).parents('tr');
    window.shelve = parent.find('.shelve_number');
    var wh_id = 1; 
    var light_id = 9963;
    var elementChanges = "<option value='0' disabled selected>Select Shelve Number</option>";
    $('#shelve_no').html(elementChanges);
    $.ajax({
        type: 'GET',
        url: "{!! url('warehouse/getshelveByluminaire') !!}/" + wh_id + "/" + light_id
    }).done(function(res) {
        console.log(res);
        var elems = "<option value='0' disabled  selected='selected'>Choose Shelve</option>";
        for (var x = 0; x < res.length; x++) {
            elems = elems + "<option value='" + JSON.stringify(res[x]) + "'>" + res[x].shelve_no + "</option>";
        }
        $('#shelve_no').html(elems);
    });
});

//Assign Shelve number
$(document).ready(function() {
      //Save Modal function
      $('#save_modal').on('click',function(x) {
          var selected_shelve = jQuery("#shelve_no option:selected").val();
          var shelve_selected = JSON.parse(selected_shelve).shelve_no;
          shelve.val(shelve_selected);
          $('#myModal').modal('hide');
      });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...