How to make jQuery work the same in all browsers?

Question

Hi,

I have the following script to post some stuff to the server and write the json result back to the users browser. It doesn't work as expected :(

$(document).ready(function () {
    $('#productForm').ajaxForm({
        dataType: 'json',
        success: function (response) {
            var tmp = '<tr>';
            tmp += '<td><a href="/Invoice/DeleteProduct/' + response.Id +'>Kasta</a></td>';
            tmp += '<td>' + response.Quantity + '</td>';
            tmp += '<td>' + response.UnitPrice + '</td>';
            tmp += '<td>' + response.ProfitRate + '</td>';
            tmp += '<td>' + response.Description + '</td>';
            tmp += '<td>' + response.Total + '</td>';
            tmp += '</tr>';
            $('#productsBody').append(tmp);
            alternateRows();
        },
        clearForm: true,
        resetForm: true,
        timeout: 3000
    });
}); 

In firefox all is well, in chrome the new row doesn't show at all but I some tiny area changes color.

In internet explorer 8 I don't get the link, it treats the link as regular text. I'll go scream some more and hope someone can tell me why it doesn't work when I come back from screaming.

Answer 1

Try changing

tmp += '<td><a href="/Invoice/DeleteProduct/' + response.Id +'>Kasta</a></td>';

to...

tmp += '<td><a href="/Invoice/DeleteProduct/' + response.Id +'">Kasta</a></td>';

Answer 2

This could be a <tbody> issue: Browsers append a tbody to table constructs automatically that you are breaking by what you are doing. Not sure, but you could try wrapping a tbody around the tr and see whether it behaves any better. Maybe somebody else has a different idea.

Other than that, Chrome's "Inspect Element" is your friend: It should be able to tell you what part of the markup gets garbled.

Answer 3

It can't be done. Even if you get it working with all browsers today, it can easily break in tomorrow's browser with the next releases. (Assuming there's a new version of jQuery ready which fixes any possible issues, if not I guess you'd have to wait and just tolerate a broken website.)

The only 100% certain answer is: Don't use JavaScript for serious development if you need a consistent platform, use a VM solution like Silverlight, Flex, or JavaFX. JavaScript/AJAX/DHTML should only be used on non mission-critical stuff which you can afford to have broken for a few days.