Firefox不刷新页面刷新时的选择标记 [英] Firefox not refreshing select tag on page refresh
问题描述
我遇到了一个问题，我有一个选择标签，用户可以用它来选择一个品牌的手机，然后使用jquery的页面就会显示这些手机。
感谢堆栈溢出人员的帮助，现在每个浏览器都可以使用firefox。出于某种原因，当我刷新页面时，选择标签显示最后选择的选项，但该页面显示所有可用的设计。有没有人有任何建议或建议让Firefox来刷新选择标签？我无法在js.fiddle上显示它，因为它没有在那里发生，所以这里有一个链接：
http://davidarabis.com/test/test.html
这里是代码：
< select class =manufacturers>
< option class =selectedvalue =all>全部< / option>
< option value =motorola> Motorola< / option>
< option value =htc> HTC< / option>
< option value =lg> LG< / option>
< option value =samsung> Samsung< / option>
< option value =kyocera>京瓷< / option>
< / select>
< div class =scroll-content>
< ul class =manulist motorola>
< li>< a href =＃>摩托罗拉Triumph< / a>< / li>
< / ul>
< ul class =manulist htc>
< li>< a href =＃> HTC WILDFIRE S< / a>< / li>
< / ul>
< ul class =manulist lg>
< li>< a href =＃> LG Optimus Slider< / a>< / li>
< li>< a href =＃> LG Optimus V< / a>< / li>
< li>< a href =＃> LG Rumor Touch< / a>< / li>
< li>< a href =＃> LG Rumor 2< / a>< / li>
< li>< a href =＃> LG 101< / a>< / li>
< / ul>
< ul class =manulist samsung>
< li>< a href =＃>三星Intercept< / a>< / li>
< li>< a href =＃>三星还原< / a>< / li>
< li>< a href =＃>三星M575< / a>< / li>
< / ul>
< / div>
jquery：
$（document）.ready（function（）{
$ b $（'。manufacturers'）。change（function（）{
（$（this）.val（）=='）; var select = $（this）.find（'：selected'）;
$（'ul.manulist'）。hide（）;
if所有'）{
$（'。scroll-content ul'）。show（）;
} else {
$（'。'+ selected.val（））。show（） ;
$（'。optionvalue'）。html（selected.html（））。attr（
'class'，'optionvalue'+ selected.val（））;
}
}）;
}）;
预先感谢您的任何建议或帮助。
F5 ）。但是，如果用户选择执行硬刷新（ Ctrl + F5 ），则这些值将不会从缓存中获取，并且您的代码将按预期工作。 p> 由于用户将根据自己的意愿采取行动，因此您必须提供涵盖两种情况的解决方案。这可以通过以下几种方法来完成：
准备好的开始处添加该代码处理程序。
参考文献
window.onbeforeunload 网络
注意：已在链接的SO帖子以及评论中的这里，只需将 autocomplete 关闭。然而，这并不是最好的解决方案 - mdash;原因有两个： a。兼容性 autocomplete 是 HTML5属性，所以我们限制了我们的选择实现，并且 b。语义：目标是处理页面刷新的情况。 autocomplete 用于控制会话历史记录缓存并管理表单控件的提示。如果这个实现在未来发生变化，那么这个解决方案将会中断。
I've run into a problem where I have a select tag that the user would use to select a brand of phone and the page using jquery would then just display those phones.
Thanks to the help of the people on stack overflow this now works great on every browser but firefox. For some reason when I refresh the page the select tag shows the last selected option but the page shows all phones available as designed. Does anyone have any suggestions or advice on getting firefox to refresh the select tag? I can't show it on js.fiddle because it doesn't happen there so here is a link:
http://davidarabis.com/test/test.html
And here is the code:
<select class="manufacturers">
<option class="selected" value="all">All</option>
<option value="motorola">Motorola</option>
<option value="htc">HTC</option>
<option value="lg">LG</option>
<option value="samsung">Samsung</option>
<option value="kyocera">Kyocera</option>
</select>
<div class="scroll-content">
<ul class="manulist motorola">
<li><a href="#">Motorola Triumph</a></li>
</ul>
<ul class="manulist htc">
<li><a href="#">HTC WILDFIRE S</a></li>
</ul>
<ul class="manulist lg">
<li><a href="#">LG Optimus Slider</a></li>
<li><a href="#">LG Optimus V</a></li>
<li><a href="#">LG Rumor Touch</a></li>
<li><a href="#">LG Rumor 2</a></li>
<li><a href="#">LG 101</a></li>
</ul>
<ul class="manulist samsung">
<li><a href="#">Samsung Intercept</a></li>
<li><a href="#">Samsung Restore</a></li>
<li><a href="#">Samsung M575</a></li>
</ul>
</div>
The jquery:
$(document).ready(function() {
$('.manufacturers').change(function() {
var selected = $(this).find(':selected');
$('ul.manulist').hide();
if ($(this).val() == 'all') {
$('.scroll-content ul').show();
} else {
$('.' + selected.val()).show();
$('.optionvalue').html(selected.html()).attr(
'class', 'optionvalue ' + selected.val());
}
});
});
Thanks in advance for any advice or help.
FireFox will cache form values (including the selected value of a select box), when the refresh mechanism is activated normally (F5). However, if a user chooses to perform hard-refresh (Ctrl+F5), these values won't be fetched from the cache and your code will work as expected.
As users will act on their own will, you have to provide a solution to cover both cases. This can be done by taking several approaches:
- Handle each page refresh: add some reset code to set the default selected state inside the
window.onbeforeunloadevent listener. - Add that code at the beginning of the DOM
readyhandler. - Use cookies, as described in this post from Ted Pavlic's blog, to detect the page refresh and act on it (placing the same code there).
- Set no-cache headers on the server-side, thus forcing the relevant resources to be fetched.
References
window.onbeforeunloadon Mozilla Developer Network- A post on stackoverflow on the FireFox's form values caching
- A blog post on the feature from 2009
- Yet another blog post on the feature dating 2008
Note: It has been suggested on the linked SO post, as well as here in the comments, to simply turn autocomplete off. This, however, is not the best solution — for two reasons: a. Compatibility: autocomplete is an HTML5 attribute, so we're restricting our implementation of choice, and b. Semantics: The aim is to handle the case of a page refresh. The autocomplete is intended for controlling session history caching and manage prompting of the form controls. Should this implementation change in the future, that solution will break.
这篇关于Firefox不刷新页面刷新时的选择标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
