Question

I have a dynamic MVC4, jQuery Mobile application that works for the most part quite well. I have an auto posting dropdown list that selects a list from the database via the following code.

<script type="text/javascript">
    $(function () {
        $("#TownID").live('change', function () {
        //$("#TownID").change(function () {
            var actionUrl = $('#TheForm1').attr('action') + '/' + $('#TownID').val();
            $('#TheForm1').attr('action', actionUrl);
            $('#TheForm1').submit();
        });
    });
</script>

<p>
     @using (Html.BeginForm("SearchTown", "Home", FormMethod.Post, new { id = "TheForm1" }))
    {
        @Html.DropDownList("TownID", (SelectList)ViewBag.TownId, "Select a Town")
    }
</p>

The problem is it only works properly the first time a search is performed unless I click refresh. I don’t think this has anything to do with MVC, I think the problem is with AJAX and jQuery Mobile.

Edit:

The first time I search http://www.mysite.com/Home/Search/2 yields a result and woks fine, but the second time something seems to be left behind in the DOM??? and it looks for:

www.mysite.com/Home/Search/2/2 also

I get 404 errors in my log and “Error Loading Page” but it still finds the results and displays the page correctly!

Then with a third search I get the error 404’s in my log and “Error Loading Page” but it has grown and now looks for:

www.mysite.com/Home/Search/2/2
www.mysite.com/Home/Search/2/2/2 also

This then continues to grow after every search until at some seemingly random point on each test, it seems to give up and I get error 505

Additional Edit:

The code works perfectly if I take jQuery Mobile out of the question

Can anyone tell me what might be going on here?

Answer 1

I guess this is one for the future, MVC and jQuery Mobile don’t seem to blend completely right now. Maybe MS’s response to the issue is Single Page Applications!

SPA may satisfy Danial also?