Question

I have been searching through this site for an answer but I’m stuck.

Can someone please help me with the following question. I have a ASP.NET project written in VB and uses the jQuery Mobile 1.2.0 version.

I have a default page where there are 2 buttons (login / about), these work and redirect to the login page. However on the login page the login button event does not fire – it simply re-directs back to the default page. The same is true on the about page with a simple redirect button.

If I however refresh the login page then the buttons work?

Below is the code:

<%@ Page Title="Login" Language="vb" EnableEventValidation="false" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="login.aspx.vb" Inherits="Sequencing.login" %>
<asp:Content ID="Content1" ContentPlaceHolderID="page_title" runat="server">
Login
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="pageheader" runat="server">
<h1>Login</h1>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="body" runat="server">

<asp:LinkButton ID="LinkButton1" data-role="button" data-rel="dialog" 
    data-transition="pop" runat="server" 
    Visible="False">LinkButton</asp:LinkButton>

<div align=center class="ui-bar ui-bar-c">

<asp:Image ID="Image1" runat="server" ImageUrl="~/images/McD_logoimage.png" /><br />

<h3>Planning the Future</h3>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>

<asp:Login ID="Login1" DestinationPageUrl="~/user/Main.aspx" runat="server" Width="100%">
<LayoutTemplate>
<asp:TextBox ID="UserName" runat="server" value placeholder="Username"></asp:TextBox>
<asp:RequiredFieldValidator ID="cvUserName" runat="server" ControlToValidate="UserName" ToolTip="User Name is required." ValidationGroup="Login1" Display="Dynamic">    </asp:RequiredFieldValidator>
<asp:TextBox ID="Password" runat="server" type="password" runat="server" value placeholder="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="cvPassword" runat="server" ControlToValidate="Password"     ToolTip="Password is required." ValidationGroup="Login1" Display="Dynamic">            </asp:RequiredFieldValidator>
<asp:CheckBox ID="RememberMe" runat="server" Text="Remember me!" />
<asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
<asp:Button ID="LoginButton" runat="server" data-role="button" data-theme="b"     CommandName="Login" Text="Log In" ValidationGroup="Login1" onclick="LoginButton_Click" />
    </LayoutTemplate>
</asp:Login>
    </ContentTemplate> 
</asp:UpdatePanel>
</div>
</asp:Content>

Thanks for your help in advance.

Further to this – I have looked up how to disable jQuery Mobile and have added the code to the site master where the jQuery is referenced – however still no joy!

<script>
    $(document).bind("mobileinit", function () {
        //apply overrides here
        $.mobile.ajaxEnabled = false;
    });
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js">    </script>
<script type="text/javascript"     src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Anyone else got any ideas?

Answer 1

After you refresh the login page, you will see that the form looks like this:

<form method="post" action="Login.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1" class="ui-mobile-viewport ui-overlay-c">

However, if you notice, when you first navigate to http://seq-dev.rs-mcd.co.uk/, then click “Login”, the <form> element on the login page looks like this:

<form method="post" action="" id="form1" class="ui-mobile-viewport ui-overlay-c">

Notice that the form doesn’t have the correct action or onsubmit values which are required for ASP .NET to work properly.

I don’t have too much experience with jQuery Mobile, but I do see that it’s doing its “AJAX navigation” magic, which is screwing with ASP .NET. Generally speaking, ASP .NET doesn’t play nicely with jQuery mobile (or the other way around?). Maybe you can disable AJAX navigation somehow – that might do the trick. You’re going to continue to run into this problem with server side events in ASP .NET if you can’t disable the AJAX navigation.

Hopefully this points you in the right direction.

EDIT

After some searching, I found this blog post which explains how to disable the jQuery Mobile AJAX Navigation. Here’s the relevant snippet:

<script type="text/javascript">
  $(function() {
    // disable ajax nav
    $.mobile.ajaxLinksEnabled = false;
  });
</script>

Hope this helps!