Question

I have a dropdown list that auto submits a form and performs a search that I use throughout a project via a partial view, but it only works the first time I use it, unless I refresh the page. It’s an MVC 4 with jQuery Mobile project.

Here is the code I have in my partial view,

<script type="text/javascript">
    $(function () {
        $("#CoastLineID").change(function () {
            var actionUrl = $('#TheForm').attr('action') + '/' + $('#CoastLineID').val();
             $('#TheForm').attr('action', actionUrl);
             $('#TheForm').submit();
         });
    });
</script>
<p>
    @using (Html.BeginForm("SearchCoast", "Home", FormMethod.Post, new { id = "TheForm" }))
    {
        @Html.DropDownList("CoastLineID", (SelectList)ViewBag.ArticleId, "Select a Coastline")
    }
</p>

I guess I need to be able to refresh the page or the list each time a page/view that uses the partial view is loaded somehow. Is this a jQuery issue???

Any ideas, I can put the URL up for the site if I’m allowed to?

Update/Edit

Thanks guys,

I’ve come across a few issues mixing jQuery Mobile and MVC and mostly due to the way they both handle URL strings differently, all coming from 15 years of web development. All the jQuery Mobile docs deal with classic URL strings e.g.. about/us.html which is not the MVC way!

This is my controller code to populate the dropdown,

var coastlines = db.CoastLines.Select(c => new { c.CoastLineID, c.CoastLineName });
ViewBag.CoastLineId = new SelectList(coastlines.AsEnumerable(), "CoastLineID", "CoastLineName", 0);

And this is the web site,

http://www.peninsulaguide.com.au/

Click “Beach Search” and then “Select a Coastline” or “Select a Town” will work but nothing after that without a refresh.

There are two dropdowns but it doesn’t make a difference if I remove one.

Cheers,

Mike

Answer 1

It’s hard to tell for sure without seeing the entire page, but a likely cause of your problem is that the dropdownlist on the part of the page which is reloaded when the form is posted.

If that is so, your problem is that you are hooking up an event handler to one dropdownlist, and then expects that event handler to handle change events from all later dropdownlists that are given the same id.

Read up on the .live() method in the jQuery documentation, and then change your code to this:

$(function () {
    $("#CoastLineID").live('change', function () {
        var actionUrl = $('#TheForm').attr('action') + '/' + $('#CoastLineID').val();
         $('#TheForm').attr('action', actionUrl);
         $('#TheForm').submit();
     });
});

Note: If you’re using jQuery 1.7 or later, .live() is deprecated and should be replaced by .on(). To accomplish this, replace

$("#CoastLineID").live('change', function () { ... });

with

$(document).on('change', '#CoastLineID', function () { ... });

Details can be found in the documentation for .live(). Thanks to stian.net for pointing this out.