Page 1 of 1

An ALERT stops SELECT tag from working

Posted: Sat Aug 15, 2009 7:06 pm
by djw86
I ran across a strange situation that I am wondering if anyone has encountered.

I have a screen where the user is selecting a company name from a SELECT tag. When they do, a piece of javascript calls an ajax routine to fill in a DIV with the company's information. The ajax script is just plain PHP that accesses a database, pulls up the company record and echos the data to the screen.

All very straight forward and all working fine. I can keep selecting different companies from the SELECT tag, and the new info gets filled in, as expected.

Then, I went into the ajax code and added some more error checking. If an error is found, I put a message on the screen using an alert box. I do this by putting the message in a $msg variable, and then echoing out a small piece of javascript that uses alert to display the message. Looks like this:

$msg = "Something went wrong";
echo "<script type='text/javascript'>alert('$msg');</script>";

I use this method in lots of places, and I've never noticed a problem with it before (but I guess that doesn't mean there wasn't one!!).

I just noticed that as soon as I do this, my SELECT stops working. When I click on the tag, the selection box does not open, and I cannot select a different item until I leave the page and come back, or refresh the page.

As long as I don't generate an ALERT message, everything works fine. I have checked to make sure that there are no duplicate ID's names anywhere, and have run out of ideas.

Thanks for any help or direction!

Re: An ALERT stops SELECT tag from working

Posted: Sat Aug 15, 2009 11:51 pm
by Christopher
Perhaps post some code.

Re: An ALERT stops SELECT tag from working

Posted: Sun Aug 16, 2009 11:38 am
by JAB Creations
PHP defines variables this way...

Code: Select all

$example = 'stuff';
JavaScript defines variables this way...

Code: Select all

var example = 'stuff';
Be sure to always use var when first defining a variable, however you do not need to use it a second time once it's already define (be it in a function or not).

Re: An ALERT stops SELECT tag from working

Posted: Sun Aug 16, 2009 11:57 am
by VladSun
JAB Creations wrote:PHP defines variables this way...

Code: Select all

$example = 'stuff';
JavaScript defines variables this way...

Code: Select all

var example = 'stuff';
Be sure to always use var when first defining a variable, however you do not need to use it a second time once it's already define (be it in a function or not).
I'm not sure what you are trying to explain, but ...

Both lines will work in JS. The $ symbol is a valid JS variable name symbol (jQuery ;) ).
AFAIR, in JS declaring a variable by using the var declaration makes it a global one while a variable without var declaration exists only in the current scope.

Re: An ALERT stops SELECT tag from working (a FireFox problem!)

Posted: Sun Aug 16, 2009 1:23 pm
by djw86
I apologize for not posting code the first time. I was just trying to see if anyone had run into a similar situation. Apparantly not.

In the process of distilling out a snippet that demonstrates the problem, it occurred to me to test using different browsers. And I have discovered that while I am able to reliably reproduce the problem with a small piece of code, it is only a problem in FireFox (where I do most of my testing so I can use FireBug). I updated to the latest version, and the problem persists.

I will try to report the problem to Mozilla. Have never had much luck doing that sort of thing, but will give it a solid attempt.

If anyone is still interested in seeing the code, here it is.

This first piece is the basic HTML that creates the SELECT tag, creates the DIV for ajax to fill, and contains the JavaScript to call the AJAX script whenever the SELECT changes.

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script type='text/javascript' src='javascript/jquery-1.3.2.min.js'></script>
</head>
<body>
Select an option:
  <select id='selection'>
    <option value=1>Hello 1</option>
    <option value=2>Hello 2</option>
    <option value=3>Hello 3</option>
    <option value=4>Hello 4</option>
    <option value=5>Hello 5</option>
    </select>
  <div id='ajaxWillFillThis'></div>
 
<script type="text/javascript">
$("#selection").change
(
function()
{
var selected = $(this).val();
$("#ajaxWillFillThis").load('ajax_FillThis.php?selected=' + selected);
}
);
</script>
</body>
</html>
 
Here is the AJAX script that either fills the DIV or pops up the alert box:

Code: Select all

 
<?php
$id = $_GET['selected'];
if ($id < 5)
{
echo "You selected option number: $id";
}
else
{
$msg = "Sorry - you selected option number $id";
echo "<script type='text/javascript'>alert('$msg');</script>";
}
?>
 
Of course, knowing that it exclusively a FireFox problem makes it much less interesting (although still annoying).