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?

0


a source to share


4 answers


Is the url not hitting at all? Maybe you should make your url absolute:

url: "/GetPlans/" + rid + "/" + year

      



Also try to bind the action to $ (document) .ready () rather than immediately.

+2


a source


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
    }
});

      

+2


a source


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({ ...

      

...

0


a source


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.;)

0


a source







All Articles