Tuesday 26 June 2012

JQuery Mobile and Cordova (phonegap) with multiple Html files


I was caught out with this one myself the other night and monitoring the phonegap google groups, its seems to be a source of confusion for a lot of people. Hopefully this will clear it up, tell your friends, developers, your pet dog and anyone else that may be interested.....

I didn't notice (even though it was emblazened in bold and flashed) that jquery mobile loads its subsequent pages via ajax which was the light bulb moment for myself on why the other pages wont work.  Ok, so i'm a bit slower than your average human.

What this means, is we have all our gubbins in the index html file and then subsequent pages only need the page div and markup in order to render.  Lets have an example (I assuming you have the standard cordova setup here with a www directory and all the pages underneath it)

here's our index.html file

<html>
     <head>
          <!-- include all your css here -->
     </head>

     <body>
          <div datarole="page" id="page1">
                <a href="page2.html">page2</a>
          </div>
     </body>

     //include cordova
     //include jquery
     //do your mobile init here in script if reqd.
     //include jquery mobile

     <script type="text/javascript">
       
          document.addEventListener("deviceready", onDeviceReady, false);
          function onDeviceReady() {
                 //cordova is ready here !
          }

          //jquery mobile
          //bind to the page 2's pageinit function to do stuff on page 2.
          $( '#page2' ).bind( 'pageinit',function(event){
         //do stuff for page 2 (you could put this in an include file)
     });
     </script>

</html>

page2.html

<div data-role="page" id="page2">
    my page 2 markup.
</div>

As we said previously, JQuery mobile will load the next page into the place where the page role is for index.html so, page1 in index.html is replaced with the contents of page2.  All the script code for page  2 goes in where we bind up.  I would eventually move this out into its own js file and include it in index.html.

hope that helps anyone with this issue out there !
Posted by at 1 comment:

Thursday 21 June 2012

DONT PUT . in your service name in wcf (if webhttp)

Talk about utter failure, we had a webhttp wcf service set up the other day and we all scratched our heads trying to figure out why the wsdl validated but no endpoints were being shown.  Thanks to a sharp eye from Nick Mayne here at work he just so happened to notice the service name had periods in it.  Removed those and it worked... sigh.
Posted by at 1 comment:

@model does not exist in current context

quick tip, check you have the razor page specification in the web.config, otherwise you receive the error in the title.  Reason being, you've turned it into webforms !


  <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </sectionGroup>
  </configSections>
  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="MyPageBaseType or razor page">
      <namespaces>
        <clear/>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Web.WebPages" />
        <add namespace="System.Linq"/>
        <add namespace="System.Collections.Generic"/>
        <add namespace="DrFoster.Rtm.Ui.Resources" />
        <add namespace="DrFoster.Common.Extensions" />
        <add namespace="DrFoster.Common.Web.MVC" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>
Posted by at 1 comment:

Thursday 14 June 2012

Resource not found 404 in MVC 3 at root level with IIS

Really annoying one this, IIS the other day was giving me the all too familiar 404 rescource not found at the root level when requesting my default path on an MVC 3 site.   If you haven't checked:

See if you can server any page from that address (any html page).  If this throws the same error, check the permissions settings for your site as I did this and it works.  Hope this helps somebody out there !
Posted by at 1 comment:
Subscribe to: Posts (Atom)