[SOLVED] Toggling Display not working in FF

[clang]

So I've got a <tr> in my page who's display property is set to none by default. I've also got a function that changes that property to '' when a button is clicked, so that the element becomes visible.

When I click the button, the hidden table row becomes visible for a second, then goes back to hidden.

I stuck an alert at the bottom of the page to tell me when the page loads, and it's loading right after I click my button, which makes sense that my table row is going back to the default value of being hidden. But there is nothing in my functions that calls for a reload of the page.

 

Here's the code for the table row and the button that you click

<table align="center">
<tfoot>
<tr style='display:none;' id="editButtons">	
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Ok" value="Ok" >
</td>
<td colspan="1" align="center">
<button onclick="javascript:toggleEdit('editButtons',this)">Edit</button>
</td>
</tr>
</tfoot>
</table>

 

And the function it calls

function toggleEdit(name,button){
var me=getDOM(name);
if(me.style.display=='none')
{
	me.style.display='';
	button.innerHTML="Cancel Edit";
}
else
{
	me.style.display='none';
	button.innerHTML="Edit";
}
}

function getDOM(objectname){
if (document.all) return document.all[objectname];
else return document.getElementById(objectname);
}

 

Any ideas on whats wrong?

[phpQuestioner]

I tested you code in FFv2.0.0.4 and IE7 - it did not reload the page for me; it seems to work as you are wanting it to.

[clang]

It's working fine in IE for me but not FF.

I'm not sure what else on my page could be calling for a reload when that function is called.

[phpQuestioner]

Post your full code and I will look at it and see if I can see why this is happening. But as far as the first code you posted; as I previously said - it seems to work fine; with no reload occuring.

[clang]

The full code has a large chunk of php in it. I've set up a separate test page to isolate the problem and I've narrowed down the problem to something with the php on this page specifically.

 

What I mean to say is, those functions and includes at the start of the document don't seem to be the problem, since I've tried the same things on another page, that I don't get this bug.

 

I've attached the file instead of posting because of the length.

Thanks for the help. This one has me stumped.

 

[attachment deleted by admin]

[phpQuestioner]

it reloads every time you click a button?

[clang]

It looks like pressing the following button calls the form action

<button onclick="javascript:toggleEdit('editButtons',this)">Edit</button>

 

Since the form is posting to it's self it's reloading.

<form action="./Verify.php" method="post">

 

But the button is not a submit button, so I'm not sure why it's calling the form action. Ideas?

[phpQuestioner]

yeah if it is not a submit button or does have code in the onclick event function for submitting the form; then that should not be occurring.

[clang]

Ha!

Got it.

I guess <button> has the default property of submit. I added the line type="button" to it's properties and now all is well.

So the final code is

<button type="button" onclick="javascript:toggleEdit('editButtons',this)">Edit</button>

 

Thanks for the help!

 

 

[phpQuestioner]

yeah - I see the submit button now in your html - you need to do it like this:

 

<?php
include 'library/functions.php';
session_start();
$db=opendb($dbhost, $dbuser, $dbpass, $dbname);
$header="<script type=\"text/javascript\" src=\"library/toggle.js\"></script>\n";
HTMLheader($db,"Verify Restriction File",'10 11', 'Yes',$header);

