Question

When using jQuery to insert HTML into a div in IE8, IE8 strips the ID tags and certain class names in the HTML.

Here is a sample. I am inserting this code using jQuery (1.6.2)

var oblSomeoneElseHTML = 
'<div id="oblSomeoneElse">' +
'  <h2>Enter the name and email of a person you\'d like<br/>to purchase a registration for:</h2>'+
'<form class="voucher_form" id="voucher_form">'+
'  <div class="inputrow"><label class="l1">Student Alliance Member #:</label> <input type="text" id="customer_id" name="customer_id" class="oblSomeoneElseCustID"/></div><br>'+
'  <div class="inputrow"><label class="l1">Student First Name:<em>*</em></label> <input type="text" id="firstname" name="firstname" class="validate[required] oblSomeoneElseFirstName"/></div><br>'+
'  <div class="inputrow"><label class="l1">Student Last Name:<em>*</em></label> <input type="text" id="lastname" name="lastname" class="validate[required] oblSomeoneElseLastName"/></div><br>'+
'  <div class="inputrow"><label class="l1">Student Date of Birth:<em>*</em></label> <input type="text" id="DOB" name="DOB" class="validate[required,custom[MMDDYYYY]] oblSomeoneElseDOB"/></div><br>'+
'  <div class="inputrow"><label class="l1">Student Email:<em>*</em></label> <input type="text" id="SomeoneElseEmail" name="SomeoneElseEmail" class="validate[required,custom[email] oblSomeoneElseEmail"/></div><br>'+
'  <a href="#" class="btn btncenter oblsomeoneelsenext">Next</a>'+
'  <div class="spinner"><img src="/images/grey_spinner.gif"></div>'+
'</form>'+
'<img src="/images/blank.gif" width="20" height="20" alt="" border="0" style="position: relative; left: 5px; cursor: pointer;" onclick="clearPrompts();">'+
'</div>';

  $('#sm_content .oblcontent').html(oblSomeoneElseHTML);

Now, when I am debugging the validation of the DOB input and view the value of oblSomeoneElseHTML in the Watch window, it shows the ID and the correct class attributes.
I am using validationEngine plugin to validate this form and it REQUIRES the ID tag to work.

<input type="text" id="DOB" name="DOB" class="validate[required,custom[MMDDYYYY]] oblSomeoneElseDOB"/></div>

But, when I debug into the validationEngine code, this, in the _getPrompt() function:

 var className = field.attr("id").replace(":","_") + "formError";

returns this error:

'attr(...)' is null or not an object

When I evaluate the field object, I see no id value and I see only class oblSomeoneElseDOB.

I am at a loss as to what is happening here and why this is only happening in IE8. IE7 and IE9 work perfectly, FF and Chrome and Opera work perfectly, too.

Anyone have any ideas on how to fix this?

Answer 1

Reverted back to using the form already built in the html, not generated through javascript, and everything works now. We did things a little differently but it is working like a charm.