I am using the WinJS.UI.AutoSuggestBox from the first example on this link: http://try.buildwinjs.com/#searchbox:simplelist1
I copied the exact same code to make sure I was not making any mistakes on my part, but it still doesn't render correctly. I have no idea what the problem might be.
PS: the Data.animeList is a namespace defined on the default.js, it works correctly and I've been using it on other pages. It is an array of strings, just like the one on the example mentioned above. Using the array provided on the example resulted on the same thing.
Here is the image showing what the problem is (well, it's not rendering, so you won't be able to see anything): http://i.imgur.com/e0VYWB5.png
And here is the code:
// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
WinJS.UI.processAll().then(function () {
// Renders the anime list view.
//var animeListView = document.getElementById("animeList");
//animeListView.winControl.header = Renderer._animeListHeaderTemplate;
//animeListView.winControl.itemDataSource = Data.animeListData.dataSource;
//animeListView.winControl.itemTemplate = Renderer._animeListTemplate;
//animeListView.winControl.layout = new WinJS.UI.GridLayout();
});
},
unload: function () {
// TODO: Respond to navigations away from this page.
},
updateLayout: function (element) {
/// <param name="element" domElement="true" />
// TODO: Respond to changes in layout.
},
});
var suggestionList = Data.animeList;
function suggestionsRequestedHandler(eventObject) {
var queryText = eventObject.detail.queryText,
query = queryText.toLowerCase(),
suggestionCollection = eventObject.detail.searchSuggestionCollection;
if (queryText.length > 0) {
for (var i = 0, len = suggestionList.length; i < len; i++) {
if (suggestionList[i].substr(0, query.length).toLowerCase() === query) {
suggestionCollection.appendQuerySuggestion(suggestionList[i]);
}
}
}
};
function querySubmittedHandler(eventObject) {
var queryText = eventObject.detail.queryText;
WinJS.log && WinJS.log(queryText, "sample", "status");
};
WinJS.Namespace.define("Sample", {
suggestionsRequestedHandler: WinJS.UI.eventHandler(suggestionsRequestedHandler),
querySubmittedHandler: WinJS.UI.eventHandler(querySubmittedHandler)
});
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>home</title>
<link href="home.css" rel="stylesheet" />
<script src="home.js"></script>
</head>
<body>
<!-- Home page. -->
<div class="fragment">
<!-- Header of the home page. -->
<header aria-label="Header content" role="banner">
<!-- Back button for navigation between pages. -->
<button data-win-control="WinJS.UI.BackButton"></button>
<!-- Page title. -->
<h1 class="titlearea win-type-ellipsis">Anime Manager</h1>
<!-- Navbar. -->
<div class="navbar">
<button type="button">Profile</button>
<button type="button">Settings</button>
<!-- The AutoSuggestBox -->
<div style="background: red; display: inline-block; margin: 15px 0;" data-win-control="WinJS.UI.AutoSuggestBox" data-win-options="{
placeholderText: 'Type a show',
onsuggestionsrequested: Sample.suggestionsRequestedHandler,
onquerysubmitted: Sample.querySubmittedHandler
}"></div>
<!--<input type="search" placeholder="Search a show..." />-->
</div>
</header>
<!-- Body of the home page. -->
<section class="page-section" aria-label="Main content" role="main">
<div id="testes"></div>
<!-- Anime list view. -->
<!--<div id="animeList" data-win-control="WinJS.UI.ListView" data-win-options="{header: select('.header')}"></div>-->
</section>
</div>
</body>
</html>
I found the problem. My WinJS was outdated - I am using the WinJS 3 and this feature is for WinJS 4.
Related
I trying to navigate between 3 pages which contain the same header and footer but each page has different content.
I want to load different contents html on hash change.
The problem is that when I click on the same page again, the content.html loaded again.
How can I use the content without loading the html again and again, using java script/html/jquery?
Code example:
Navigationbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="css/navigationbar.css">
</head>
<body>
<nav>
<img id="navigation-bar-logo" class="logo" src='images/flybryceLogo.png'>
<ul class="navigation-bar-ul">
<li class="navigation-bar-li"><a id="navigation-bar-contact-page-tab" href="#contact.html">CONTACT</a></li>
<li class="navigation-bar-li"><a id="navigation-bar-about-us-page-tab" href="#aboutus.html">ABOUT US</a></li>
<li class="navigation-bar-li"><a id="navigation-bar-home-page-tab" href="#home.html">HOME</a></li>
</ul>
</nav>
</body>
</html>
initial.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>One Page Test</title>
<link rel="stylesheet" type="text/css" href="css/homepage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="main-container" class="main-container">
<div id="header" class="header">
</div>
<div id="content" class="content"></div>
<div id="footer" class="bot"></div>
</div>
<script>
document.onreadystatechange = function(){
if (document.readyState == 'complete') {
window.onhashchange=hash_change;
window.onload=hash_change;
if(window.location.hash==''){
//default hash
window.location.replace('#home.html');
}
//load the header
$("#header").load("fragments/navigationbar.html");
//load the footer
$("#footer").load("fragments/footer.html");
}
}
function hash_change()
{
//get the new hash
var newHashCode = window.location.hash.substring(1);
if (newHashCode === "home.html"){
$("#content").load("home.html");
} else if (newHashCode === "aboutus.html") {
$("#content").load("aboutus.html");
} else if (newHashCode === "contact.html"){
$("#content").load("contact.html");
}
}
</script>
</body>
</html>
A longer but suitable solution would be to build a content cache on your own.
For example asking to the server just once the html and then setting it to the $('#content') element. You can use this helper function.
var contentsCache = {};
var getAndCache = function(url, callback) {
var cachedContents = contentsCache[url];
if (!cachedContents) {
$.get(url, function(serverContents) {
cachedContents = serverContents;
contentsCache[url] = cachedContents;
callback(cachedContents);
});
} else {
callback(cachedContents);
}
};
And then replace the $('#content').load calls by calls to this new asynchronous way.
function hash_change()
{
var fillContentCb = function(s) {
$('#content').html(s);
};
//get the new hash
var newHashCode = window.location.hash.substring(1);
if (newHashCode === "home.html"){
getAndCache("home.html", fillContentCb);
} else if (newHashCode === "aboutus.html") {
getAndCache("aboutus.html", fillContentCb);
} else if (newHashCode === "contact.html"){
getAndCache("content.html", fillContentCb);
}
}
As suggested in some comments, consider using native HTML navigation instead. Another suggestion is to use a client-side JS framework which supports routing if this application is likely to grow.
Add an if condition that checks whether the current hash location matches with the one that's been clicked on, and if it does just return. You'd have to store it in a global JS variable, and set it every time you navigate.
I am running an AngularJS application/controller. My goal is to initialize and use the impress.js library on a page that is being dynamically loaded into my main home page. However, when I try to initialize the library, the page does not load. Attached is a snippet of the controller and html file.
NOTE: When I print the impress() object to the console, it is not null, and has the required functions. It is my suspicion that the impress() object is not hooking up to the page correctly.
Controller:
'use strict';
// Create the angular module
var cmodule = angular.module('coverage', ['ngRoute'])
// Create the coverage controller
cmodule.controller('coverageController', function($scope) {
console.log("Entering controller");
function require(script) {
$.ajax({
url: script,
dataType: "script",
async: true, // <-- This is the key
success: function () {
console.log(impress());
impress().init();
},
error: function () {
throw new Error("Could not load script " + script);
}
});
}
console.log("About to require");
angular.element(document).ready(function () {
require("/content/libraries/impress.js");
});
});
HTML File:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>My Coverage</title>
<link rel="stylesheet" href="/content/styles/team1.css">
</head>
<body class="impress-not-supported">
<!--
For example this fallback message is only visible when there is `impress-not-supported` class on body.
-->
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<!-- Now the fun begins -->
<div id="impress">
<!-- The background image -->
<div class="present" data-x="0" data-y="0">
<!-- Place Image here -->
</div>
<!-- Example content -->
<div id="url-ident" class="step" data-x="0" data-y="0">
<q>Ready to view your coverage?</q>
</div>
<!-- Example content -->
<div id="step1" class="step" data-x="500" data-y="0">
<p>Questions start here!</p>
</div>
</div> <!-- /div impress -->
<script type="text/javascript" src="/content/libraries/impress.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!--script type="text/javascript">impress().init();</script-->
</body>
</html>
This problem was fixed by using the jmpress.js library instead, found here.
I am practicing Windows Phone development using WinJS and I have the following code which parses JSON received from a particular URL. And using the images to be bound to a list view in an HTML page,
JavaScript code:
WinJS.xhr({ url: urlToBeUsed }).then(
function (sportsResponse) {
var sportsJSON = JSON.parse(sportsResponse.responseText);
var listItems = sportsJSON.Videos.Data;
for (var i = 0; i < listItems.length; i++) {
var imageList = listItems[i].Items;
var count = imageList.length;
if (count > 0) {
listItems[i].Items[0].Images.forEach(imageIteration);
function imageIteration(value, index, array) {
var picture = value.Url;
var name = value.title;
sportsImageList.push({
title: name,
picture: picture
});
}
}
}
imageList.itemDataSource = sportsImageList.dataSource;
})
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- WinJS references -->
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
<script src="/js/navigator.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/sports/sports.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage" style="width:100%;height:100%;padding:10px">
<div class="myTemplate" data-win-control="WinJS.Binding.Template">
<div class="myItem">
<img data-win-bind="src:picture" style="width:100px;height:100px" />
</div>
</div>
<div id="imageList" data-win-control="WinJS.UI.ListView" data-win-bind="winControl.itemDataSource:sportsImageList.dataSource" data-win-options="{itemTemplate:select('.myTemplate')}"></div>
</div>
</body>
</html>
I have tried many ways to bind the URL to the Image, but on the screen I can only see the links but not the actual images.
Where am I wrong?
All help and suggestions appreciated.
Thank you!
I believe your error is in your assignment line, remember that itemDataSource is a property of the ListView control. As it is in your code you're assigning that property to the imageList element.
Change it to this:
imageList.winControl.itemDataSource = sportsImageList.dataSource;
I have a Navigation App and I want to cause the second page which is going to be loaded to the default.html to execute a function in ready section.
I have written in the home.js the following code:
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
var articlesList;
articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("DNZ", publicMembers);
},
RSSFeedHandler: function getRssFeed() {
WinJS.xhr({ url: "http://feeds.feedburner.com/dotnetzone?format=xml" }).then(function (rss) {
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
article.link = items[n].querySelector("link").textContent;
article.description = items[n].querySelector("description").textContent;
article.pubDate = items[n].querySelector("pubDate").textContent;
articlesList.push(article);
}
});
}
});
})();
But this causes a problem when running it to the debugger; and the it stops.
My home.html page contains the following tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homePage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/home/home.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<div id="main">
<div id="DNZItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">
<div class="listItemTemplate" style="width: 173px; height: 100px;">
<div class="listItemTitle" data-win-bind="innerText: title" style="width: 173px; height: 100px;"></div>
<div class="listItemImage" data-win-bind="innerText: pubDate" style="width: 173px; height: 100px;"></div>
<!--<div class="listItemTitle" data-win-bind="innerText: link">
</div>-->
</div>
</div>
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Καλως ήρθατε!</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<section id="content">
<div id="articlelist" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: DNZ.ItemList.dataSource, itemTemplate: DNZItemTemplate }"></div>
</section>
</section>
</div>
</div>
</body>
</html>
and I think the problem is when I try to put the item to the list view! Do you have any ideas for the way I have to write it to run the getRSSFeed function when the home.html is being loaded?
In order for the articlesList to be visible in the RSSFeedHndler method you need to make it a property of the page object as follows:
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
articlesList:null,
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
// var articlesList;
this.articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("DNZ", publicMembers);
},
RSSFeedHandler: function getRssFeed() {
var _this=this;
WinJS.xhr({ url: "http://feeds.feedburner.com/dotnetzone?format=xml" }).then(function (rss) {
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
article.link = items[n].querySelector("link").textContent;
article.description = items[n].querySelector("description").textContent;
article.pubDate = items[n].querySelector("pubDate").textContent;
_this.articlesList.push(article);
}
});
}
});
})();
I've created this test page to bring out the issue I'm encountering.
The first time I click on 'Form' tab, the browser shows jQuery Mobile check boxes. Then if I click on 'Home' tab and again 'Form' tab, it shows browser's native check boxes!
What am I doing wrong here? How to fix it?
Thanks in advance!
index.html:
<!doctype html>
<html>
<head>
<title>Form Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
var value1;
var value2;
// remap jQuery to $
(function($) {
})(window.jQuery);
/* trigger when page is ready */
$(document).ready(function() {
initialize();
});
/**
* Initialize the page.
*
*/
function initialize() {
// get server parameters befor making ajax call
getFormValues();
// add click handler to the application navigation menu options
$("nav li").live('click', function(e) {
});
}
/**
* Gets server parameters from the application's configuration file.
*
*/
function getFormValues() {
// get the server URL from external XML file
$.ajax({
type : "GET",
url : "assets/config/formValues.xml",
cache : false,
async : false,
timeout : 5000,
dataType : "xml",
success : function(xml) {
$(xml).each(function() {
value1 = $(this).find('value1').text();
value2 = $(this).find('value2').text();
});
}
});
}
// Listen for any attempts to call changePage()
$(document).bind("pagebeforechange", function(e, data) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if( typeof data.toPage === "string") {
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var u = $.mobile.path.parseUrl(data.toPage);
if(u.hash.search(/^#formSection/) !== -1) {
currentContentSection = "formSection";
// We're being asked to display the items for a specific category.
// Call our internal method that builds the content for the category
// on the fly based on our in-memory category data structure.
displayValueFilters();
// Make sure to tell changePage() we've handled this call so it doesn't
// have to do anything.
e.preventDefault();
}
}
});
/**
* Sets up and displays values.
*
*/
function displayValueFilters() {
var pageSelector = "#formSection";
// Get the page we are going to dump our content into
var $page = $(pageSelector);
// get the div that's expected to have the search fields
var $searchFields = $page.children(":jqmData(role=sclRole)")
// Get the content area element for the page.
var $content = $page.children(":jqmData(role=content)");
// The markup we are going to inject into the content area of the page.
var markup = "";
markup += "<label for='value1'>" + value1 + "</label>";
markup += "<input type='checkbox' name='value1' id='value1' />";
markup += "<label for='value2'>" + value2 + "</label>";
markup += "<input type='checkbox' name='value2' id='value2' />";
$content.empty();
$(markup).appendTo($content).trigger("create");
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// Now call changePage() and tell it to switch to the page we just modified.
$.mobile.changePage($page, options);
}
</script>
</head>
<body>
<!-- home page section -->
<section id="homePageSection" data-role="page" data-title="Form Test - Home">
<div data-role="header">
<h1>Form Test</h1>
<nav data-role="navbar">
<ul>
<li>
<a href="#" class="ui-btn-active ui-state-persist" >Home</a>
</li>
<li class="formLineItem">
Form
</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" class="container">
<h1>Form - Home Page</h1>
</div><!-- /content -->
<div data-role="footer"></div><!-- /footer -->
</section><!-- /homePageSection -->
<!-- form section -->
<section id="formSection" data-role="page" data-title="Form Test - Form">
<div data-role="header">
<h1>Form Test</h1>
<nav data-role="navbar">
<ul>
<li>
Home
</li>
<li class="formLineItem">
<a href="#" class="ui-btn-active ui-state-persist" >Form</a>
</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" class="container">
</div><!-- /content -->
<div data-role="footer"></div><!-- /footer -->
</section><!-- /formSection -->
</body>
</html>
assets/config/formValues.xml:
<formValues>
<value1>Videos</value1>
<value2>Images</value2>
</formValues>
Updated code that works:
<!doctype html>
<html>
<head>
<title>Form Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
// data used to generate checkboxes
var value1;
var value2;
// flag that determines the page has already been initialized
var pageInitialized = false;
// flag that determines if the dynamic form has already been created from the loaded data
var formCreated = false;
// remap jQuery to $
(function($) {
})(window.jQuery);
// trigger when page is ready
$(document).ready(function() {
initialize();
});
/**
* Initialize the page.
*
*/
function initialize() {
// get server parameters befor making ajax call
getFormValues();
// set the flag indicating that the page has already been initialized
pageInitialized = true;
}
/**
* Gets server parameters from the application's configuration file.
*
*/
function getFormValues() {
// get the server URL from external XML file
$.ajax({
type : "GET",
url : "assets/config/formValues.xml",
cache : false,
async : false,
timeout : 5000,
dataType : "xml",
success : function(xml) {
$(xml).each(function() {
value1 = $(this).find('value1').text();
value2 = $(this).find('value2').text();
});
}
});
}
// Listen for any attempts to call changePage()
$(document).bind("pagebeforechange", function(e, data) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if( typeof data.toPage === "string") {
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var u = $.mobile.path.parseUrl(data.toPage);
if(u.hash.search(/^#formSection/) !== -1) {
currentContentSection = "formSection";
// if the form has not yet been created, proceed to creat it
if(!formCreated) {
// if the page hasn't been initialized (data not loaded), proceed to initialize
// this happens when the user refreshes the page when on 'Form' tab
if(!pageInitialized) {
initialize();
}
// generate the form controls from the loaded data and add them to the page
displayValueFilters();
formCreated = true;
// Make sure to tell changePage() we've handled this call so it doesn't
// have to do anything.
e.preventDefault();
}
}
}
});
/**
* Sets up and displays values.
*
*/
function displayValueFilters() {
var pageSelector = "#formSection";
// Get the page we are going to dump our content into
var $page = $(pageSelector);
// The markup we are going to inject into the content area of the page.
var markup = "";
markup += "<label for='value1'>" + value1 + "</label>";
markup += "<input type='checkbox' name='value1' id='value1' />";
markup += "<label for='value2'>" + value2 + "</label>";
markup += "<input type='checkbox' name='value2' id='value2' />";
$("#valueCheckboxes").empty();
$(markup).appendTo("#valueCheckboxes").trigger("create");
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// Now call changePage() and tell it to switch to the page we just modified.
$.mobile.changePage($page, options);
}
</script>
</head>
<body>
<!-- home page section -->
<section id="homePageSection" data-role="page" data-title="Form Test - Home">
<div data-role="header">
<h1>Form Test</h1>
<nav data-role="navbar">
<ul>
<li>
<a href="#" class="ui-btn-active ui-state-persist" >Home</a>
</li>
<li class="formLineItem">
Form
</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" class="container">
<h1>Form - Home Page</h1>
</div><!-- /content -->
<div data-role="footer"></div><!-- /footer -->
</section><!-- /homePageSection -->
<!-- form section -->
<section id="formSection" data-role="page" data-title="Form Test - Form">
<div data-role="header">
<h1>Form Test</h1>
<nav data-role="navbar">
<ul>
<li>
Home
</li>
<li class="formLineItem">
<a href="#" class="ui-btn-active ui-state-persist" >Form</a>
</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" class="container">
<form method="get" action="">
<div data-role="fieldcontain">
<!-- input field for toc search -->
<label id="searchLabel" for="searchInput"><strong>Search terms:</strong></label>
<input type="search" name="searchInput" id="searchInput" value="" />
</div>
<div style="text-align: left">
<fieldset id="valueCheckboxes" data-role="controlgroup" data-type="horizontal"></fieldset>
</div>
<div data-role="fieldcontain">
Search
</div>
</form>
</div><!-- /content -->
<div data-role="footer"></div><!-- /footer -->
</section><!-- /formSection -->
</body>
</html>
You are including a mess of assets. You need to decide between jQuery Mobile 1.0.1 and 1.1.0 (currently you're including 1.1.0 CSS and 1.0.1 JS).
For jQuery Mobile 1.1.0 your includes should look something like this:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
And for jQuery Mobile 1.0.1 your includes should look something like this:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
Since your code includes jQuery Mobile 1.0.1 it should be including jQuery Core 1.6.4.
I'm not convinced this will fix your problem. So make sure to check your JS console for any errors that occur. If you try to initialize a jQuery Mobile widget after it's already been initialized, you will receive an error.