Модальная форма и ответ на iOS не работают

Для контекста - я использую jquery 2.1 и Bootstrap 3.2.

У меня есть модальное окно, в котором представлена ​​форма поиска и кнопка «Поиск». Под формой поиска есть блок div, зарезервированный для отображения результатов запроса в том же модальном режиме. Результаты вводятся в div с помощью javascript. Затем пользователю разрешается выбрать один из результатов и отправить свой выбор (второе событие отправки).

Таким образом, модальный html (отображаемый вместе с главной страницей):

<form id="'.$formid.'" method="post" action="/control/mm_form_handler.php">

  <div class="form-container text-center">

    <div class="form-row " >
        <input name="f_name" type="text" required/>
        <input name="l_name" type="text" required/>
    </div>

    <div>
      <input type="submit" class="btn search-btn btn-xs" value="Go Search" />
    </div>

  </div>

</form>

<div id="search_results"></div>

Модальная форма поиска отправляется через javascript с использованием плагина Malsup jQuery_form следующим образом:

    $( document ).on('click','.search-btn',function(e) {
        e.preventDefault();

        var formID = $(this).closest("form").attr('id');


        $('#search_results').html('');

        $('#search_results').prepend('<div class="waiting"></div><p>Please be patient. This could take a little time...</p>');

        var options = {
            data: {'formID':formID},
            success: function (data) {
                $('#search_results').html(data);
            },
            error: function() {
                alert('post failed');
            }
        };

        $('#'+formID).ajaxSubmit(options);

    }); 

А обработчик — это php-скрипт, который получает вероятные совпадения из базы данных и форматирует их в блоки с переключателями, чтобы пользователь мог выбрать (близкое) совпадение. Построенная строка html, в конце, отображается эхом и отображается в div "search_results" (см. javascript).

Я думаю, что имеет значение только (потому что он отлично работает на ПК/Mac), что возвращается строка html и контента.

Таким образом, эта настройка отлично работает на ПК/Mac с Chrome, Safari или Firefox.

Проблема в iOS, Chrome и Safari.

В iOS 7.1.2 (iphone 4S) при отправке формы поиска (.search_btn) экран искажается — верхняя половина экрана — это модальная форма поиска (поверх серого фона поверх исходного page), а нижняя половина — это содержимое страницы запуска модального окна, расположенной ПОВЕРХ нижней половины модального окна. Проведя пальцем вниз по нижней половине, открывается полное модальное окно. Второе нажатие кнопки поиска приводит к получению и отображению результатов в модальном режиме точно так же, как на ПК/Mac.

В iOS 8.0.2 (iphone 6 — да, я сделал решительный шаг сегодня) страница остается серой, но модальное окно полностью исчезает (нет формы поиска, не возвращается контент и т. д.), а браузер блокируется.

Я попытался удалить предварительно добавленный контент, вставленный в search_results, но получил точно такие же результаты с этим контентом или без него.

Любые подсказки, что мне нужно сделать, чтобы заставить браузеры iOS вести себя так, как браузеры для настольных компьютеров?


person globalSchmidt    schedule 27.09.2014    source источник
comment
В настоящее время не существует такой вещи, как Bootstrap v3.3.   -  person cvrebert    schedule 27.09.2014
comment
Код, который вы разместили, не имеет модальной разметки Bootstrap...   -  person cvrebert    schedule 27.09.2014
comment
Спасибо, что заметили опечатку в загрузочной версии. Фиксированный. И вы правы, что в опубликованном коде не было бутстрапа. То, что показано, является кодом между тегами <div class="modal-body"></div> в стандартном модальном окне начальной загрузки. getbootstrap.com/javascript/#modals. Поскольку бутстрап вряд ли будет здесь проблемой, я удалил тег SO для этого поста.   -  person globalSchmidt    schedule 27.09.2014
comment
ОБНОВЛЕНИЕ: я нашел этот пост: stackoverflow.com /questions/10400149/ и удалил все ссылки на кнопки из моего модального кода. В iOS 7.1.2 отправка модальной формы работает должным образом, ЕСЛИ вы закроете клавиатуру ДО того, как нажмете кнопку поиска. Все еще не работает (просто становится серым) на iOS 8.   -  person globalSchmidt    schedule 27.09.2014