I'm using Microsoft Ajax to dynamically populate a list of contacts, given a json packet. My code is as follows:
function fillContactsFromData(contacts) {
// this is just for debug to let me know that the data is correct
if (contacts.length > 0) {
alert('ID: ' + contacts[0].ID + ', Name: ' + contacts[0].Name);
}
$create(Sys.UI.DataView, { data: contacts }, null, null, $get('contacts'));
}
The associated html is as follows:
<div id="contacts" class="sys-template">
<a onclick="removeContact('{{ ID }}');"><img src="remove.png" /></a>
<a class="contact" rel="/Contacts/Index/{{ ID }}">{{ Name }}</a><br />
</div>
The first <a> tag is used to fire a script to remove the contact, while the second uses the jQuery cluetip to bring up a box on hover (details skipped here).
The problem I am having is that the HTML is not being rendered correctly. What is being generated is:
<div id="contacts">
<a><img src="remove.png" /></a>
<a class="contact" rel="/Contacts/Index/{{ ID }}">Darren Oster</a><br />
</div>
The alert box indicates data with valid ID (a Guid) and Name ("Darren Oster"). The Name is being rendered correctly, but the ID field is not rendered in the 'rel' attribute, and the 'onclick' statement is removed entirely.
Is this a limitation of MS Ajax or am I doing something incorrectly?
Thanks in advance.