Firefox execution problems

twoweektrial · May 26, 2009

I've got a js library I've created to allow users to cycle through images. In IE, this works flawlessly, but in firefox, the js page loads, and the php file I created sends the proper request back to the client, but then nothing happens. I've tried using firebug, but haven't been able to find the cause.

JS:

function setup_gallery()
{
image_location = 0;
images = new Array();
xml = create_request_object();

xml.onReadyStateChange = state_action;
xml.open("GET", "scan_dir.php", true);
xml.send(null);

change_image(0);
}

function change_image(loc)
{
document.getElementById("display_image").src = "/images/show/"+images[loc];
}

function first()
{
image_location = 0;
change_image(image_location);
}

function last()
{
image_location = images.length;
change_image(image_location);
}

function next()
{
image_location++;
if(image_location > images.length)
{
	image_location = 0;
}
change_image(image_location);
}

function previous()
{
image_location--;
if(image_location < 0)
{
	image_location = images.length-1;
}
change_image(image_location);
}

function create_request_object()
{

/*
     	  create_request
  parameters: none
  returns AJAX object on success
  returns false on failure

  function creates an AJAX object and returns it.
*/

var xmlhttp;
if (window.XMLHttpRequest)
{
	//IE 7+, Firefox, Opera, Chrome, Safari
	xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
	//IE 5, 6
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
	alert("Your browser does not support AJAX! Please update your browser, or go to <a href='http://www.firefox.com'>firefox.com</a> to download an up-to-date browser.");
	return false;
}

return xmlhttp;
}

function state_action()
{
if(xml.readyState == 4 || xml.readyState == "complete")
{
	images = eval("["+xml.responseText+"]");
}
}

PHP

<?php
$dir='../images/show/';
$ftype='jpg';
$files=scandir($dir);
$jpg="";
foreach($files as $f)
{
$file=$dir."/".$f;
if(!is_dir($file))
{
	$type=end(explode(".", $file));
	if($type == $ftype)
	{
		$nf=str_replace(" ", "&&|", $f);
		$jpg .= "'$nf' ";
	}
}
}
$jpg=trim($jpg);
$jpg=str_replace(" ", ", ", $jpg);
$jpg=str_replace("&&|", " ", $jpg);
echo $jpg;

?>

And here is the html file just in case

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

<title>ByteCannon Web Design - Demo Art</title>

<meta name="keywords" content="Bytecannon, Bytecannon Web Design, web design, web, design, custom web design, custom, san luis"></meta>
<meta name="synonyms" content="Byte Cannon, slo"></meta>
<meta name="author" id="author" content="ByteCannon Web Design"></meta>

<link rel="stylesheet" type="text/css" href="/style.css" />

<script type="text/javascript" src="/js_frame/prototype.js"></script>
<script type="text/javascript" src="/js_frame/scriptaculous.js"></script>
<script type="text/javascript" src="gallery.js"></script>

</head>

<body onload="setup_gallery()">

<div id='nav'>
    <ul>
        <li>
            <a href='/' title='Return to the homepage'>Home</a>
        </li>
        <li>
            <a href='/pricing/' title='A general reference to Bytecannon Prices'>Prices</a>
</li>
<li>
	<a href="/art/" title="Demo page art.">Demo Art</a>
        </li>
        <li>
            <a href='/contact/' title='Contact Via Web Based E-mail or by Phone'>Contact</a>
        </li>
    </ul>
</div>
<div id="banner" title="ByteCannon Web Design">
</div>

<div id='main'>

<div id="photo_display">
<img id="display_image" src="/images/gallery/bg.jpg" alt="ByteCannon Web Design" /></div>

<div id="photo_nav">
<img onClick="first();" src="/images/first.jpg" alt="First" />
<img onClick="previous();" src="/images/prev.jpg" alt="Prev" />
<img onClick="next();" src="/images/next.jpg" alt="Next" />
<img onClick="last();" src="/images/last.jpg" alt="Last" />
</div>

