jQuery .ajax problem

jQuery .ajax problem


Oh boy is this a doozy.

I have a <div> on a page that needs to have it's text updated as a result of a ajax all to the server.

  1. $('#reportDiv').text(ReturnUnidentfiedItems());

ReturnUnidentifiedItems() makes an ajax call back to the server to get a formatted (html) list of Items.

There are 2 problems with this code.

Here is the code. Note the comments I have added after the alert() calls.

  1.   function ReturnUnidentfiedItems() {

                var x = '';
                $.ajax({
                    url: '/Search/ReturnUnidentfiedItems/',
                    type: 'POST',
                    dataType: 'text',
                    success: function (r) {
                        alert(r); // outputs correct value
                        x = r;
                        alert(x); // outputs correct value

                    }
                });
                alert('>' + x + '<');  // outputs nothing >< 

                return x; // This returns correct value
            }


















The first problem is that the last of those alerts, outputs nothing. As if x has no value. Curious as a value IS returned to the div.

To make matters worse, if I take the alerts out, nothing is returned from the function.  What ???

The next major problem with this is that the HTML that i am returning from the ajax call, is encoded. So am getting this type of thing..

  1. &lt;div id='ResultList'&gt;&lt;table class='ItemTable'&gt;&lt;tr&gt;&lt;td&gt;

This is so messed up and I have been trying for hours on both issues.