CODEWITHSUNDEEP
.netajaxjquery
Patrick Karcher
Patrick Karcher

Reputation: 23613

jquery ajax work in mozilla, but not IE

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!

Upvotes: 3

Views: 1704

Answers (3)

Taka
Taka

Reputation: 33

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().

Upvotes: 1

am9u
am9u

Reputation: 119

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 );

Upvotes: 2

JasonWyatt
JasonWyatt

Reputation: 5303

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.

Upvotes: 5

Related Questions