Mobilize me kendo.mobile.application throws an error when inside a .net form tag

[JD]

I have set up a page using the master page and child page approach, inside my master page I have the following code set up 

//Mobilize me

       window.kendoMobileApplication = new kendo.mobile.Application(document.body);

and this is inside the .net form tag with runat="server"

and I keep getting this message below:

JS Error

Timestamp: 2/8/2013 2:21:49 PM
Error: Error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.
Source File: http://mysite/scripts/kendo/2012.3.1114/mobile/kendo.mobile.min.js
Line: 13

I remove the form tag, then it works, but I need to have this tag in place as I am using .net controls on the page and they wont run without the form tag being present and the controls inside this tag. Any help ye can give on this would be appreciated.

[JD]

<form method="post" action="login.aspx" id="form1">

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjA1NDA4ODQ2MGRk2q+QsHZQPG2T6wJTuHfSQLDZLe30tutcxcWlse84emg=" />

</div>

 

<div class="aspNetHidden">

 

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAARwN723a13AyNWGgFdM+fKMvDynuB+2mQ5UyKNVykbsCP06O5KHvI5mzw6xrIuhIK38a2hoYscvut6Ft8fsPsb150BgsVg5ktbOosouSxcZeU+C32p21/N6mzmdmUF5ZwE=" />

</div>

     

         

 

     <div data-role="view" data-title="Patient List">

 

 

            User Name<input name="ctl00$ContentPlaceHolder1$tbxUser" type="text" id="tbxUser" /><br />

            Password<input name="ctl00$ContentPlaceHolder1$tbxPass" type="text" id="tbxPass" /><br />

            <br />

             

 

            <input type="button" id="btnLogin" value="login" onclick="return loginUser();" />

         

    </div>

 

 

 

 

         

    <input type="hidden" name="ctl00$hidSiteUrl" id="hidSiteUrl" />

        </form>

     

      

    <script type="text/javascript">

        head.js(

            { js: "/scripts/site.js" },

            { common: "/scripts/commoncode.js"},

   { jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" },

   { jqueryui: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" },

   { kendouimobile: "/scripts/kendo/2012.3.1114/mobile/kendo.mobile.min.js" }

        );

 

 

   head.ready("kendouimobile", function () {

       //Mobilize me

       window.kendoMobileApplication = new kendo.mobile.Application(document.body);

   });

    </script>

Here is an excerpt of the generated code for my problem.

[JD]

kind of figured it out, although like everything in coding world, what may fix one problem seems to open another one for you to solve. :)

my solution was on the call

changed

 

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

 

to

 

window.kendoMobileApplication = new kendo.mobile.Application(document.forms);

but then that creates a problem on my next page, which basically refreshes a listview, but everytime I hit the button on the page, it does a form postback :(.

[Alexander Valchev]

Hi JD,

I am not sure if I understood correctly what is the second issue that you encountered.

Note that KendoUI Mobile application is a type of single page application. This type of web applications fit on a single page with the goal of providing a more fluid user experience and native-like responsiveness. Forms post-backs which cause page reloading are in conflict with that approach - in the mobile app all the dynamic content is retrieved/posted via Ajax requests (the page is not reloaded).

That said, you should avoid the forms postbacks that the .NET framework makes automatically.
Another common mistake is multiple initialization of the mobile application which is usually caused when it is included the layout page. Please make sure that application is build only once in the index page.

In case you are wondering how to structure your entire application, please take a look at the layout component and remote view feature.

I hope this information will help.
 
Regards,
Alexander Valchev
the Telerik team