How to fill an empty <div> with a partial view using ajax - ajax

Question

I am using Visual Studio 2013, .Net 4.5, MVC and Visual Basic. I am trying to render a partial view in an empty div of another view using jQuery and Ajax. My script is running successfully in that on the drop down list change, my partial view is rendered, but instead of it rendering in a div on the same view, it renders on it's own page.
Main View:
<div class="col-md-8">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle btn-sm" type="button" id="dropDownSelectBuilding" data-toggle="dropdown"
aria-expanded="true">
<span class="selection"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labeledby="dropDownSelectBuilding">
#For Each item In Model
Dim currentItem = item
#<li role="presentation"><a role="menuitem" tabindex="-1" href="/LocationSelect/SelectFloor"
>#Html.DisplayFor(Function(modelItem) currentItem)</a></li>
Next
</ul>
</div>
#section Scripts
<script>
$('#dropDownSelectBuilding').onChange(function () {
$.ajax({
url: '/LocationSelect/SelectFloor',
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html'
})
.success(function (result) {
$('#showFloors').html(result);
})
.error(function (xhr, status) {
alert(status);
})
});
</script>
End Section
</div>
</div>
<div class="row" id="showFloors">
</div>
Partial View:
<div class="col-md-4">
<label>*Select the floor this item will move to:</label>
</div>
<div class="col-md-8">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle btn-sm" type="button" id="dropDownSelectFloorMoveTo" data-toggle="dropdown" aria-expanded="true">
<span class="selection"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labeledby="dropDownSelectFloorMoveTo">
#For Each item In Model
Dim currentItem = item
#<li role="presentation"><a role="menuitem" tabindex="-1" href="/LocationSelect/SelectFloor"
>#Html.DisplayFor(Function(modelItem) currentItem)</a>
</li>
Next
</ul>
</div>
</div>
Controller:
Public Class LocationSelectController
Inherits Controller
Private db As New MCSCInventoryModels
' GET: LocationSelect
Function Index() As ActionResult
Dim distinctBuildings = From Row In db.tblLocations
Select Row.Building
Distinct
Return View(distinctBuildings)
End Function
' GET: FloorS
Function SelectFloor(ByVal selectedBuilding As String) As PartialViewResult
Dim floorsInSelectedBuilding = From Row In db.tblLocations
Where Row.Building = selectedBuilding
Select Row.Floor
Distinct
Return PartialView(floorsInSelectedBuilding)
End Function
End Class
Can you tell me why this ajax call opens the partial view in it's own page, instead of rendering it in the specified div?
Update I have checked the accepted answers to both of these questions and they have not solved the issue.
Here
and
Here

Answer 1

You are most likely missing the unobtrusive script in your layout page.
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
refer to this question:
Why does Partial View show as full page in MVC 5 Visual Studio 13?
one more thing is to add the last (UnobtrusiveJavaScriptEnabled) line to your config file (Web.Config):
<configuration>
<appSettings>
<add key="webpages:Version" value="2.0.0.0"/>
<add key="webpages:Enabled" value="false"/>
<add key="PreserveLoginUrl" value="true"/>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

Answer 2

Ultimately what was causing this issue was my use of a non-traditional drop down. To solve the problem I added a class to the <a role="menuitem"> like so:
#<li role="presentation"><a class="ddlist" role="menuitem" tabindex="-1" href="#"
>#Html.DisplayFor(Function(modelItem) currentItem)</a></li>
and then used:
$('.ddlist').click(function () {
to trigger the ajax call.
I also removed the href="/LocationSelect/SelectFloor" which was left over from the design phase and causing the partial view to open in it's own page when a selection was made and the ajax wasn't being triggered.