asked on

Javascript window.onload not firing in Firefox

Hi Experts -

I have the following code set up to repopulate some product filters that I am storing so that when the user presses the back button or refreshes the screen, the filters are saved.

The code works perfectly in IE when I press the back button or rerfresh the page, the filters are restored.

In firefox this only fires if I refresh the page. If I press the back button, the javascript never fires.

This may not be the best way to do this. I am open to suggestions if there is a better way to program the javascript.

Thank you!

<script type="text/javascript">

function loadProducts(type,category)
{
      var brand = [];
	  var color = [];
	  var price = [];
	  var capacity = [];
	  var width = [];
	  var val = [];
	  var COOKINGTYPE = [];
	  var POWERSOURCE = [];
	  var BURNERTYPE = [];
	  var SURFACETYPE = [];
	  var COOKINGSURFACE = [];
	  var CLEANINGTYPE = [];
	  var SHELVING = [];
	  var MOTORSPEEDS = [];
	  var HORSEPOWER = [];
	  var TYPEFEED = [];
	  var TUBMATERIAL = [];
	  var CONTROLTYPE = [];
	  var WASHLEVELS = [];
	  
	  
	Url = "products_filter.php?Category="+category+"&Available=1&Search.x=50&Search.y=8";
	Datas = $("#frm").serialize();
	$.ajax({
		url:Url,
		type:'POST',
		data:Datas,
		beforeSend: function ()
		{                               
			$("#product").html("Please wait...");                                               
		},
		success:function(msg)
		{                     
			$("#product").html(msg);                 
		}                   
	   });

}

function nav_ajax(page)
{
    var type='price';
	//$.post(page,{},function(data) { $("#content").html(data);});
	 var brand = [];
	  var color = [];
	  var price = [];
	  var capacity = [];
	  var width = [];
	  var val = [];
	  var filters = [];
  
	
	Url = page;
	Datas = $("#frm").serialize();
	$.ajax({
		url:Url,
		type:'POST',
		data:Datas,
		beforeSend: function ()
		{                               
			$("#product").html("Please wait...");                                               
		},
		success:function(msg)
		{                     
			$("#product").html(msg);                 
		}                   
	   });
}
//-->

  </script>
  <?php if(isset($_SESSION['jac1']))
  {?>
  <script language="javascript" type="text/javascript">
  window.onload = function() {loadProducts('brand','<?=$_GET['Category'];?>');};
  </script>
  <?php }?>
	<?php if(isset($_SESSION['jac2']))
  {?>
  <script language="javascript" type="text/javascript">
  window.onload = function() {loadProducts('color','<?=$_GET['Category'];?>');};
  </script>
  <?php }?>
  <?php if(isset($_SESSION['jac3']))
  {?>
  <script language="javascript" type="text/javascript">
  window.onload = function() {loadProducts('price','<?=$_GET['Category'];?>');};
  </script>
  <?php }?>
  <?php if(isset($_SESSION['jac4']))
  {?>
  <script language="javascript" type="text/javascript">
  window.onload = function() {loadProducts('cap','<?=$_GET['Category'];?>');};
  </script>
  <?php }?>
  <?php if(isset($_SESSION['jac5']))
  {?>
  <script language="javascript" type="text/javascript">
  window.onload = function() {loadProducts('width','<?=$_GET['Category'];?>');};
  </script>
  <?php }?>

Open in new window

dxdinh

-- try this from

http://dean.edwards.name/weblog/2005/09/busted/

// for Mozilla browsers

if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}

or his method
http://ckon.wordpress.com/2008/07/25/stop-using-windowonload-in-javascript/

danjen

ASKER

Thank you for your reply. Where on the page would I put the above code? Can you show an example?

dxdinh

-- since you using jQuery - i would add this in your document.ready

<script type="text/javascript">
$(document).ready(function() {

// for Mozilla browsers

if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}

});
</script>

danjen

ASKER

Sorry - I am not very familiar with Javascript. Should I just copy and past this above the code I have hear or does it go in the head tags?

I pasted your code in to the head tag but it did not help.

dxdinh

you can try to replace all your instance of window.onload
such as:
window.onload=your_function;

to
if (window.attachEvent)
{window.attachEvent('onload', your_function);}
else if (window.addEventListener)
{window.addEventListener('load', your_function, false);}
else
{document.addEventListener('load', your_function, false);}

i know it's longer but it will take care all the browser for you

ASKER CERTIFIED SOLUTION

dxdinh

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Mehmet Erten

the following code works in between <body> ... </body> in Edge/Firefox/Chrome
but when I moved them into a javascript.js file it does not... not happening if not after the load time.. back to the problem again. Catch-22

<script>

if (window.attachEvent)
{
window.attachEvent('onload', loadMyEvents() );
}
else if (window.addEventListener)
{
window.addEventListener('load',loadMyEvents(), false);
}
else
{
document.addEventListener('load', loadMyEvents(), false);
}

function loadMyEvents()
{
document.getElementById("myname").onfocus = function(){doOnFocus(this)};
document.getElementById("optin").onclick = function(){doOnClick(this)};
document.getElementById("myname").onblur = function(){doOnBlur(this)}
document.getElementById("mydirection").onchange = function(){doOnChange(this)};
document.getElementById("myform").onsubmit = function(){return doOnSubmit(this)};
document.getElementById("windowsBody").onload = function(){doOnLoad()};
document.getElementById("mylink").onclick = function(){doOnClick(this)};
document.getElementById("mypara").onmouseover = function(){doOnMouseOver(this)};
document.getElementById("mypara").onmouseout = function(){doOnMouseOut(this)};
}
</script>

What is the trick to make the function only works after the onload in an external js file.

The following worked on all three browers (Chrome, Firefox, Edge): (I try not to use any jQuery):

window.onload = function() {myFunction()};

function myFunction()
{
doOnLoad();
document.getElementById("myname").onfocus = function(){doOnFocus(this)};
document.getElementById("optin").onclick = function(){doOnClick(this)};
document.getElementById("myname").onblur = function(){doOnBlur(this)}
document.getElementById("mydirection").onchange = function(){doOnChange(this)};
document.getElementById("myform").onsubmit = function(){return doOnSubmit(this)};
document.getElementById("mylink").onclick = function(){doOnClick(this)};
document.getElementById("mypara").onmouseover = function(){doOnMouseOver(this)};
document.getElementById("mypara").onmouseout = function(){doOnMouseOut(this)};
}