javascript - Empty string passed to getElementById() at query.unobtrusive-ajax.js:16 - Stack Overflow

admin管理员组

文章数量:1431718

I'm developing an ASP.NET MVC4 application and have started using jQuery actionlinks. However when I run the following Razor code (and click the view ticket actionlink) I get a generic jQuery error (twice) saying that an empty string was passed to getElementById(). I have no idea where this error is happening since firefox merely links to the jQuery code. This is my Razor code: (I know the js functions show and hideticket are empty but that is to simplify the code):

<script>
function ShowTicket(id) {
    $("#viewTicketButton" + id).hide();
    $("#hideTicketButton" + id).show();
    $("#viewTicket").show();
}

function HideTicket(id) {
    $("#viewTicketButton" + id).show();
    $("#hideTicketButton" + id).hide();
    $("#viewTicket").hide();
}
</script>

<h3>Your tickets</h3>
<table border="1">
    <tr>
        <td>Title:</td>
        <td>Urgency:</td>
        <td>Status:</td>
    </tr>
    @foreach (SupportTicketViewData t in Model.supportTicketViewDataList)
    {
        <tr>
            <td>@t.title</td>
            <td>@t.text</td>
            <td>@t.status</td>
            <td>@Ajax.ActionLink("View Ticket", "ViewTicket", new { id = t.id },
            new AjaxOptions
            {
                HttpMethod = "GET",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "viewTicket",
                OnComplete = "ShowTicket(" + t.id +");"
            }, new { id = "viewTicket" + t.id })</td>
            <td><button  id="@Html.Raw("HideTicket" + t.id)" onclick="HideTicket(@t.id);">Hide Ticket</button></td>
        </tr>
    }
</table>

<div id="viewTicket">
</div>

Also I get a result from the GET request just fine since it get's inserted into the div element however I get 2 errors when debugging in firefox.

Also when I click the viewTicketButton the button doesn't hide as it should.

I'm developing an ASP.NET MVC4 application and have started using jQuery actionlinks. However when I run the following Razor code (and click the view ticket actionlink) I get a generic jQuery error (twice) saying that an empty string was passed to getElementById(). I have no idea where this error is happening since firefox merely links to the jQuery code. This is my Razor code: (I know the js functions show and hideticket are empty but that is to simplify the code):

<script>
function ShowTicket(id) {
    $("#viewTicketButton" + id).hide();
    $("#hideTicketButton" + id).show();
    $("#viewTicket").show();
}

function HideTicket(id) {
    $("#viewTicketButton" + id).show();
    $("#hideTicketButton" + id).hide();
    $("#viewTicket").hide();
}
</script>

<h3>Your tickets</h3>
<table border="1">
    <tr>
        <td>Title:</td>
        <td>Urgency:</td>
        <td>Status:</td>
    </tr>
    @foreach (SupportTicketViewData t in Model.supportTicketViewDataList)
    {
        <tr>
            <td>@t.title</td>
            <td>@t.text</td>
            <td>@t.status</td>
            <td>@Ajax.ActionLink("View Ticket", "ViewTicket", new { id = t.id },
            new AjaxOptions
            {
                HttpMethod = "GET",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "viewTicket",
                OnComplete = "ShowTicket(" + t.id +");"
            }, new { id = "viewTicket" + t.id })</td>
            <td><button  id="@Html.Raw("HideTicket" + t.id)" onclick="HideTicket(@t.id);">Hide Ticket</button></td>
        </tr>
    }
</table>

<div id="viewTicket">
</div>

Also I get a result from the GET request just fine since it get's inserted into the div element however I get 2 errors when debugging in firefox.

Also when I click the viewTicketButton the button doesn't hide as it should.

• javascript
• jquery
• ajax
• asp-mvc
• razor

Share Improve this question Follow edited Jul 30, 2013 at 13:57 Jordan Axe asked Jul 30, 2013 at 13:15 Jordan AxeJordan Axe 3,92366 gold badges2222 silver badges2727 bronze badges 2

• have you got the JS Code as the error is likely in there? – Trotts Commented Jul 30, 2013 at 13:20
• @Trotts Well the thing is that I still get the errors even with empty functions so I imagined that it cant be them. However I've updated the question with the JS code as well. – Jordan Axe Commented Jul 30, 2013 at 13:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Warnings 'Empty string passed to getElementById()' occurs when sending form created via Ajax.BeginForm or Ajax.ActionLink with unobtrusive validation turned on.
In my case adding handlers to all events supported by Ajax.BeginForm fixed issue with warnings:

@using (Ajax.BeginForm(“SomeAction”, null, new AjaxOptions() {
  OnBegin = “someFunction”,  
  OnComplete = “ShowTicket”,  
  OnFailure = “someFunction”,  
  OnSuccess = “someFunction”  
} 
....

I believe that this should fix your issue.
More details about issue on my blog post.

I believe you cannot simply do

OnComplete = "ShowTicket(" + t.id +");"

The argument must be a javascript function. If what you want to call is parameterless, you can do

OnComplete = "ShowTicket"

where show ticket is the function object, so this is fine. In your case however, you've got to pass the ID to ShowTicket. Try the following:

OnComplete = "function() { ShowTicket(" + t.id +"); }"

You will likely have to add the slashes to pensate for the double quotes that you need in the id tag eg:

Html.Raw("id=\"SomeIdString\"")

本文标签： javascriptEmpty string passed to getElementById() at queryunobtrusiveajaxjs16Stack Overflow