</div>

</body>
</html>

Thanks for your help in advance

thewooleymammoth · May 27, 2009

probably something in your js that is propriety which ie uses and firefox does not, although im not sure what it is.

Ken2k7 · May 27, 2009

You're executing the function change_image() freely. During AJAX calls, the rest of your code does *not* wait for AJAX to finish running. So say for example you hit your first change_image(0) function call in your setup_gallery() function but AJAX has yet to finish running, well, images array is empty. You can say the same for all first(), previous(), etc. functions.

twoweektrial · May 27, 2009

Well, I moved the code to the state_action() function, and extended the if(xml.readyState == 4) statement to encompass that code, but still no dice. I also added some extra functionality, not sure if that's breaking it. Also, still works in IE just fine.

function setup_gallery()
{
image_location = 0;
images = new Array();
xml = create_request_object();

xml.onReadyStateChange = state_action;
xml.open("GET", "scan_dir.php", false);
xml.send(null);
/*
change_image(0);

var i;

$('mini_gallery').innerHTML += "<table id='mini_gallery_table'><tr>";
for(i = 0; i < images.length; i++)
{
	$('mini_gallery').innerHTML += '<td><img src="/images/show/'+images[i]+'" class="mini" /><td>';
	if(i%5 == 0)
	{
		$('mini_gallery').innerHTML += "</tr><tr>";
	}
}
$('mini_gallery').innerHTML += "</tr></table>";
*/
}

function change_image(loc)
{
var temp = images[loc].split(".");
var header = temp[0];

$("display_header").innerHTML = header;
$("display_image").src = "/images/show/"+images[loc];
fadeIn("display_image");
}

function first()
{
image_location = 0;
change_image(image_location);
}

function last()
{
image_location = images.length-1;
change_image(image_location);
}

function next()
{
image_location++;
if(image_location >= images.length)
{
	image_location = 0;
}
change_image(image_location);
}

function previous()
{
image_location--;
if(image_location < 0)
{
	image_location = images.length-1;
}
change_image(image_location);
}

function create_request_object()
{

/*
     	  create_request
  parameters: none
  returns AJAX object on success
  returns false on failure

  function creates an AJAX object and returns it.
*/

var xmlhttp;
if (window.XMLHttpRequest)
{
	//IE 7+, Firefox, Opera, Chrome, Safari
	xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
	//IE 5, 6
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
	alert("Your browser does not support AJAX! Please update your browser, or go to <a href='http://www.firefox.com'>firefox.com</a> to download an up-to-date browser.");
	return false;
}

return xmlhttp;
}

function state_action()
{
if(xml.readyState == 4 || xml.readyState == "complete")
{
	images = eval("["+xml.responseText+"]");

        change_image(0);

        var i;
        $('mini_gallery').innerHTML += "<table id='mini_gallery_table'><tr>";
        for(i = 0; i < images.length; i++)
        {
		$('mini_gallery').innerHTML += '<td><img src="/images/show/'+images[i]+'" class="mini" />';
                if(i%5 == 0)
                {
                        $('mini_gallery').innerHTML += "</tr><tr>";
                }
        }
        $('mini_gallery').innerHTML += "</tr></table>";
}
}

function fadeIn(element)
{
new Effect.Opacity(element, {duration:2, from:0, to:1.0});
}

Adam · May 27, 2009

What does the error console say when you try to run the function?

thewooleymammoth · May 27, 2009

StateChange should be lowercase

twoweektrial · May 27, 2009

lower-cased onreadystatechange, but still doesn't work in firefox. IE8 gives no errors either (had to upgrade). Also, the error console comes up with nothing.

Sign In

Firefox execution problems

Recommended Posts

twoweektrial

Link to comment

Share on other sites

thewooleymammoth

Link to comment

Share on other sites

Ken2k7

Link to comment

Share on other sites

twoweektrial

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

thewooleymammoth

Link to comment

Share on other sites

twoweektrial

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information