I made a certain piece of functionality which works perfectly on Chrome, but not on IE or Firefox. And the problem, it seems, is in jQuery compatibility.
For example, if you go to this page: http://www.problemio.com and click and any link named “important” it will present you with a login dialog. Since you do not have an account, it click on create profile. Once you fill out the create-profile form and press submit, in Chrome it works, but in IE or Firefox, it just refreshes everything and does nothing.
I am importing these jQuery libraries:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.problemio.com/js/problemio.js"></script>
Here is the jQuery code for the create-profile form submit:
$('#create_account_form').live('submit',function()
{
// Showing the wait image
$("#loading").show();
// First set all the validation error divs to not display
$('#create_profile_error').hide();
$('#create_profile_bottom_error').hide();
$('#first_name_error').hide();
$('#email_error').hide();
$('#email_confirm_error').hide();
$('#password_error').hide();
$('#password_confirm_error').hide();
$('#terms_and_conditions_error').hide();
$('#zip_error').hide();
$('#country_error').hide();
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var password = $("#create_pass").val();
var pass_confirm = $("#user_pass_check").val();
var user_email = $("#user_email").val();
var user_email_confirm = $("#user_email_confirm").val();
var zip = $("#zip").val();
var country = $("#country").val();
var dataString = 'first_name='+ first_name + '&last_name=' + last_name + '&user_pass=' + password + '&user_pass_check=' + pass_confirm + '&user_email=' + user_email + '&user_email_confirm=' + user_email_confirm + '&zip=' + zip + '&country=' + country + '&terms_and_conditions=' + terms_and_conditions;
var validation_errors = false;
//alert ("Data string " + dataString);
// Validate and check if they are empty
if( !first_name )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#first_name_error').show();
}
if( !user_email )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#email_error').show();
}
if( !user_email_confirm )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#email_confirm_error').show();
}
if( !password )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#password_error').show();
}
if( !pass_confirm )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#password_confirm_error').show();
}
if ( password != pass_confirm )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#password_confirm_error').show();
}
if ( password.length < 5 )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#password_confirm_error').show();
}
if( !zip )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#zip_error').show();
}
if( !country || country.indexOf("---") != -1 )
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#country_error').show();
}
if ($('#terms_and_conditions').attr('checked'))
{
// alert ("CHECKKEED");
// Not sure what to do here yet :)
}
else
{
validation_errors = true;
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
$('#terms_and_conditions_error').show();
}
if ( validation_errors )
{
// Not sure what to do here yet :)
}
else
{
// Lets call the AJAX to create the account!!
$.ajax({
type: "POST",
url: "/auth/create_profile_ajax.php",
data: dataString ,
success: function(data)
{
// Showing the wait image
$("#loading").hide();
if ( data.indexOf("Error") !=-1)
{
$('#create_profile_error').html(data);
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
}
else
{
$("#createprofilepopup").dialog( 'close' );
$("<span class='success'>You have successfully created an account and are now logged in. Just close this window and resume what you were doing.</span>").dialog();
}
},
error: function(data)
{
// Showing the wait image
$("#loading").hide();
$('#create_profile_error').html("<p>Server error while creating your profile. Please let us know about this.</p>");
$('#create_profile_error').show();
$('#create_profile_bottom_error').show();
}
});
} // End of validation checking else statement.
return false;
});
and here is the HTML for the form:
<div>
<form id="create_account_form" method="post" >
<p><center><h3>Create Profile | Have an account? <a class="regular_link" id="login" href="#">Log In</a></h3></center>
</p>
<p id="create_profile_error" style="display:none;">
<span class="error">Error creating profile. Check below for errors</span>
</p>
<p>
<label for="name"><span>First Name:</span></label> <input type="text" id="first_name" name="first_name" />
<br />(To use a nickname instead of your name, enter it in the first name field and leave the last name blank)
</p>
<p id="first_name_error" style="display:none;">
<span class="error">First name can not be empty</span>
</p>
<p>
<label for="name"><span>Last Name (Optional): </span></label> <input type="text" id="last_name" name="last_name"/>
</p>
<p>
<label for="name"><span>E-mail (Will be your login):</span></label> <input type="email" id="user_email" name="user_email" />
</p>
<p id="email_error" style="display:none;">
<span class="error">Email field can not be empty</span>
</p>
<p>
<label for="name"><span>E-mail Confirm:</span></label> <input type="email" id="user_email_confirm" name="user_email_confirm" />
</p>
<p id="email_confirm_error" style="display:none;">
<span class="error">Email confirm field can not be empty and same as the email field</span>
</p>
<p>
<label for="name"><span>Password (5+ Characters):</span></label> <input type="password" id="create_pass" name="user_pass" >
</p>
<p id="password_error" style="display:none;">
<span class="error">The password must be at least 5 characters.</span>
</p>
<p>
<label for="name"><span>Password Confirm:</span></label> <input type="password" id="user_pass_check" name="user_pass_check">
</p>
<p id="password_confirm_error" style="display:none;">
<span class="error">The passwords must match and be at least 5 characters</span>
</p>
<p>
<label for="name"><span>Postal Code:</span></label> <input type="text" id="zip" name="zip" />
</p>
<p id="zip_error" style="display:none;">
<span class="error">Zip code can not be empty</span>
</p>
<p>
<label for="name"><span>Country:</span></label>
<select id="country" name="country" style="width:150px;">
<option value="">---</option>
<option value="United States" <?php if ( $country == 'United States' ) {echo 'selected';} ?>>United States</option>
<option value="Canada" <?php if ( $country == 'Canada' ) {echo 'selected';} ?>>Canada</option>
<option value="United Kingdom" <?php if ( $country == 'United Kingdom' ) {echo 'selected';} ?>>United Kingdom</option>
<option value="Ireland" <?php if ( $country == 'Ireland' ) {echo 'selected';} ?>>Ireland</option>
<option value="Australia" <?php if ( $country == 'Australia' ) {echo 'selected';} ?>>Australia</option>
<option value="New Zealand" <?php if ( $country == 'New Zealand' ) {echo 'selected';} ?>>New Zealand</option>
<option value="null" >-------------------</option>
<option value="Afghanistan" <?php if ( $country == 'Afghanistan' ) {echo 'selected';} ?>>Afghanistan</option>
<option value="Albania" <?php if ( $country == 'Albania' ) {echo 'selected';} ?>>Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium" <?php if ( $country == 'Belgium' ) {echo 'selected';} ?>>Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
<option value="Brunei Darussalam">Brunei Darussalam</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile" <?php if ( $country == 'Chile' ) {echo 'selected';} ?>>Chile</option>
<option value="China" <?php if ( $country == 'China' ) {echo 'selected';} ?>>China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica" <?php if ( $country == 'Costa Rica' ) {echo 'selected';} ?>>Costa Rica</option>
<option value="Cote Divoire">Cote Divoire</option>
<option value="Croatia" <?php if ( $country == 'Croatia' ) {echo 'selected';} ?>>Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus" <?php if ( $country == 'Cyprus' ) {echo 'selected';} ?>>Cyprus</option>
<option value="Czech Republic" <?php if ( $country == 'Czech Republic' ) {echo 'selected';} ?>>Czech Republic</option>
<option value="Denmark" <?php if ( $country == 'Denmark' ) {echo 'selected';} ?>>Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt" <?php if ( $country == 'Egypt' ) {echo 'selected';} ?>>Egypt</option>
<option value="El Salvador" <?php if ( $country == 'El Salvador' ) {echo 'selected';} ?>>El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia" <?php if ( $country == 'Estonia' ) {echo 'selected';} ?>>Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland" <?php if ( $country == 'Finland' ) {echo 'selected';} ?>>Finland</option>
<option value="France" <?php if ( $country == 'France' ) {echo 'selected';} ?>>France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Territories">French Southern Territories</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany" <?php if ( $country == 'Germany' ) {echo 'selected';} ?>>Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece" <?php if ( $country == 'Greece' ) {echo 'selected';} ?>>Greece</option>
<option value="Greenland" <?php if ( $country == 'Greenland' ) {echo 'selected';} ?>>Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-bissau">Guinea-bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland" <?php if ( $country == 'Iceland' ) {echo 'selected';} ?>>Iceland</option>
<option value="India" <?php if ( $country == 'India' ) {echo 'selected';} ?>>India</option>
<option value="Indonesia" <?php if ( $country == 'Indonesia' ) {echo 'selected';} ?>>Indonesia</option>
<option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
<option value="Iraq">Iraq</option>
<option value="Ireland" <?php if ( $country == 'Ireland' ) {echo 'selected';} ?>>Ireland</option>
<option value="Israel" <?php if ( $country == 'Israel' ) {echo 'selected';} ?>>Israel</option>
<option value="Italy" <?php if ( $country == 'Italy' ) {echo 'selected';} ?>>Italy</option>
<option value="Jamaica" <?php if ( $country == 'Jamaica' ) {echo 'selected';} ?>>Jamaica</option>
<option value="Japan" <?php if ( $country == 'Japan' ) {echo 'selected';} ?>>Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea, Democratic Peoples Republic of">Korea, Democratic Peoples Republic of</option>
<option value="Korea, Republic of">Korea, Republic of</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Lao Peoples Democratic Republic">Lao Peoples Democratic Republic</option>
<option value="Latvia" <?php if ( $country == 'Latvia' ) {echo 'selected';} ?>>Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macao">Macao</option>
<option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico" <?php if ( $country == 'Mexico' ) {echo 'selected';} ?>>Mexico</option>
<option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
<option value="Moldova, Republic of">Moldova, Republic of</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands" <?php if ( $country == 'Netherlands' ) {echo 'selected';} ?>>Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Norway" <?php if ( $country == 'Norway' ) {echo 'selected';} ?>>Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay" <?php if ( $country == 'Paraguay' ) {echo 'selected';} ?>>Paraguay</option>
<option value="Peru" <?php if ( $country == 'Peru' ) {echo 'selected';} ?>>Peru</option>
<option value="Philippines" <?php if ( $country == 'Philippines' ) {echo 'selected';} ?>>Philippines</option>
<option value="Pitcairn">Pitcairn</option>
<option value="Poland" <?php if ( $country == 'Poland' ) {echo 'selected';} ?>>Poland</option>
<option value="Portugal" <?php if ( $country == 'Portugal' ) {echo 'selected';} ?>>Portugal</option>
<option value="Puerto Rico" <?php if ( $country == 'Puerto Rico' ) {echo 'selected';} ?>>Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Romania" <?php if ( $country == 'Romania' ) {echo 'selected';} ?>>Romania</option>
<option value="Russian Federation" <?php if ( $country == 'Russian Federation' ) {echo 'selected';} ?>>Russian Federation</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Helena">Saint Helena</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
<option value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia and Montenegro">Serbia and Montenegro</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia" <?php if ( $country == 'Slovakia' ) {echo 'selected';} ?>>Slovakia</option>
<option value="Slovenia" <?php if ( $country == 'Slovenia' ) {echo 'selected';} ?>>Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Georgia and The South Sandwich Islands">South Georgia and The South Sandwich Islands</option>
<option value="Spain" <?php if ( $country == 'Spain' ) {echo 'selected';} ?>>Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland" <?php if ( $country == 'Switzerland' ) {echo 'selected';} ?>>Switzerland</option>
<option value="Syrian Arab Republic">Syrian Arab Republic</option>
<option value="Taiwan, Province of China">Taiwan, Province of China</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
<option value="Thailand">Thailand</option>
<option value="Timor-leste">Timor-leste</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey" <?php if ( $country == 'Turkey' ) {echo 'selected';} ?>>Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine" <?php if ( $country == 'Ukraine' ) {echo 'selected';} ?>>Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela" <?php if ( $country == 'Venezuela' ) {echo 'selected';} ?>>Venezuela</option>
<option value="Viet Nam">Viet Nam</option>
<option value="Virgin Islands, British">Virgin Islands, British</option>
<option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</p>
<p id="country_error" style="display:none;">
<span class="error">The country field must be set</span>
</p>
<?php
// echo '</p>
// <hr />
// <p>
// <strong>Optional:</strong>
// </p>
// <p>
// Little bit about you. Make your profile more personable and tell other members where and how you like to hike:
// </p>
// <p>';
?>
<!-- <textarea name="bio_blurb" cols=60 rows=6 ><?php echo $_POST['bio_blurb']; ?></textarea> -->
<!--
<p>
<label for="name"><span>Are you human: 4 + 7 = </span></label> <input type="text" name="captcha" />
</p>
-->
</p>
<p><INPUT TYPE=CHECKBOX id="terms_and_conditions" NAME="terms_and_conditions" /> I agree that Problemio.com is not responsible or liable for anything that happens during any of the projects started on the site.</p>
<p>
<p id="terms_and_conditions_error" style="display:none;">
<span class="error">You must agree to the terms and conditions</span>
</p>
<input type="submit" class="button" value="Create Profile" />
</p>
</form>
</div>
If anyone knows why this does not work in IE, please help!! 🙂 Its a bug that was discovered on the live site, and people are not able to make accounts if they are on IE.
Well, you’re getting 3 errors in the Firebug console:
The last one is a problem in problemio.js on line 699.
Stop those errors and it might work…