Javascript 在表单提交后显示模式，直到下一页加载。。。在safari上不工作？

我有一个这样的按钮

<form action="/category" method='GET'>
    <button type="submit" class="btn btn-default render">
        name
    </button>
</form>

名称

我有一些javascript，每当点击按钮时就会启动一个模式。。。这只是为了让用户知道下一页正在加载

<script type='text/javascript'>
    $(document).ready(function(){
        $(".render").click(function(evt){
            $('#render_page').modal('show');
        });
    });
</script>

$（文档）.ready（函数（）{
$（“.render”）。单击（函数（evt）{
$（'render#u page'）。模式（'show'）；
});
});

这是模态的html

<div class="modal fade" id="render_page" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="form-horizontal">

                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div id="user_msg" align="left">Rendering Page... </div>
                </div>

            </div>                                  
        </div>
    </div>
</div>

&时代；
呈现页面。。。

这一切都可以在Firefox和Chrome上正常工作，但Safari没有显示模式？如果我将表单放在按钮中，它将启动模式，但它不会提交表单。所以表单提交和模式这两个方面都可以工作，但是safari不想同时做这两件事？

试试这个

<script type='text/javascript'>
    $(document).ready(function(){
        $(".render").click(function(evt){
            evt.preventDefault();
            $('#render_page').modal('show');
        });
    });
</script>

（将id“testForm”添加到表单）

---

下面给出了一些其他方法

1：您可以在表单提交时调用函数。只需在表单标记中添加带有函数名（例如myFunction）的

onsubmit=“myFunction（）”

。如下所示

<form action="/category" method='GET' onsubmit="myFunction()">
    <button type="submit" class="btn btn-default render">
        name
    </button>
</form>





<script>
function myFunction() {
    $('#render_page').modal('show');
}
</script>

---

我相信其中一个可以解决您的问题。

可能有些过分，但在chrome和safari中测试没有问题，您可以控制提交实际表单之前的时间

更新我觉得您只需要一个通知系统，而不是模式。。退房

更新2在新窗口中打开帖子并不总是有效。删除

prop（'target'，'blank'）

行，然后重试

代码

//代码在这里
var CustomTimeout=200；//200毫秒
$（文档）.ready（函数（）{
$（“.render”）。单击（函数（evt）{
//阻止表格发送
evt.preventDefault（）；
//开放模态
showModal（）。然后（函数（）{
//发送表格
sendForm（evt，CustomTimeout）。然后（无论您想要什么，都可以使用extfunction）
//假函数
函数whateveryouwanttonextfunction（）{}；
})
});
});
函数showmodel（）{
返回新承诺（功能（解决、拒绝）{
解析（$（'render#u page'）。模式（'show'）；
})
}
函数sendForm（e，超时）{
返回新承诺（功能（解决、拒绝）{
控制台日志（“发送表单”，e）；
//将您的操作和方法设置为手动
美元（“表格”）.prop（“行动”、“类别”）；
$（“form”）.prop（'method'，'GET'）；
//为提交打开一个新窗口
$（'form'）.prop（“target”，“u blank”）；
//设置超时
函数提交（）{
setTimeout（函数（）{
$（'form'）.submit（）；
//解析链接的提交
解析（console.log（“表单发送成功”）；
}，超时）；
}
//提交
提交（）；
});
}

名称
&时代；
呈现页面。。。

试试：

$（文档）.ready（函数（e）{
$（“.render”）。单击（函数（evt）{
evt.preventDefault（）；
$（'render#u page'）。模式（'show'）；
setInterval（function（）{$（“#formID”）.submit（）；}，3000）；
});
});

名称
脚本在哪里？在页眉部分？不，脚本位于页面底部尝试将其移动到顶部（我更喜欢在页眉中），然后在显示页面之前加载。确定将其移动到页眉并不能解决问题。。。添加一个返回0也不能解决这个问题……我在safari中尝试了你的代码，它的工作很好。你能告诉我你有什么版本的safari吗？他的用户。。。preventDefault不阻止表单提交。。。使用这个模式确实可以显示，但是我还需要将表单提交给DHI用户。谢谢你的小提琴。这种方法很有效，但我有两个问题。1.如何向表单提交添加变量？而且我不太喜欢一秒钟的等待。。。有没有办法减少这种情况？我对它进行了处理，将等待计时器设置为1而不是1000，可以防止（再次）显示模式…您可以删除间隔并直接调用$（'#testForm'）。submit（）；模型显示功能后，也可以在间隔中设置1。我不了解表单变量，请告诉我全部细节。嗨。。。我测试了它，如果setTimeout函数的延迟为100，或者如果我删除了setTimeout函数，则该模式不会出现。。。如果我将setTimeout延迟设置为1秒，它就可以工作了。。。但是这似乎是一个非常次优的解决方案？carl，如果提交（意味着整个页面刷新）足够快，那么模式就不会出现。在模式显示或您可以注册之前，页面将被重新加载。这就是为什么您需要至少半秒的超时，以允许模态加载并让用户看到它@user5200704已经回答了您的问题，并且它可以正常工作，正如您在上面所评论的。如果你想问另一个问题，就再问一个。如果解决方案不适合你，那是因为你的方法有缺陷，而不是因为答案本身。。。不过，它们在铬合金上都能很好地工作。javascript代码运行起来没有问题（我用控制台输出测试了它），但是show modal命令没有达到预期的效果。。。谢谢你的帖子。。。我同意，当设置超时为200毫秒时，这是有效的，但当设置超时为100或1时，它不起作用……什么部分“不起作用”？我有一个通用的动作url，帖子本身在一个新的winow
$（'form'）.prop（“target”，“u blank”）中打开。数据是否未发布或模式是否未显示？模式是否未显示。。。所有其他部分工作，表格已发送。在Chrome上，模态确实显示，但在safari？上不显示，这可能是windows的问题。你有最新的jQuery&BS吗@user5200704小提琴，包括超时。我
<form action="/category" method='GET' onsubmit="myFunction()">
    <button type="submit" class="btn btn-default render">
        name
    </button>
</form>





<script>
function myFunction() {
    $('#render_page').modal('show');
}
</script>

<form action="/category" method='GET'>
    <button type="submit" class="btn btn-default render" onclick="myFunction()">
        name
    </button>
</form>




<script>
function myFunction() {
    $('#render_page').modal('show');
}
</script>