...

View Full Version : Dropdown not working in IE - good in Firefox



fastnet
01-18-2009, 04:32 PM
Hi all...

I hope someone can help.

We have a quote ajax form that works in Firefox (the dropdown values can be seen), but doesn't in IE.

See - http://www.villagevetinsurance.co.uk/quote_engine/

The problem is with step 2 of the process.

On step 1 - just put in a post code (i.e. sw7 2rl)... then click 'Go to step 2'.

On step 2 - click the 'Cat' or 'Dog' radio buttons.
In Firefox choosing between the 2 radio buttons, changes the 'Pet breed' - (either cat breeds or dog breeds) that populates the dropdown (which come from a MySQL database).

I'm hoping it is a good old Microsoft IE CSS issue.... :confused:

Any advice or even a solution would be very much appreciated.

thanks
Fastnet

ninnypants
01-18-2009, 05:18 PM
can you post your code because we can't really help without it

fastnet
01-18-2009, 05:31 PM
Here's the code...

pet-form.tpl.htm

<div id="pet_form{$i$}" class="pet_form">

<div>
<div class="left2 fl">Pet name:</div>
<div class="right fl"><input type="text" id="txtPetName{$i$}" value="" /></div>
<div class="clearing">&nbsp;</div>
</div>

<div>
<div class="left2 fl">Pet type:</div>
<div class="right fl">
<input type="radio" name="petType{$i$}" id="rdPetTypeCat{$i$}" value="0" /> <label for="rdPetTypeCat{$i$}">Cat</label>
| <input type="radio" name="petType{$i$}" id="rdPetTypeDog{$i$}" value="1" /> <label for="rdPetTypeDog{$i$}">Dog</label>
</div>
<div class="clearing">&nbsp;</div>
</div>

<div>
<div class="left2 fl">Pet breed:</div>
<div class="right fl">
<select id="selBreed{$i$}">
<option value="">please select pet type...</option>
</select>
</div>
<div class="clearing">&nbsp;</div>
</div>

<div style="display: none;">
<!--
Leave it here but make invisible. This allows us not to complicate things further. -->
<div class="left2 fl">Large pet?:</div>
<div class="right fl">
<input type="radio" name="petLarge{$i$}" id="rdPetLargeY{$i$}" value="0" /> <label for="rdPetLargeY{$i$}">Yes</label>
| <input type="radio" checked="true" name="petLarge{$i$}" id="rdPetLargeN{$i$}" value="1" /> <label for="rdPetargeN{$i$}">No</label>
</div>
<div class="clearing">&nbsp;</div>
</div>

<div>
<div class="left2 fl">Date of birth:</div>
<div class="right fl">
<input type="text" id="txtPetDob{$i$}" /><br/>
<select id="selDobExact{$i$}">
<option value="exact">Exact DOB</option>
<option value="approx">Approx DOB</option>
</select>
</div>
<div class="clearing">&nbsp;</div>
</div>

<div class="clearing">&nbsp;</div>

</div>

The above code is pulled into the index.html in the following area:


<div id="frmStep2">
<div id="tabsStep2" class="usual">
<ul />
</div>
<input type="button" value="Go back to step 1" id="btnStep2back" class="button" />
<input type="button" value="Go to step 3" id="btnStep2" class="button" />
<div>
<p><strong>DOGS EXCLUDED FROM COVER</strong></p>
<p>Any dogs used for trade or business <br>
American Bandogge/Bandogge Mastiff<br>
American Pit Bull Terriers/ Pit Bull Terriers/ Pit Bull Mastiff<br>
American/Irish Staffordshire Bull Terriers <br>
Canary Dogs/Perro De Pressa Canarios/Presa Cancarios<br>
Cane Corsos<br>
Czechoslovakian Wolfdogs/Sarlooswolfhounds/ Wolf Hybrids<br>
Dogo Argentoninos/ Argentine Dogos <br>
Fila Brasileros/ Dogue Brasileros <br>
Japanese Tosas/ Tosa Inus <br>
Korean Jindo <br>
Northern Inuit Dogs <br>
Racing Greyhounds<br>
Shar Peis <br>
Utonagan</p>
<p>Any dogs listed in the Dangerous Dogs Act 1991</p>
<p>All others: Excluded from cover as a result of consultation with &quot;our vets and their recommendations, our own research into the&quot;, breeds and our previous claims experience with such breeds</p>
</div>
</div>

CSS

body, div {
font-family: arial, serif;
font-size: 10pt;
color: #b20075;
}
body {
background-color: white;
margin: 10px;
padding: 10px;
}

/*
*
* TABS
*
*/

/* Style for Usual tabs */
.usual {
background: #C64098;
color: #111;
padding: 15px 20px;
width: 700px;
border: 1px solid #222;
margin: 8px auto;
}

.usual li { list-style:none; float:left; }
.usual ul a {
display:block;
padding:6px 10px;
text-decoration:none!important;
margin:1px;
margin-left:0;
color:#FFF;
background:#444;
}
.usual ul a:hover {
color:#FFF;
background:#111;
}
.usual ul a.selected {
margin-bottom:0;
color:#000;
background:snow;
border-bottom:1px solid snow;
cursor:default;
}
.usual > div {
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-15px;
clear:left;
background: #e7ded6;
}
.usual div a { color:#000; font-weight:bold; }

.tab {
background-color: #e7ded6;
padding:10px 10px 8px 10px;
*padding-top: 10px;
*margin-top:-17px;
clear:left;
background: #e7ded6;
}

/*
*
* GENERAL
*
*/

.pet_form {
clear: none !important;
}

.left {
text-align: right;
width: 200px;
padding-right: 5px;
}
.left2 {
clear: none !important;
text-align: right;
width: 270px;
padding-right: 5px;
}
.leftShort {
text-align: right;
width: 110px;
padding-right: 5px;
}
.right {
width: 150px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearing {
clear: both !important;
font-size: 1px;
height: 1px;
}

li.li_ol {
list-style: decimal;
float: none;
}

.full_width {
padding-top: 10px;
padding-bottom: 10px;
font-family: arial, serif;
font-size: 10pt;
color: #b20075;
}

.leftColumn {
float:left;
width: 460px;
padding: 10px 10px 10px 10px;
}

.button {
background-color: #C64098;
border:1px solid #000000;
color:#FFFFFF;
font-family: arial;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
}

#logotype {
padding-right: 10px;
}

#topLeft {
width: 50%;
}
.width49percent {
width: 49%;
}

ninnypants
01-18-2009, 05:39 PM
where's the javascript that fills the form elements

fastnet
01-18-2009, 06:30 PM
The Javascript is in the index.html file in the head.

Being a new poster, I can't create links - so I have put the file here:

fastnethosts.co.uk/index.zip (with www)

thanks

fastnet
01-18-2009, 06:51 PM
isn't strange that it works in Firefox and not IE... !!! I've never got my head around that...

ninnypants
01-19-2009, 12:51 AM
not really firefox is the better browser and supports standards and such much better than IE.

I can't really see any problems with your code my may want to try posting in one of the javascript framework forums

jmrker
01-19-2009, 12:58 AM
I don't know if this will solve your problem, but it solved mine.
I had a similar problem where FF worked fine but MSIE did not, and neither reported any errors.

It was recommended that I put in a <!DOCTYPE ..... > tag.
Then everything worked great for both browsers.

Like I said, don't know if it will work for you but might be worth a try.
See: http://www.webdeveloper.com/forum/showthread.php?t=199999

fastnet
01-19-2009, 10:20 AM
Thanks for this...

Tried putting in the doctype and still doesn't work...

Bloody IE!!!!

fastnet
01-19-2009, 04:15 PM
I have put the files concerned here if it helps...

fastnethosts.co.uk/files.zip (with www)

abduraooft
01-19-2009, 04:30 PM
Could you post some relevant parts of your code? ie the script that changes the drop down options? I think your are using the non-standard innerHTML method to change the options of your drop-down, which is buggy in IE. Your files.zip has no javascript files in it.

fastnet
01-19-2009, 04:52 PM
Hi abduraooft

I have replaced the zip on our server with one that contains the Javascript.

fastnethosts.co.uk/files.zip (with www)

The post won't let me paste all the code - to many characters for a newby.

thanks
fastnet

fastnet
01-20-2009, 07:32 PM
It's been hinted to me that the following code could be causing the problem for the dropdown to work in Firefox and not work in IE:


function pet_type_change_handler()
{
for (var j = 0; j < numberOfPets; j++)
if ( $("#tab" + j).css("display") == "block" )
{
$("#selBreed" + j).attr("options").length = 0;
// add "please select" option...
$("<option/>").attr("value","").attr("text"," - please select").appendTo("#selBreed" + j);
if ($("#rdPetTypeCat" + j).attr("checked") == true)
{
// dealing with cats...
for ( var i=0; i<__cats.length; i++ )
$("<option/>").attr("value",__cats[i].id).attr("text",__cats[i].name).appendTo("#selBreed" + j);
}
else if ($("#rdPetTypeDog" + j).attr("checked") == true)
{
// dealing with dogs...
for ( var i=0; i<__dogs.length; i++ )
$("<option/>").attr("value",__dogs[i].id).attr("text",__dogs[i].name).appendTo("#selBreed" + j);
}
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum