Question

I am using jQuery to make an AJAX call. The call is procesed and returns data as expected, but when I use $("#newsLetterForm").html(data); the link address pops OUT of the <a> tags.

The Ajax Request

$.ajax({
    async: true,
    data: $dataToSend,
    datatype: 'html',
    beforeSend: function() {
        $('#newsletterForm').html('<img id="ajaxwait" src="/images/ajaxwait.gif" alt="waiting" />');
    },
    error: function(jqXHR, textStatus) {
        $('#newsletterForm').html("Error: " + textStatus);
    },
    success: function(data, textstatus, jqXHR) {
        $('#newsletterForm').html(data);
    },          
    timeout: 3000,
    type: 'POST',
    url: 'http://myurl.com',            
});

Alert Return Data – notice Support is in the tags

 There was an error processing your request. Please send your request to 
<a href="foo.html" onclick="" onmouseover="" onmouseout="" />Support</a>

Output to Browser – notice that Support is outside of the tags

    There was an error processing your request. Please send your request to 
<a href="foo.html" onclick="" onmouseover="" onmouseout="" /></a>Support

Why is this happening?

Answer 1

Your anchor is being closed twice, or better explained, the opening anchor tag is self closing.
The response from the server should be:

<a href="foo.html" onclick="" onmouseover="" onmouseout="">Support</a>

Notice I used just “>” instead of “/>” before “Support”