New lines in MVC partial view causing problems in firefox 5.0 / jQuery 1.6.2

I have a simple table that is rendered in an MVC partial view and returned to the client via a jQuery ajax call.

Here's what a simplified version of what the success callback looks like:

f开发者_运维问答unction (html, status, xhr)
{
 html = $(html); //Get html table as a jQuery object
 var tblClass = html.attr("class");
}

Now in IE9 I get get the table class no problem. In FF5 it fails. I debugged in Firebug and found that there is a "\r\n" before the <table> tag in the html string being returned. This isn't really surprising because there is a blank line above the <table> tag in my partial view for readability.

When html = $(html); is run, instead of getting a jQuery object w/ a single table element in it I found that I have 2 elements in the jQuery object.

Element [0] shows up in FireBug as:

<TextNode textContent=";\n">

Element [1] is my table and this is causing the problem. What I would expect is what I'm getting in IE9 which is a jQuery object only containing a single element (the table). I don't know why whitespace is being converted into <TextNode textContent=";\n">

Here's my view:

@model IDataPage<EssenceNet.Domain.Transforms.EssenceResult>

<table class="csGrid">
    <tr>
        <th data-sort="Name" class='a' style="min-width:50px"><a></a>Name</th>
        <th data-sort="EssenceTypeID" style="min-width:50px"><a></a>Type</th>
        <th style="width:100%">Description</th>
    </tr>
    @foreach (var r in Model.Items)
    {
        <tr data-id="@r.EssenceID">
            <td style="color:#265E15">@r.Name</td>
            <td>@r.Type</td>
            <td>@r.Description.MaxLength(100)</td>
        </tr>
    }
    @Html.WritePagerRow(Model);
</table>

And here's the ajax call (I've tried it several different ways) all w/ the same results:

$.ajax({
                url: url,
                type: 'POST',
                returnType: 'html',
                data: JSON.stringify(data),
                contentType:'application/json',
                success: successFunc
            });

Any ideas why this is happening and what to do about it?

Thanks for any help.

Your problem is the semi-colon after:

@Html.WritePagerRow(Model);

If you look closely in Visual Studio, you'll see that the semi-colon doesn't have a light gray background but a white one. That means it is regarded as HTML code, not as C# code.

Remove the semi-colon and your problem will be gone.

make sure while making ajax request dataType=html

or

you may do $(html).find('TextNode').remove().end()

or

show us ur view and ajax options

Edit 1

in this line @Html.WritePagerRow(Model); , try removing semicolon

Edit 2

I thing i would like to suggest, while using ajax when you get some unexpected result the best thing is to do is

a> look ur response in firebug(which most ppl usually do)

b> Also see ur response by typing url directly into browser. (this solves many problems)

I wouldn't say that whitespace is the issue, but more likely the ; character before the new line?

Wrap the return in a and turn the whole thing into a jQuery object.