chamara
chamara

Reputation: 12709

Jquery Mobile UI listview with Kendo UI

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.

Upvotes: 0

Views: 599

Answers (1)

Derek
Derek

Reputation: 2735

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>

Upvotes: 1

Related Questions