JQuery Mobile panels and headers in multiple pages

In a jqm multipage project I often want to use a header, footer or navigation panel across several pages. How do I do this without repeating the markup for each page? Well, my solution is to write the markup only once on the main page, and then on the pagebeforecreate event clone it to all the other pages.

Take a nav panel for example:

<div data-role="page" id="index">
<div data-role="panel" data-position-fixed="true" data-theme="a" id="nav-panel">
            <ul data-role="listview" data-theme="a" class="nav-search">
                <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                    <li><a href="#" data-destination="#home">Home</a></li>
                    <li><a href="#" data-destination="#search">Search</a></li>
                    <li><a href="#" data-destination="#about">About</a></li>
            </ul>
</div> 
 <!-- etc.... -->

And then in subsequent pages I add a div with a suitable classname to identify it:

<div data-role="page" id="search">
        <div class="navPanelChild"></div>
<!-- etc.... -->

And then on the pagebeforecreate event of the first page of the app I clone the nav panel and replace all the child containers with it:

$(document).delegate("#index", "pagebeforecreate", function () {
      var navpanelCopy = $( "#nav-panel" ).clone();
      $( ".navPanelChild" ).replaceWith(navpanelCopy);
}); 

Panel bug with jQuery Mobile

I was implementing a jqm panel this morning to be used as a navigation menu reveal kinda thing, but I came upon a problem

jquery.mobile-1.3.2.js:10330:
var $theme = $.data( page[0], "mobilePage" ).options.theme
$.data(...) is undefined

There are two fixes for this. One is to downgrade from jQuery 2.x back to 1.9. The other is to slightly modify the jqm file simply by replacing 'mobilePage' with 'mobile-page'. I opted for the latter. 

iOS7 status bar with Phonegap and JQM

Only a few weeks after battling with the new annoying iOS7 status bar for a native app, I'm now faced with the same problem while building a Phonegap with jQuery Mobile.

Some of my app's elements, particularly back buttons in headers, sit directly under the transparent status bar.

I used this solution, only slightly modified from one I found online:

$(document).delegate("div[data-role='page']", "pageinit", function () {
           
            if (navigator.userAgent.match(/(iPad|iPhone);.*CPU.*OS 7_\d/i)) {
                $("body").addClass("ios7");
                $('body').append('<div id="ios7statusbar"/>');
            }


        })

#ios7statusbar
{
    width:100%;
    height:20px;
    background-color:white;
    position:fixed;
    z-index:100;
}
 
.ios7 .ui-page
{
    margin-top: 20px;
}

phonegap build android - An error occurred while building the android project

When building my Phonegap Android project I got this error during compile:

[error] An error occurred while building the android project. 

/Users/edpitt/Projects/MyProj/platforms/android/cordova/lib/check_reqs.js:35

        return target.split('=')[1].replace('\n', '').replace('\r', '').replac

                                    ^

TypeError: Cannot call method 'replace' of undefined

    at Object.module.exports.get_target (/Users/edpitt/Projects/MyProj/platforms/android/cordova/lib/check_reqs.js:35:37)

The only way I could work out a fix for this was by switching workspace in Eclipse, and then importing the code into that new workspace.

AndroidManifest.xml: Resource is out of sync with the file system

Today when starting up my Android project (which worked yesterday) I got the following error:

com.android.ide.eclipse.adt.internal.project.AndroidManifestHelper] Unable to read /Users/edpitt/Projects/MyProject/platforms/android/AndroidManifest.xml: org.eclipse.core.internal.resources.ResourceException: Resource is out of sync with the file system: '/MyProject/AndroidManifest.xml'.

 I fixed this by refreshing the project (click the project and hit F5) and rebuilding it (Projects > Clean).

Android Logcat - Unexpected value from nativeGetEnabledTags

I've recently started using Phonegap for a new project as we're targeting iOS, Android and WinPhone simultaneously. It's early days but I've had very few problems so far.

After running 'phonegap platform add android' and starting up the basic project for the first time in Eclipse I was met with this error, hundreds of times, in Logcat:

Unexpected value from nativeGetEnabledTags

The workaround for this is to filter out the message in Logcat by using this:

^(?!.*(nativeGetEnabledTags)).*$

Goto your Logcat, and in the Saved Filters part, click on Edit selected logcat filter. There in the by Log Message field enter ^(?!.*(nativeGetEnabledTags)).*$. If Saved Filters is not visible then click on Display saved filters view in the Logcat.