CODEWITHSUNDEEP
jqueryasp.netvb.netjquery-mobile
Steve
Steve

Reputation: 65

JQuery Mobile + ASP.NET - Buttons Not Firing

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?

Upvotes: 2

Views: 5456

Answers (3)

White Lantern
White Lantern

Reputation: 89

You need to set the submit behavior to false and then add an OnClick event like below.

.aspx page - asp:Button runat="server" ID="btnSubmit" Text="Submit" CssClass="Button" UseSubmitBehavior="false" OnClick="btnSubmit_Click">

.aspx.vb page -

Region "Button Click Submit"

Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)

    Response.Redirect("CanegateMidShiftTempB6TY.aspx")

End Sub

End Region

Upvotes: 0

Rajendra Pathi
Rajendra Pathi

Reputation: 21

Open the jQuery-mobile.js and search for "submit", the submit behavior is differently implemented in mobile version of .js.

So please comment that submit function in mobile js, then your asp.net forms will be submitted according to its behavior.

Commenting on that submit behavior in mobile js, you will not loose any features, so just comment it out.

Upvotes: 2

Brandon Montgomery
Brandon Montgomery

Reputation: 6986

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!

Upvotes: 1

Related Questions