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



Question:

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.


Solution: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>';  


Solution: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.


Solution: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.


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