JQuery. Ожидать ввод значений в модальном Bootstrap - PullRequest
Новая
       21

JQuery. Ожидать ввод значений в модальном Bootstrap

0 голосов
/ 13 июня 2019

У меня есть скрипт, который показывает модальную загрузку и получает входные значения для работы с ним.Но моя проблема в том, что скрипт не останавливает вводимые пользователем значения.

MODAL: 

  <!-- Modal -->
  <div class="modal fade" id="imageModal">
   <div class="modal-dialog" role="document">
       <div class="modal-content">
           <div class="modal-body">
               <div class="row">
                   <div class="col-12 col-sm-12 col-md-6 form-group">
                       <label for="f-type_id">Type image</label>
                       <select class="form-control">
                           <option value="">- Please select -</option>
                           @foreach($types as $type)
                               <option id="type_id"  value="{{ $type->id 
                                     }}">
                                   {{ $type->name }}
                               </option>
                           @endforeach
                       </select>
                   </div>
               </div>

               <div class="col-12 col-sm-12 col-md-6 form-group">
                   <label for="main">
                       <input type="checkbox" class="form-control" 
                        id="main">  
                         Main Image?
                   </label>
               </div>
           </div>

           <div class="modal-footer">
               <button type="button" class="btn data-target='#imageModal'
                       data-toggle='modal'>Save
               </button>
           </div>
       </div>
   </div>

And Script: 

 var $listOfImages = $('#listOfImages');

 $('#addImageButton').click(function() {
    FileManagerFunctions.open('images', function(url, filePath) {
        // Add image element
        $('#imageModal').modal('show');
        var $type =  $('#type_id').val();
        var $main = $('#main').val();
        var $newImage = imageHtml(filePath, $type, $main);
        $listOfImages.append($newImage);
      });
  });

imageHtml - это функция, которая создает массив с этими значениями (#type_id & #main), но мне нужноостановить вывод сценария до тех пор, пока пользователь не вставит значения $ type & $ main

Может быть возможно остановить сценарий до закрытия модального окна?Понятия не имею ...

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

Заранее спасибо!

1 Ответ

1 голос
/ 13 июня 2019

Если я правильно понимаю ваш вопрос, вы можете просто выполнить любые проверки, необходимые для $ type и $ main, прежде чем запускать вашу функцию.

например, 

      var $listOfImages = $('#listOfImages');

         $('#addImageButton').click(function() {
            FileManagerFunctions.open('images', function(url, filePath) {
                // Add image element
                $('#imageModal').modal('show');
                var $type =  $('#type_id').val();
                var $main = $('#main').val();
                var $newImage = imageHtml(filePath, $type, $main);
                if ($type !== '' && $main !== '') {
                    $listOfImages.append($newImage);
                } else {
                    alert('please enter a value for name and type')
                }
              });
          });

РЕДАКТИРОВАНИЕ:

Это частично решает проблему.

enter image description here

Я добавил id = "addImageData" в кнопку режима, а теперь остальная часть сценария ожидает закрытия режима.,Но проблема в том, что ввод значений неверен.Это решение плохо и не работает правильно.Но, может быть, это идея, которая мне нужна ...

...