MVC, Jquery mobile and the datepicker

Question

Ok so im expanding my existing MVC4 app into a mobile app.

Totally new to jquery mobile and im having so many issues with this in MVC. Layout pages (MVC) and jquery mobile are a nightmare to work with or is it just me?

So im simply trying to show jquery ui datepicker in my page, it does not show! I have to do a reload of the page for it to show, why???

Ok Layout page

@{
    Layout = null;

}

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title></title>
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
      <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
            <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>



        </head>
        <body>
            @RenderBody();
        </body>

    </html>

and now the view

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AppLayout.Iphone.cshtml";

}


<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });

</script>
@using (Html.BeginForm())
{
    <div data-role="page" id="pageAccount">
    <div data-role="content">

       <div id="datepicker"></div>
</div>

        </div>

}

Any ideas why the page shows, but no datepicker (I have to reload the page for it to show)?

Please, stop referring to "ASP.NET MVC" simply as "MVC". One is a framework, while other is a language-independent design pattern. It's like calling IE - "the internet" — tereško, Jan 29 '13 at 20:41

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

Solution :

This should be changed:

$(function() {
    $( "#datepicker" ).datepicker();
});

to this:

$(document).on('pageshow', '#pageAccount', function(){       
    $( "#datepicker" ).datepicker();
});

To make a story short. jQuery Mobile should not be used with classic DOM ready jQuery functions. Instead jQuery Mobile is providing us with page events. If you want to find out more about jQuery mobile page events and how they work take a look at this ARTICLE, to make it transparent it is my personal blog. Or you can take a look HERE.

Edit :

Here's a working example:

Change positions of

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

into:

 <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
 <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

jQuery Mobile should always load last when used with jQuery UI.

Also you have forgot jQuery UI CSS, you will find datepicker without its CSS formatting.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 29 '13 at 18:39

Gajotres

57,309
16
102
130

Nope, just an empty screen – D-W Jan 29 '13 at 19:14
Take a look now at my answer example. – Gajotres Jan 29 '13 at 19:29
Still the same, it only works if i reload the page, are you using MVC? – D-W Jan 29 '13 at 19:42
MVC don't play any role here, you have a javascript error. Take a look at my example and use it to find your problem. If it is working in a simple example like mine it should also work for you. – Gajotres Jan 29 '13 at 19:45

MVC, Jquery mobile and the datepicker

1 Answers1

Solution :

Edit :