Saturday, June 7, 2014

jQuery show() and hide() Don't Seem to Work with jQuery Mobile

That's not entirely true. Chances are you're running into this type of situation.

I was trying to hide a set of ui-block-* elements in a JQM grid when the user tapped a button. On the same set of ui-block-* elements, my media query for an iPhone was setting display: block !important. When the user would tap the button the elements would animate to hide but then suddenly re-appear.

This was not a problem on an iPad or in a desktop version of Chrome. But on the iPhone (iOS 6 and 7 at least), the !important directive was winning -- was dictating the final display.

That !important directive was unnecessary in my case, so when I removed it the calls to hide() and show() began working as expected.

Quick and Dirty Forms Auth to Test Something Else

Recently I needed to test how an Application Cache would operate, if at all, when resources where protected by ASP.NET forms authentication within a ASP.NET MVC application. I didn't need a full forms auth implementation, just something quick. I've done most of this before, but had nearly forgotten the details.

The Web.config:

    <authentication mode="Forms">
      <forms loginUrl="~/Account/Login" timeout="2880">
        <credentials passwordFormat="Clear">
          <user name="admin" password="password"/>

The AccountController with the [Authorize] attribute:

        public ActionResult Login(string returnUrl)
            ViewBag.ReturnUrl = returnUrl;
            return View();

        public ActionResult Login(LoginModel model, string returnUrl)
            if (ModelState.IsValid && FormsAuthentication.Authenticate(model.UserName, model.Password))
                FormsAuthentication.SetAuthCookie(model.UserName, false);
                return RedirectToLocal(returnUrl);
            ModelState.AddModelError("", "The user name or password provided is incorrect.");

            return View(model);

        private ActionResult RedirectToLocal(string returnUrl)
            if (Url.IsLocalUrl(returnUrl))
                return Redirect(returnUrl);

            return RedirectToAction("Index", "Home");

The LoginModel class:

    public class LoginModel
        [Display(Name = "User name")]
        public string UserName { get; set; }

        [Display(Name = "Password")]
        public string Password { get; set; }

The Login.cshtml file:

@model OfflinePartial.Models.LoginModel
    ViewBag.Title = "Login";
@using (Html.BeginForm())
        @Html.LabelFor(m => m.UserName)
        @Html.TextBoxFor(m => m.UserName)
        @Html.ValidationMessageFor(m => m.UserName)
        @Html.LabelFor(m => m.Password)
        @Html.PasswordFor(m => m.Password)
        @Html.ValidationMessageFor(m => m.Password)
    <p><input type="submit" value="Log in" /></p>