Jquery Mobile UI listview with Kendo UI

Question

I'm using Jquery mobile UI listView.

<div data-role="content">
                <ul data-role="listview" data-inset="true" data-theme="a">

                    <li>
                        <a href="Area.aspx">Area</a>
                    </li>

            </div>

In the "Area.aspx" page i have a Kendo UI grid.

<div id="example" class="k-content">
            <div id="clientsDb">

                <div id="grid" style="height: 380px"></div>

            </div>

            <style scoped>
                #clientsDb {
                    width: 692px;
                    height: 413px;
                    margin: 30px auto;
                    padding: 51px 4px 0 4px;
                    background: url('web/grid/clientsDb.png') no-repeat 0 0;
                }
            </style>

            <script type="text/javascript">
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        columns: [{
                            field: "FirstName",
                            width: 90,
                            title: "First Name"
                        }, {
                            field: "LastName",
                            width: 90,
                            title: "Last Name"
                        }, {
                            width: 100,
                            field: "City"
                        }, {
                            field: "Title"
                        }, {
                            field: "BirthDate",
                            title: "Birth Date",
                            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                        }, {
                            width: 50,
                            field: "Age"
                        }
                        ]
                    });
                });
            </script>
        </div>

My issue is when i click on the link Area page is not navigating. It's stuck with Jquery loading image shown.

Answer 1

It is because jquery Mobile will intercept the <a> tag and use AJAX to get the HTML to navigate the page instead of changing page directly. This result your javascript in "Area.aspx" will not execute.

To fix this issue, you would add data-ajax="false" and rel="external" in the url.

To more understand about jquery Mobile, please refer to jquery mobile api:
http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html

Or my blog about this issue:
http://demanstudio.blogspot.com/2013/02/javascript-do-not-execute-in-jquery.html

<a href="Area.aspx" rel="external" data-ajax="false">Area</a>