Tutorial :How to make jQuery work the same in all browsers?


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.


Try changing

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


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


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.


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.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »