jquery ajax work in mozilla, but not IE

Question

I know jquery/ajax in IE is a common problem. There is a lot of great advice here on stack overflow but none of it has worked for me yet. The following code works just fine in firefox, but does not in IE:

$.ajaxSetup({ cache: false })
$.ajax({
 url: 'FunDataService.asmx/' + funDataMethod,
 type: 'POST', dataType: 'html', cache: false, timeout: 3000,
 error: function() {alert('Error updating fun information.  Refresh the page and try again.');},
 success: function(htmlFunInfo) {
  alert($(htmlFunInfo).text());
  $("#fundiv").html($(htmlFunInfo).text())},
 data: parameters
});

You can see my anti-caching attempts; I've also added random values to the URL. I've also tried adding various content headers on the web service:

'        Context.Response.ContentType = "text/html; charset=utf-8"
'        Context.Response.ContentType = "text/html"
Context.Response.ContentType = "text/plain"

The alert command is for debugging of course. In FF, $(htmlFunInfo).text() is the div tags sent down from the server that I wish to insert. In IE, it is empty string.

Does anyone know how to get access to this string value in IE? Thanks!

Edit The response from the server is like:

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="tempuri.org/">
  <div>stuff</div>
  <div>more stuff</div>
</string>

Increasingly I think that is what's wrong, that I need to avoid the wrapping around the divs.

Edit 2 That's it! In my server code, I replaced:

Return RemarkHtml

with

Context.Response.Write(RemarkHtml)

This avoided the tags surrounding the divs, and now I'm good. Still, I think it's a big problem that in IE, you just can't get to the contents of tags using .text().

Thanks guys!

Answer 1

Instead of

alert($(htmlFunInfo).text());
$("#fundiv").html($(htmlFunInfo).text());

Try

alert(htmlFunInfo);
$("#fundiv").html(htmlFunInfo);

The issue is that calls to .text() and .html() get the text and HTML contents of the selected node(s). It looks like what you want to do here is actually inject the entire response into #fundiv.

Answer 2

I dont fully understand why that works in FF and not in IE but I'm guessing it has something to do with differences in how each browsers create the node heiarchy.

In either case, content inside the variable htmlFunInfo is a string so there is no need to call text(). Like Jason says, it should work if you take out the .text().

Answer 3

have you tried changing the jQuery Ajax dataType option to 'text'?

$.ajaxSetup({ cache: false })
$.ajax({
 url: 'FunDataService.asmx/' + funDataMethod,
 type: 'POST', 

 dataType: 'text', // instead of 'html'

 cache: false, 
 timeout: 3000,
 error: function() {
     alert('Error updating fun information.  Refresh the page and try again.');
 },
 success: function(htmlFunInfo) {
    alert($(htmlFunInfo).text());
    $("#fundiv").html($(htmlFunInfo).text())
 },
 data: parameters
});

EDIT:

An alternative would be the jQuery .load() method. It appends the result of an AJAX response to a jQuery selected object. You can probably use ajaxSetup() to configure ajaxOptions for the request.

.load() doc:

http://docs.jquery.com/Ajax/load#urldatacallback

$.ajaxSetup({
 type: 'POST', 
 dataType: 'text', 
 cache: false, 
 timeout: 3000,
 error: function() {
     alert('Error updating fun information.  Refresh the page and try again.');
 },
 data: parameters
});

$("#fundiv").load( 'FunDataService.asmx/' + funDataMethod );