enlaces ajax mal manejados

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="/es/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.

¡Gracias!

preguntado el 03 de mayo de 12 a las 15:05

3 Respuestas

I suspect this may be the answer

jQuery Mobile ajaxEnabled no funciona?

Will test and see if I can make it work

moviendo el 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>

Gracias...

contestado el 23 de mayo de 17 a las 11:05

That is the default behaviour if you use jQuery mobile. jQuery mobile will enable all your links to be ajaxified. That means it will load content of the linked page via ajax and update the url. If you want to disable a link to be ajaxified, you can add rel atributo con external como valor

<a href="somepagep.aspx" rel="external">This will open without ajax</a>

This will do a normal page opening so your urls will updated based on the new page.

Alternativamente puedes usar data-ajax="false" así como

<a href="somepagep.aspx" data-ajax="false">This link also will open without ajax</a>

this link has more info about it http://jquerymobile.com/test/docs/pages/page-links.html

contestado el 07 de mayo de 12 a las 18:05

so does the "$.mobile.ajaxEnabled = false;" not enter into it ? - ReidLinden

that is a global level configuration to disable all links to be ajaxified. adding these attributes will disable individual links. - Shyju

quite understood. but, the real question is, (if I've got them disabled for all, I shouldn't need it disabled on individual links)... how come the generic disable behavior (which comes as the default config in a new MVC mobile project) not actually disable them....I've posted another answer that seems like it'll turn out to be the correct answer, but I'm working on being able to test it.. - ReidLinden

That is strange. If $.mobile.ajaxEnabled = false; is set then it should not generate ajax links. Please check whether your view is using some other master page which has got this setting enabled. Look for "_ViewStart.cshtml" under the corresponding view directory to see which master it is linked to.

In order to disable Ajax behavior for a particular hyperlink use data-ajax="false" attribute. Like below

<a href="/es/StatementBatch/Details/4" data-ajax="false">
   <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>

contestado el 07 de mayo de 12 a las 18:05

no, that $.mobile.ajaxEnabled = false bit IS from the master layout page. only the one as already referenced above.... I already knew how to do the data-ajax="false"... I'm more curious about why the ajax enabled script doesn't appear to be doing what I think it should... - ReidLinden

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.