$documentInfo=$_SESSION['documentInfo'];
$check=true;
if($_SESSION['documentInfoSet'])
{
echo "entered";
if(isset($_POST['Ok']))
{

	$topFile=-1;
	$timeStamp=date('YmdHis');
	$restrictionID=$timeStamp.$documentInfo[1][0].$_SESSION['company_abbreviation'];
	createRestrictionFile($db,$documentInfo[1],$restrictionID,$topFile, $_SESSION['filePath'],$timeStamp, $_SESSION['user_id']);
	$topFile=$restrictionID;

	$t=2;
	for($y=1;$y<count($documentInfo);$y++)
	{
		$timeStamp=date('YmdHis')+$y;
		$restrictionID=$timeStamp.$documentInfo[$t][0].$_SESSION['company_abbreviation'];
		createRestrictionFile($db,$documentInfo[$t],$restrictionID,$topFile, $_SESSION['filePath'],$timeStamp, $_SESSION['user_id']);
		$t++;
	}
	$filePath=$uploadDir.$_SESSION['fileName'];
	$result= copy($_SESSION['physicalPath'], $filePath);
	linearizePDF($uploadDir,$_SESSION['fileName']);
	unlink($_SESSION['physicalPath']);

	if (!$result) {
		echo "Error moving file";
		exit;
	}
	createFile($db,$_SESSION['fileName'],$_SESSION['fileType'],$_SESSION['fileSize'],$_SESSION['filePath'],$filePath);

	unset($_SESSION['county']);
	unset($_SESSION['documentNumber']);
	unset($_SESSION['documentYear']);
	unset($_SESSION['performedSearch']);
	unset($_SESSION['volume']);
	unset($_SESSION['page']);
	unset($_SESSION['documentInfoSet']);
	unset($_SESSION['documentInfo']);
	unset($_SESSION['fileName']);
	unset($_SESSION['filePath']);
	unset($_SESSION['fileType']);
	unset($_SESSION['fileSize']);
	unset($_SESSION['tempFilePath']);
	unset($_SESSION['physicalPath']);

	$_SESSION['restrictionID']=$topFile;
	$check=false;
	setError(304);
	header("Location: ./CreateCustomer.php", true, 302 );

}
}

else
{
header("Location: ./Search.php", true, 302 );
}
?>
<div class="title"><a class="likeParent" href="./Search.php">Verify Restriction File</a></div>
<div id="content">
<table align="center">
<tbody>
<tr>
<td class="text">
<p>Please verify that the information for this restriction file is correct. Also verify that the correct <br />
restriction file was uploaded.<br /></p>
</td>
</tr>
</tbody>
</table>
<?php
if($check)checkError($db);
?>
<form action="./Verify.php" method="post">
<table align="center" border="1">
<thead>
<tr><th>Level</th><th>County</th><th>Document Year</th><th>Document Number</th>
<th>Volume</th><th>Page</th></tr>
</thead>
<tbody>
<tr>
<td>Main Restriction</td>
<td><?php 
	$countyName=getCountyName($db,$documentInfo[1][0]);
	echo $countyName[0];
	?></td>
<td><?php if(isset($documentInfo[1][4])) echo $documentInfo[1][4];?></td>
<td><?php if(isset($documentInfo[1][1])) echo $documentInfo[1][1];?></td>
<td><?php if(isset($documentInfo[1][2])) echo $documentInfo[1][2];?></td>
<td><?php if(isset($documentInfo[1][3])) echo $documentInfo[1][3];?></td></tr>

<?php
$b=2;
for($a=1;$a<count($documentInfo);$a++)
{
	echo "<tr><td>Additional Restriction</td>\n";

	if(isset($documentInfo[$b][0]))
	{
		echo "<td>".$countyName[0]."</td>\n";
	}
	else
	{
		echo "<td></td>\n";
	}

	if(isset($documentInfo[$b][4]))
	{
		echo "<td>".$documentInfo[$b][4]."</td>\n";
	}
	else
	{
		echo "<td></td>\n";
	}

	if(isset($documentInfo[$b][1]))
	{
		echo "<td>".$documentInfo[$b][1]."</td>\n";
	}
	else
	{
		echo "<td></td>\n";
	}

	if(isset($documentInfo[$b][2]))
	{
		echo "<td>".$documentInfo[$b][2]."</td>\n";
	}
	else
	{
		echo "<td></td>\n";
	}

	if(isset($documentInfo[$b][3]))
	{
		echo "<td>".$documentInfo[$b][3]."</td></tr>\n";
	}
	else
	{
		echo "<td></td>\n";
	}

	$b++;
}
?>
</tbody>
</table>
<table align="center">
<tfoot>
<tr style='display:none;' id="editButtons">	
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="Ok" value="Ok" >
</td>
<td colspan="1" align="center">
<input type="button" onclick="javascript:toggleEdit('editButtons',this)" value="Edit">
</td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
<table align="center" border="0">
<tr>
<td class="empty">
<EMBED src="<?php echo $_SESSION['tempFilePath'];?>" width="1200" height="800" PLUGINSPAGE="http://www.adobe.com/products/acrobat/readstep2.html"></EMBED>
</td>
</tr>
</table>
<?php
HTMLfooter();
?>