Updating DOM element with AJAX return data fails in jQuery

Question

I'm doing a simple AJAX post request in jQuery to another page on my site to get an XML document response. I'm putting the response into a pre element with syntax highlighting enabled. The response comes through fine (I can alert it), but it isn't being added to thepre element when I attempt to assign it in the handlResponse function with jQuery.

<head>
<script>
   ...
   function handleResponse(response, status)
   {
      $("#output").text(response);
   }
   $.post(url, data, handleResponse, "text");
   ...
</script>
</head>

...

<pre id="output">
</pre>

Just to be clear, the javascript code above is in jQuery's document ready function. Any help would definitely be appreciated.

By the way, if I had to guess one thing, it would be changing the callback to handleResponse(), but I always get messed up on when to use the () and when to leave them out in js, so I always end up doing the wrong one first... — Anthony
– Anthony, Commented Oct 8, 2009 at 20:17
Can you give us a sample of what the response text might be? I've just run a mock of this in jsbin.com and it works fine for my example — dano
– dano, Commented Oct 8, 2009 at 20:21
Sorry all, the issue was unfortunately unrelated to jquery and ajax. see my answer below. I have to wait a few days to accept it, so sorry for the confusion. — localshred
– localshred, Commented Oct 8, 2009 at 20:30

Anthony · Accepted Answer · 2009-10-08 20:08:45Z

1

Three things:

Is the response being passed correctly? Check by doing alert of response from within the function itself.
Is the function being called correctly? Check by having it do an alert unrelated to the response variable (alert("Yo!")).
Is the text being inserted correctly? I can tell it should work, but for sake of full debug, add a ternary like this:
```
var preText = (response != "") ? response : "The problem is with the reponse";
```

answered Oct 8, 2009 at 20:08

Anthony

37.2k26 gold badges103 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

localshred Over a year ago

I didn't add my debugging in the question above, but i've done string alerts as well as alerting the response, and both work fine.

Anthony Over a year ago

Within the function itself? That part is key. The function is getting called and likes the variable, etc....

Anthony Over a year ago

And you can set something else inside the text() does it show up the way the response is not?

Anthony Over a year ago

Oh, and just for giggles, try adding this after the text is set to response... alert($("#output").text()); If it still shows the response, maybe the problem is just something CRAZY, like the pre is hidden.

Josh Stodola · Accepted Answer · 2009-10-08 20:24:45Z

1

Try using html instead of text...

$("#output").html(response);

EDIT: If you think escaping is the issue, the following should escape it well enough to display...

response = response.replace(/</g, "&lt;");
$("#output").html(response);

edited Oct 8, 2009 at 20:24

answered Oct 8, 2009 at 20:02

Josh Stodola

82.8k48 gold badges187 silver badges229 bronze badges

2 Comments

localshred Over a year ago

The problem is that I need to escape the response, as it is XML and would be improperly added to the pre element.

localshred Over a year ago

And just to ensure I'm not crazy, I tried that, and it also does not work.

localshred · Accepted Answer · 2009-10-08 20:28:49Z

0

Apparently this is a bad question. I'm using the javascript lib SyntaxHighlighter and had preloaded the syntax highlighting on the pre tag I was attempting to use. My solution was to remove the tag and dynamically create it when the ajax response comes in. This worked well other than the fact that I'm trying to determine how to load the highlighting on a dynamically appended dom element.

Thanks for the responses.

answered Oct 8, 2009 at 20:28

localshred

2,2431 gold badge21 silver badges33 bronze badges

Collectives™ on Stack Overflow

Updating DOM element with AJAX return data fails in jQuery

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related