Question

I have an asp.net mvc 4 with jquery-mobile app.

On one page (url: /StatementBatch ), I have a list of batches, which are simply links to the batch details page (url: /StetementBatch/Details/4 ).

<li>
    <a href="/StatementBatch/Details/4">
        <h3>January 2012</h3>

        <div style="float: right; width: 30%;"><strong>Issued  : </strong>1/10/2012 12:00:00 AM</div>
        <div style="float: right; width: 30%;">Completed</div>

        <p class="ui-li-aside"><strong>1277</strong></p>
    </a>


</li>

The oddity is that once the link is clicked, and the details page renders, the browsers current url is now http://localhost:49457/StatementBatch#/StatementBatch/Details/4

What do I need to change in the app to get this behavior fixed?

My guess is that its some sort of ajax loading related problem, but my shared _Layout.cshtml file contains $.mobile.ajaxEnabled = false;, which I expected would kill all ajax loading, but I’ve obviously mis-interpreted that one.

Thanks!

Answer 1

I suspect this may be the answer

jQuery Mobile ajaxEnabled doesn't work?

Will test and see if I can make it work

moving the mobileinit binding to after jquery, but before jquery-mobile does the trick. This appears to be a bug in MVC4’s (new) mobile web application template, which simply bundles all the scripts together

This fails….

<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>

<script>
    $(document).bind("mobileinit", function() {
        // As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
        // when navigating from a mobile to a non-mobile page, or when clicking "back"
        // after a form post), hence disabling it.
        $.mobile.ajaxEnabled = false;
    });
</script>

But this works….

<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />

<script src="../../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>

<script>
    $(document).bind("mobileinit", function() {
        // As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
        // when navigating from a mobile to a non-mobile page, or when clicking "back"
        // after a form post), hence disabling it.
        $.mobile.ajaxEnabled = false;
    });
</script>

<script src="../../Scripts/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script src="../../Scripts/modernizr-2.5.3.js" type="text/javascript"></script>

Thanks…