Davy Davy - 1 month ago 14
jQuery Question

Loading Partial View from JQuery not showing in MVC

I am having problem getting my partial view to render in ASP.Net MVC 1.0 when I load it with JQuery.

I have a controller like:

public ActionResult Index() {
return View(_invoiceService.FindAllInvoices());
}

public ActionResult InvoiceSearchResults() {
return PartialView("InvoiceSearchResults",_invoiceService.FindAllInvoices());
}


I have an Index View:

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%= Html.Script("/scripts/InvoiceSearch.js") %>

<h2>Search</h2>
<div class="SearchBar">
</div>

<div class="SearchResults"></div>

<p><%= Html.ActionLink("Create New", "Create") %></p>
</asp:Content>


I then have a PartialView:

<table>
<tr>
<th></th>
<th>InvoiceId</th>
<th>InvoiceNo</th>
<th>SupplierId</th>
<th>InvoiceDate</th>
<th>TotalValue</th>
<th>InputDate</th>
<th>PaymentDueDate</th>
<th>InvoiceStatusId</th>
<th>AuthoriserId</th>
</tr>

<% foreach (var item in Model) { %>
<tr>
<td>
<%= Html.ActionLink("Edit", "Edit", new { id=item.InvoiceId }) %> |
<%= Html.ActionLink("Details", "Details", new { id=item.InvoiceId })%>
</td>
<td><%= Html.Encode(item.InvoiceId) %></td>
<td><%= Html.Encode(item.InvoiceNo) %></td>
<td><%= Html.Encode(item.SupplierId) %></td>
<td><%= Html.Encode(String.Format("{0:g}", item.InvoiceDate)) %></td>
<td><%= Html.Encode(String.Format("{0:F}", item.TotalValue)) %></td>
<td><%= Html.Encode(String.Format("{0:g}", item.InputDate)) %></td>
<td><%= Html.Encode(String.Format("{0:g}", item.PaymentDueDate)) %></td>
<td><%= Html.Encode(item.InvoiceStatusId) %></td>
<td><%= Html.Encode(item.AuthoriserId) %></td>
</tr>
<% } %>
</table>


I have some JQuery:

$(document).ready(function() {
$("#InvoiceDropDown").change(function() {
$("#SearchResults").load("/Invoice/InvoiceSearchResults/");
});
});


I've removed some of the code that I know is working to make the question easier to read.

When I click on the my DropDownList it calls the JQuery, goes to my controller and seems to run the partial class but it doesn't render anything.

I've tried evilDonald's answer and the same thing happens so maybe something stupid I've done somewhere?

Any help or general advice here much appreciated.

Answer
$("#SearchResults").load("/Invoice/InvoiceSearchResults/");   

should have been:

$(".SearchResults").load("/Invoice/InvoiceSearchResults/");     

selector issues - couldn't see it for looking at it.

Thanks (EvilDonald - I've voted up your answer)