Jump to content

Firefox execution problems

twoweektrial

By twoweektrial
in Javascript Help

Recommended Posts

twoweektrial Newbie

twoweektrial

Posted
Posted

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

 

Link to comment
https://forums.phpfreaks.com/topic/159769-firefox-execution-problems/
Share on other sites
Ken2k7 Member

Ken2k7

Posted
Posted

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 Newbie

twoweektrial

Posted
  • Author
Posted

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});
}

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.