2012-11-30 44 views
2

我一直在尋找這個網站的答案,但我卡住了。JQuery Mobile + ASP.NET - 不觸發按鈕

有人可以幫助我解決以下問題。我有一個用VB編寫的ASP.NET項目,並使用jQuery Mobile 1.2.0版本。

我有一個默認頁面,有2個按鈕(登錄/約),這些工作並重定向到登錄頁面。然而,在登錄頁面上,登錄按鈕事件不會觸發 - 它只是重新指向默認頁面。使用簡單的重定向按鈕在關於頁面上也是如此。

但是,如果我刷新登錄頁面然後按鈕的工作?

下面是代碼:

<%@ 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> 

感謝您的幫助提前。

而且這個 - 我已經看過了如何禁用jQuery Mobile的和添加的代碼到網站母版,其中jQuery的引用 - 但仍然沒有喜悅!

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

其他人有什麼想法嗎?

+0

我們無法幫您處理該代碼。也許只有當你擁有它的時候。 jQuery手機有時會將頁面移動到一個動態創建的div中,這通常在表單的外面,這就是沒有被解僱的原因。 – Aristos

+0

對不起,我不明白你的意思?我已經發布了這個網站 - 而且它也不在現場工作。 – Steve

+0

你可以給我們的網址來測試它嗎?並看看出了什麼問題。 – Aristos

回答

1

刷新登錄頁面後,您將看到形式如下:

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

但是,如果你發現,當你第一次瀏覽到http://seq-dev.rs-mcd.co.uk/,然後點擊「登錄」,在<form>元素在登錄頁面上看起來是這樣的:

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

注意,形式不具有所需要的ASP .NET正常工作正確actiononsubmit值。我沒有太多的jQuery Mobile經驗,但我確實看到它正在做它的「AJAX導航」魔術,它正在與ASP .NET搞砸。一般來說,ASP .NET不能很好地與jQuery移動(或其他方式?)搭配使用。也許你可以以某種方式禁用AJAX導航 - 這可能會訣竅。你要不斷地碰到這個問題,在ASP .NET服務器端的事件,如果你不能禁用AJAX導航。

希望這可以指引您朝着正確的方向發展。

編輯

經過一番搜索,我發現this blog post這也解釋瞭如何禁用jQuery Mobile的AJAX導航。這裏是相關的片段:

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

希望這有助於!

+0

我禁用了腳本管理器和更新面板,它仍然是一樣的。它仍然表現相同。 – Steve

+0

你誤會了。 ASP .NET不會導致問題。刪除更新面板和腳本管理器將無濟於事。您需要禁用jQuery Mobile的AJAX導航行爲。 –

+0

啊我看到了 - 你有什麼想法如何做到這一點? – Steve

2

打開jQuery-mobile.js並搜索「提交」,提交行爲在移動版本.js中有所不同。

所以,請評論說,提交功能,在移動js,那麼你的asp.net形式將根據其行爲提交。

對手機js中的提交行爲發表評論,您不會失去任何功能,只需註釋即可。