Ajax request does not fire because it generates an invalid url
The following code populates the second dropdown when the first dropdown changes (i.e. cascading dropdowns). However, the Ajax call is failing and I can't figure out why. I am not getting syntax or runtime errors. In debug mode, the GetPlans action is never called. An internal alert is never called, but an external one. Even worse, this same setting works elsewhere in my app! Here's all the relevant parts (let me know if I haven't covered some important details):
"Report / Out" View:
<script type="text/javascript" src="../../Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftAjax.js"></script>
<script type="text/javascript">
$(function() {
$("#year").change(function() {
var year = $("#year > option:selected").attr("value");
var rid = $("#rid").attr("value");
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "GetPlans/" + rid + "/" + year,
data: "{}",
dataType: "json",
success: function(data) {
alert('inside');
if (data.length > 0) {
var options = '';
for (p in data) {
var plan = data[p];
options += "<option>" + plan + "</option>";
}
$("#plan").html(options);
} else {
$("#plan").html('');
}
}
});
alert("outer");
});
});
</script>
<% Using Html.BeginForm()%>
<%=Html.Hidden("rid")%>
Year:
<%=Html.DropDownList("year", Model.Years)%>
Plan:
<%=Html.DropDownList("plan")%>
<% End Using%>
ReportController:
Function Auth(ByVal rid As Integer) As ActionResult
ViewData("plan") = New SelectList(New List(Of SelectListItem))
Return View(New Auth)
End Function
Public Function GetPlansByYear(ByVal rid As Integer, ByVal year As Integer) As JsonResult
Dim plans = _
(From bp In BenefitDataContext.GetContext.BenefitPlans _
Where bp.Benefit.repository_id = rid _
And bp.Benefit.plan_year_val = year _
Select bp.MphcPlan).Distinct
Return New JsonResult _
With {.Data = _
From p In plans _
Select New SelectListItem _
With {.Text = p.plan_code & " - " & p.plan_desc, _
.Value = p.plan_id}}
End Function
Auth class:
Public Class Auth
Private _years As SelectList
Public Property Years() As SelectList
Get
Return _years
End Get
Set(ByVal value As SelectList)
_years = value
End Set
End Property
Public Sub New()
Dim disinctYears = _
(From b In BenefitDataContext.GetContext.Benefits _
Where b.repository_id = 1 _
Select b.plan_year_val).Distinct
Dim yearList = _
From y In disinctYears _
Order By y _
Select New SelectListItem _
With {.Text = y, _
.Value = y, _
.Selected = (y = Now.Year)}
Years = New SelectList(yearList, "Value", "Text")
End Sub
Global.asax - Registration of routes:
routes.MapRoute( _
"AuthReportGetPlans", _
"GetPlans/{rid}/{year}", _
New With {.controller = "Report", .action = "GetPlansByYear", .rid = "", .year = ""} _
)
Any ideas on how to figure out what's going on?
UPDATE: Found a problem while checking the error output in the Ajax call, so now I know the cause of the problem: the url is added to the current path, not called from the route, i.e. / Reports / Auth / GetPlans / 1/2009 instead of / GetPlans / 1/2009. This is confusing as it seems to be configured correctly in global.asax to map to the route I configured and as said earlier I have this in another view and it works fine there. Anyone input as to why the Ajax call is pointing to the wrong path?
a source to share
Try to capture the error event of the .ajax call and see if it tells you more information
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "GetPlans/" + rid + "/" + year,
data: "{}",
dataType: "json",
success: function(data) {
alert('inside');
if (data.length > 0) {
var options = '';
for (p in data) {
var plan = data[p];
options += "<option>" + plan + "</option>";
}
$("#plan").html(options);
} else {
$("#plan").html('');
}
},
error: function(xhr){
alert('something is b0rked')
// take a look at xhr.status and xhr.responseText
}
});
a source to share
Make sure MicrosoftAjax.js doesn't use $ for its own purposes.
If so, you can find information on how to use something other than $ on this page.
For instance:
var $jQuery = jQuery.noConflict();
$jQuery(function() {
$jQuery("#year").change(function() {
var year = $jQuery("#year > option:selected").attr("value");
var rid = $jQuery("#rid").attr("value");
$jQuery.ajax({ ...
...
a source to share
Silly question ... are you sure your script paths are correct? I had to hack a bit to make sure I ended up in the right place (see this thread )
I am not a huge jQuery user (I know very little and therefore dangerous), I would be tempted to make sure by sticking to
alert('Yep, I'm running');
somewhere in your function.
EDIT
The thread I pointed to does not specifically address the path issue. Basicvally I have a GetRootPath helper method that returns the root of the site and I call the jQuery files like this
<script src="<%= Html.GetBasePath() %>Scripts/jQuery.js" type="text/javascript"></script>
Sorry for the confusion
And now, I will try to teach grandma to suck eggs.;)
a source to share