When I remove jQuery Mobile, the code works perfectly!
The form:
@using (Html.BeginForm("SearchTown", "Home", FormMethod.Post, new { id = "TheForm1" }))
{
@Html.DropDownList("TownID", (SelectList)ViewBag.TownId, "Select a Town")
}
The Javascript:
<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>
However, when jQuery Mobile is added to the site and I submit the form, my log keeps adding the ID field again at the end of the URL string. This only happens in my log, not in the browser. In the browser, it still appears to be working fine! For example:
www.mysite.com/Home/SearchTown/2 the first time
www.mysite.com/Home/SearchTown/2/2 the second time
www.mysite.com/Home/SearchTown/2/2/2 the third time
In the browser, it still shows as www.mysite.com/Home/SearchTown/2
Why is jQuery Mobile causing this issue?