jQuery Mobile ASP.NET MVC3 Error

Question

I am trying to develop a mobile site using jQuery mobile and ASP.NET MVC 3. I have a simple login view as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Links.Content.Site_css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />

    <script src="@Links.Scripts.jquery_1_5_1_min_js" type="text/javascript"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.js"></script>
</head>

<body>
    <div data-role="page">
        <div data-role="header">
            <h1>Login</h1>
        </div>
        <div data-role="content">
           @using (Html.BeginForm())
{ 

<div data-role="fieldcontain">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" value="" />
</div>
<div data-role="fieldcontain">
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" value="" />
</div>

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend></legend>
        <input type="checkbox" name="rememberMe" id="rememberMe" class="custom" />
        <label for="rememberMe">Remember Me</label>
    </fieldset>
</div>

<input type="submit" value="Login" data-theme="e" />

}
            </div>
        <div data-role="footer">
                          </div>
    </div>

</body>
</html>

Below is the code for my controller:

public partial class AccountController : Controller
    {
        [HttpGet]
        public virtual ActionResult Login()
        {
            return View();
        }

        [HttpPost]
        public virtual ActionResult Login(string username, string password)
        {
            return MVC.Admin.Home.Index();
        }
    }

When the login button is clicked I just want to redirect the user to the home screen. But for some reason I get the following error:

Microsoft JScript runtime error: Unable to get value of the property '_trigger': object is null or undefined Line Number 2371: to.data( "page" )._trigger( "beforeshow", null, { prevPage: from || $("") } );

Can anyone help me with this issue?

Devin Burke · Accepted Answer · 2012-01-10 21:34:48Z

1

You must include the div with tag [data-role="page"] on your page

<div data-role="page" data-theme="b"></div>

edited Jan 10, 2012 at 21:34

Devin Burke

13.8k12 gold badges60 silver badges85 bronze badges

answered Jun 29, 2011 at 21:44

Peter Egan

111 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Mobile ASP.NET MVC3 Error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related