在表单提交时显示div，在Chrome，FF，IE中运行，但不在Safari中运行

问题描述：

不知道该怎么办。在表单提交时显示div，在Chrome，FF，IE中运行，但不在Safari中运行

我有一个窗体，当提交时，我想显示一个“正在处理，请稍候”的消息。（该表由照片上传所以可能需要一段时间）

我已经jQuery的

以下

$(document).ready(function() { 
    $('#addnews').submit(function() { 
     $('#loading').show(); 
    }); 
});

addnews是我的表单ID，和模板中的DIV是

<div id="loading">Please wait, your news is being submitted... 
    <img src="/-/images/addwalk-loader.gif"/> 
</div>

使用此css

#loading{ 
    display:block; 
    display: none; 
    background:#399f8a; 
    color:#FFFFFF; 
    font-weight: bold; 
    text-align: center; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    padding:10px; 
    margin-top: 10px; 
} 

.loading img{ 
    float: right; 
}

现在，当我点击FF（Mac），Chrome（Mac & PC）和IE9（虽然gif没有动画，但我知道这是一个单独的问题）提交时工作，但我不知道在Mac上运行Safari。任何想法，如果有什么我有什么阻止它？或者调试它的最好方法是什么？谢谢！

我使用的Safari 5.1.3，它似乎是工作http://jsfiddle.net/dhirajbodicherla/MF7J5/3/ 请告诉我，如果我错过了一些东西。 – Dhiraj 2012-03-29 23:43:46

不是小提琴看起来正确。奇怪。我使用的表单是一个Safecracker表单，作为Expression Engine的一部分，尽管我不认为这会导致问题。我在5.1.5上。当使用开发>用户代理时 - 它适用于所有浏览器栏Safari（Mac）和iOS Safari（我知道），但其他所有浏览器都可以。只是Safari！ – shorn 2012-03-30 00:04:09

理想情况下，盗窃者不应该引起任何问题，您是否在您的萤火虫控制台中看到任何奇怪的错误？ – Dhiraj 2012-03-30 00:18:18

答

这对我有效。不知道为什么，但也许Safari需要一点点休息才能在提交之前真正显示它:)提交似乎停止页面上的一些事件。动画GIF在Safari和IE上冻结提交，但在Chrome和FF中，它们仍然在提交过程中滚动。

$(document).ready(function() { 
    $('#addnews').submit(function() { 
     setTimeout(gogo,1);  
    }); 
}); 

function gogo() { 
    $('#loading').show(); 
}

很酷，我会很快尝试！ – shorn 2012-12-03 21:48:27

完美的作品！ – EvilInside 2015-04-15 20:14:11

这在iPad的Safari中不起作用 – manix 2015-10-20 00:12:51

答

我已经经历了非常类似的东西在那里上提交，我们显示的装载弹出它覆盖了整个屏幕，试图从重新加载页面，如果他们认为这是时间太长重新提交阻止人们的支付形式的问题。但在Safari中，加载程序似乎从未出现过。

看了控制台后，有点线索我意识到所有的CSS变化正在发生，并被应用到页面，但我只是没有看到这些反映在屏幕上。

我的结论是，这是由于Safari浏览器在页面加载过程中如何处理内容呈现。一旦页面加载被触发（即从链接或表单提交），Safari会停止对显示进行任何进一步的更改。

这是什么意思是你需要让你的加载动画就位之前，你开火提交。将这种想法应用于我自己的代码解决了这些问题。

对于您，这将意味着这样的事情...

$(document).ready(function() { 
    $('#addnews').submit(function(e) { 
     e.preventDefault(); 
     $('#loading').show(); 
     $(this).submit(); 
    }); 
});

然而，这引发了另一个问题是，由于提交的触发事件，我们要触发事件，我们创建一个无限循环这将从不提交，因为我们防止默认。

要解决这一点，你要么需要不会触发事事休提交或者我们可以做这样的事情......

$(document).ready(function() { 
    $('#addnews').each(function(){ 
     this.preventNextSubmit = true;    
    }).submit(function(e) { 
     if(this.preventNextSubmit == true){ 
      this.preventNextSubmit = false; 
      e.preventDefault(); 
      $('#loading').show(); 
      $(this).submit(); 
     } 
    }); 
});

这个例子开始增加了一个布尔值设置为true的形式。如果它是真的，它会禁止表单提交，而是显示动画，然后重置布尔值并再次调用提交，现在只需按照正常提交进行提交。

我希望这有助于:)

答

看来，这是需要你准备，你希望它是在之前提交发生在页面的状态的问题。所以，如果你是不是太执着于具有type='submit'按钮形式那么这里得到妥善解决：

步骤1

更改submit按钮，一个普通按钮。

步骤2

<input type="button" class=".fake_submit" value="Submit" />

绑定，显示了覆盖像这样的功能：

$(".fake_submit").click(function(){ 
     $('.overlay').fadeIn(function(){ 
    $(form).submit(); 
    }); 
});

在匿名功能的褪色的作用就像一个时间延迟，这样通过时的形式实际上变淡在，覆盖的状态已经被设置。这对我有效。

奖金提示

如果你想要一些类型的动画，Safari浏览器似乎阻止gifs从做什么，他们天生就是做。也许是一个错误，或者也许苹果的人认为在即将出门的页面上浪费资源是毫无意义的。无论什么原因，他们似乎都没有在这个动画中包含动画。因此，您可以使用CSS3动画加载器来代替gif，并且在Safari的桌面版本中，这似乎仍然有效。你可以找到一个酷动画这里：

http://fortawesome.github.io/Font-Awesome/examples/#animated

在表单提交时显示div，在Chrome，FF，IE中运行，但不在Safari中运行

相关推荐