Question

对于上下文 - 我正在使用jquery 2.1和Bootstrap 3.2。

我有一个提供搜索表单和“搜索”按钮的模式。在搜索表单下方，有一个div保留用于在同一模态中显示查询结果。结果通过javascript注入div。然后允许用户选择一个结果并提交他们的选择（第二个提交事件）。

因此模态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>

使用Malsup的jQuery_form插件通过javascript提交模态搜索表单，如下所示：

    $( 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字符串最后回显并显示在“search_results”div中（参见javascript）。

我认为它唯一相关的（因为它在PC / Mac上工作正常）传回的是一串html和内容。

所以这个设置在使用Chrome，Safari或Firefox的PC / Mac上完美运行。

问题是iOS，Chrome和Safari。

在iOS 7.1.2（iphone 4S）上，当提交搜索表单（.search_btn）时，屏幕搞砸了 - 屏幕的上半部分是模态搜索表单（在顶部的灰色背景上）（原始页面）和下半部分是模态下半部分中显示的模态启动页面的内容。通过向下滑动下半部分，显示完整模态。第二次按下搜索按钮，然后在PC / Mac体验中完美地检索并显示结果。

在iOS 8.0.2上（iphone 6 - 是的，我今天大肆宣传），页面仍然显示为灰色，但模式完全消失（没有搜索表单，没有返回内容等），浏览器锁定。< / p>

我已尝试将插入到search_results中的前置内容取出，但无论是否包含该内容，都会获得完全相同的结果。

我需要做些什么来让iOS浏览器像桌面浏览器一样运行？

iOS上的模态形式和响应无法正常工作

0 个答案: