Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dropdown not working in IE - good in Firefox

    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....

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

    thanks
    Fastnet

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    can you post your code because we can't really help without it

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the code...

    pet-form.tpl.htm
    Code:
    <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:

    Code:
    <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
    Code:
    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%;
    }

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    where's the javascript that fills the form elements

  • #5
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    isn't strange that it works in Firefox and not IE... !!! I've never got my head around that...

  • #7
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    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

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Arrow Something to try ...

    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/sh...d.php?t=199999

  • #9
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for this...

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

    Bloody IE!!!!

  • #10
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have put the files concerned here if it helps...

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

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #13
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •